1.$===jQuery
2.size():获取当前元素序列个数。等同于length属性;
for (var i = 0; i < li.size(); i++) {}
案例:京东轮播图淡入淡出
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
width: 670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul{
position:relative;
}
ul li{
position:absolute;
top:0;
left:0;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="box">
<li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
<li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
<li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
<li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
<li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
<li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
</ul>
<ol style="z-index: 10;" id="uu">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
var li = $("#box li");
var oli = $("#uu li");
var index = 0;
setInterval(autoPlay,1000);
function autoPlay(){
if(index == li.size()-1){
index = 0;
}else{
index++;
}
li.eq(index).fadeIn().siblings().fadeOut();
oli.eq(index).addClass("current").siblings().removeClass("current");
}
</script>
3.列队动画:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
/*$("div").show(1000,function(){
$(this).fadeOut(1000,function(){
$(this).fadeIn(1000,function(){
$(this).hide(1000);
});
}
});*/
$("div").show(1000).fadeOut(2000).fadeIn(2000).hide(1000);//一般这样写
</script>
4.对象.animate(样式对象,时间毫秒数,linear/swing,callBack)
linear:匀速
swing:变速,先慢,中间快,后面慢。
callBack:回调 函数,当前动画执行完毕后执行。
$("#box").animate({
width : "500px",
height:300,
opacity:0.2
},2000,"swing");
5.
stop():停止当前动画,继续下面的动画
stop(true):停止当前元素的所有动画。
stop(true,true):停止当前元素的所有动画,当前动画强制到达目标位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 100px;
}
#box1{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
top: 150px;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="start">开始</button>
<button id="stop">停止</button>
<!--<div id="box1">
</div>-->
</body>
</html>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
//语法
/*$("#box").animate({
width : "500px",
height:300,
opacity:0.2
},2000,"swing");*/
//列队动画
1) /*$("#box").animate({
width : "500px"
},function(){
$(this).animate({
height:300
},function(){
$(this).animate({
opacity:0.2
})
})
});*/
2)//$("#box").animate({width:300}).animate({height:300}).animate({opacity:0.2});
//一般这样写
3)/*$("#box").animate({width:300})
$("#box").animate({height:300})
$("#box").animate({opacity:0.2});*/
// stop
$("#start").click(function(){
$("#box").animate({left:300},1000).animate({width:300},1000).animate({height:300},1000).animate({opacity:0.2},1000);
});
// $("#stop").click(function(){
// $("#box").stop();
// });
// $("#stop").click(function(){
// $("#box").stop(true);
// });
$("#stop").click(function(){
$("#box").stop(true,true);
});
</script>
6.queue();插入队列。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}
#box1{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
/*$("#box").animate({
width:500
},1000,function(){//回调函数在animate方法的里面
$("#box1").css("background","blue");
})*/
/*$("#box").animate({
width:500
}).queue(function(next){//这个回调函数在animate方法的外面
$("#box1").css("background","blue");
next();//可以使下面的动画继续操作
}).hide(1000);*/
/*$("#box").animate({
width:500
}).queue(function(){
$("#box1").css("background","blue");
$(this).dequeue();//可以使下面的动画继续操作,这个方法一般不用,因为他是低版本的jquery里面的方法
}).hide(1000);*/
</script>
7.hover(fn1,fn2);伪类 案例是手风琴效果
fn1:鼠标移入回调
fn2:鼠标移出回调
li.hover(function(){
$(this).animate({width:800}).siblings().animate({width:100});
},function(){
li.animate({width:240});
});
案例:手风琴效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none}
*{margin:0; padding:0;}
div{
width: 1160px;
height: 400px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var li = $("li");
for (var i = 0; i < li.size(); i++) {
var img = `<img src="images/${i+1}.jpg"/>`;
li.eq(i).html(img);
}
li.hover(function(){
$(this).animate({width:800}).siblings().animate({width:100});
},function(){
li.animate({width:240});
});
</script>
案例:图片的翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 150px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
img{
width: 300px;
height: 150px;
position: absolute;
left: 0px;
top:0;
}
p{
width: 300px;
height: 0px;
position: absolute;
left: 0px;
top:75px;
background: red;
line-height: 150px;
text-align: center;
font-size: 50px;
display: none;
}
</style>
</head>
<body>
<div>
<img src="small_bg3.png"/>
<p>背面</p>
</div>
</body>
</html>
<script src="../../jquery.js">
</script>
<script type="text/javascript">
$("div").hover(function(){
$("img").animate({
height:0,
top:75
},1000,function(){
$(this).hide();
$("p").show().animate({
height:150,
top:0
},1000)
})
},function(){
$("p").animate({
height:0,
top:75
},1000,function(){
$(this).hide();
$("img").show().animate({
height:150,
top:0
},1000);
});
});
</script>
8.语法:事件绑定,相当于js中的事件监听
1.bind("事件","data",function(e){
e.data
})
1)$("button").bind("click",function(){
$("#box").html("哈哈哈");
})
2)$("button").bind("click","我积极",function(e){
$("#box").html(e.data);
})
3)$("button").bind({
click:function(){
$("#box").html("哈哈哈");
},
mouseover:function(){
$("#box").html("我先来的");
}
})
2、.unbind("事件"),解除某个事件的绑定。
document.mousemove(function(){
});
document.mouseup(function(){
document.unbind("mousemove");
})
案例:bind实现拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script src="../jquery.js">
</script>
<script type="text/javascript">
$("div").bind("mousedown",function(e){//事件绑定
var x=e.offsetX;
var y=e.offsetY;
$(document).bind({
mousemove:function(e){
l=e.pageX-x;
t=e.pageY-y;
var maxL=$(window).width()-$("div").width();//获取屏幕的宽高
var maxT=$(window).height()-$("div").height();
l=l<0?0:(l>maxL?maxL:l);
t=t<0?0:(l>maxT?maxT:t);
$("div").css({
left:l,
top:t
});
return false;
},
mouseup:function(){
$(this).unbind("mousemove");// 事件解绑
}
})
})
</script>
9.mouseover和mouseenter的区别
有两个盒子时,小盒子在大盒子里面。
mouseover事件:鼠标移入大盒子会触发事件,再移入小盒子也会触发事件。
mouseenter事件:鼠标移入大盒子会触发事件,再移入小盒子不会触发事件
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background: red;
}
#content{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="content"></div>
</div>
</body>
</html>
<script src="../jquery.js"></script>
<script type="text/javascript">
/*$("#box").mouseover(function(){
alert("1");
})*/
$("#box").mouseenter(function(){
alert("1");
})
</script>
10.事件委托
1).delegate("li","click",function(){})//事件委托
$("ul").undelegate()//解除事件委托
2).on("click","li",function(){})//事件委托
$("ul").off()//解除事件委托
(注意:可以混合解除事件委托,比如用delegate委托,可以用off解除)
案例:电商网站五星评级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
width: 300px;
margin: 200px 200px;
list-style: none;
padding: 0px;
font-size: 50px;
}
li{
float: left;
width: 60px;
text-align: center;
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<script src="../../jquery.js"></script>
<script type="text/javascript">
var wjxEmpty = "☆";
var wjxFull = "★";
$("ul").delegate("li","mouseenter",function(){
$(this).html(wjxFull).prevAll().html(wjxFull).end().nextAll().html(wjxEmpty);
});
$("ul").delegate("li","mouseleave",function(){
$("li").html(wjxEmpty);
$(".clickOver").html(wjxFull).prevAll().html(wjxFull);
});
$("ul").delegate("li","click",function(){
$(this).addClass("clickOver").siblings().removeClass("clickOver");
});
</script>
11.one方法(此方法只执行一次)
$(document).one("click",function(){
alert("hehhe1");
})
12.scrollTop()方法
没有值,就是获取页面滚走的距离
有参数就是设置页面滚走的距离
$(window).scroll(function(){
console.log($("body,html").scrollTop());//页面滚走的距离 //IE浏览器 //谷歌浏览器
})
$("body,html").scrollTop(500)//设置页面滚走的距离
13.offset方法和position方法
1) 距离屏幕顶部或者左边的距离,就算相邻父级元素有定位,也是到屏幕顶部或者左边的距离,包括父元素padding,border
console.log($("#content").offset().left);
console.log($("#content").offset().top);
2)a.有父元素就是到父元素顶部的距离,不包括父元素的边框;
b.本元素有定位,那么就是定位时的距离,不包括父元素边框。
c.本元素没有定位,如果有父元素,那就是父元素padding值,没有就是0.不包括边框
console.log($("#content").position().left);
console.log($("#content").position().top);
14.ajax异步请求之load
load是一个post请求
可以用来加载页面,(“header”).load("header.html");
好处:就是减少连接,提高性能
$(this).load("index.php", {uname:"tom"},function(res,type){
console.log(type);//type判读断是post请求,还是get请求,res后台返回过来的值
})
15.ajax请求的格式:
1)$.get("index.php",{uname:"tom",age:23},function(res,type,obj){
alert(res,type,obj.status,obj.readyState);
})
2) $.post("index.php",{uname:"tom",age:23},function(res,type,obj){
console.log(res,type,obj.status,obj.readyState);
})
3) $.ajax({
type:"post",
url:"index.php",
data:{
uname:"tom",
age:23
},
success:function(){
console.log(res);
},
erro:function(err){
console.log(err);
}
})