一、序与迭代
1 、eq() 方法
<div class="box2">
<p class="teshu"></p>
<p class="teshu">我想红！我想当明星！</p>
<p></p>
<p></p>
</div>
$(".box2 p").eq(1)
$("p").eq(1)
$(".teshu").eq(1)
$(".box2 .teshu").eq(1)
$() 函数将返回一个对象队列，用 eq 来精确选择这个序列中的某个元素。eq 用法类似数组的下标。
同样的，lt、gt、odd、even、first、last都是这个机理。
2、 index() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
margin: 0;
padding: 0;
}
div.cen {
margin: 0 auto;
height: 500px;
width: 500px;
}
ul {
list-style: none;
}
p {
height: 50px;
width: 50px;
background-color: #5e5e5e;
margin: 10px;
}
p,h3 {
float: left;
}
h3 {
height: 50px;
width: 50px;
background-color: #5e5e5e;
margin: 10px;
}
</style>
</head>
<body>
<div class="cen">
<div>
<ul>
<li>
<h3>h3</h3>
<p>0</p>
<p>1</p>
<p>2</p>
</li>
</ul>
</div>
<div>
<ul>
<li>
<p>1</p>
<p>3</p>
<p>4</p>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$("p").click(function(){
alert($(this).index());
});
</script>
</body>
</html>
index 返回这个元素在亲兄弟中的排名，无视选择器选择标签的类型，只会从选择器选择的标签兄弟开始计数，拿到选择器选择标签的排名。重点在于计数的时候从选择标签的大哥开始，并不从本身开始。例子中。h3成功占位。
举一个应用实例选中 box1 中的 p 让 box2 的 p 发生改变
$(".box1 p").click(function(){
//有变化的是box2中对应的p
$(".box2 p").eq($(this).index()).css("background-color","red");
});
最后强调一下，是 index() 方法，而不是属性！
3、 each() 方法
each() 表示遍历节点，也叫作迭代符合条件的节点。
代码：
$("p").each(function(i){
$(this).animate({"width":50 * i},1000);
});
each 进行类似 for 循环的功能，遍历所有的 p，然后执行函数。默认传进来的参数 i 是从零开始计数的。$(this) 表示你现在正在遍历的 p。
4、 size() 方法和 length 属性
jQuery 对象中元素的个数。
前面 $() 的元素页面上一共有几个，length、size()返回它的个数。是同一个数值。
5、 get() 方法
get() 方法和 eq() 方法基本一致，都仰赖$()的序列。
eq() 返回的是 jQuery 对象，而 get() 返回的是原生JS对象。jQuery 对象后面要跟着 jQuery 方法，原生对象后面要跟着原生属性、方法：
$("p").eq(2).html("哈哈哈哈哈哈");
等价于：
$("p").get(2).innerHTML = "哈哈哈哈哈哈";
等价于：
$("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";
二、动画相关方法
1、 内置show()、hide()、toggle()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>togou</title>
<style>
div{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="show"/>
<input type="button" value="hide"/>
<input type="button" value="toggle"/>
<input type="button" value="show(1000)"/>
<input type="button" value="hide(1000)"/>
<input type="button" value="toggle(1000)"/>
<div></div>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("input:eq(0)").click(function(){
$("div").show(); //让一个本身是display:none;元素显示
});
$("input:eq(1)").click(function(){
$("div").hide(); //隐藏元素display:none;
});
$("input:eq(2)").click(function(){
$("div").toggle(); //切换显示状态。
//自行带有判断，如果可见，就隐藏；否则显示。
});
$("input:eq(3)").click(function(){
$("div").show(1000); //让一个本身是display:none;元素显示
});
$("input:eq(4)").click(function(){
$("div").hide(1000); //隐藏元素display:none;
});
$("input:eq(5)").click(function(){
$("div").toggle(1000,function(){
alert("偷狗完毕！");
}); //切换显示状态,自行带有判断，如果可见，就隐藏；否则显示。。
});
</script>
</body>
</html>
show()显示、hide()隐藏、toggle()切换
$("div").show(); //让一个本身是display:none;元素显示
$("div").hide(); //隐藏元素display:none;
$("div").toggle(); //切换显示状态。自行带有判断，如果可见，就隐藏；否则显示。如果show()、hide()、toggle()里面有数值，将变为动画：
$("div").show(1000);
此时display:none;的元素，将从左上角徐徐展开。动画机理：
这个display:none;的元素会变为显示的，然后瞬间将宽度、高度、opacity设为0，然后徐徐展开。可以加回调函数：
$("div").toggle(1000,function(){
alert("偷狗完毕！");
});
语法就是：
$("div").show([时间],[回调函数]);
[] 表示这个参数可选。
2、slideDown()、slideUp()、slideToggle()方法
把上面的方法更改成本次方法就变成如下效果。
slide
- slideDown : 下滑展开
- slideUp：上滑收回
- slideToggle : 滑动切换
$("div").slideDown();
slideDown() 的起点一定是 display:none 换句话说，只有display:none的元素，才能够调用slideDown()
动画机理：
一个display:none的元素，瞬间显示，瞬间高度变为0，然后jQuery自己捕捉原有的height设置为动画的终点。
等价于4条语句：
$("div").show(); //瞬间显示
var oldHeight = $("div").css("height"); //记忆住原有的高度
$("div").css("height",0); //瞬间变为0
$("div").animate({"height" : oldHeight},1000); //动画！终点是oldHeight
相反的，slideUp()的终点就是display:none;
同样的，slideDown、slideUp、slideToggle里面可以写动画时间、回调函数。
3、fadeIn()、fadeOut()、fadeTo()
- fadeIn() 淡入
- fadeOut() 淡出
- fadeTo() 淡到那个数
- fadeToggle() 淡出入切换
fadeIn() 的起点是display:none; 换句话说，只有display:none的元素，才能执行fadeIn()。 fadeOut() 起点display:block;
fadeTo 有四个参数，第一个参数是动画的时间，第二个参数是要变到的透明度，第四个参数是回调函数
$(selector).fadeTo(speed,opacity,easing,callback)
- "swing" - 在开头/结尾移动慢，在中间移动快 ; swing 摇摆；改变；冲力；秋千
- "linear" - 匀速移动
应用举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideIn</title>
<style>
div {
height: 200px;
width: 200px;
background-color: #5c7bd4;
border:2px solid red;
}
</style>
</head>
<body>
<div></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$("div").hide(1000,function(){
$(this).show(1000,function(){
$(this).slideUp(1000,function(){
$(this).slideDown(1000,function(){
//以下代码才是新学的
$(this).fadeOut(1000,function(){
$(this).fadeIn(1000,function(){
$(this).fadeTo(3000,0.5);
});
});
});
});
});
});
</script>
</html>
效果图：
到此我们可以使用新学的 jQuery 来改写原生写法的轮播图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 改写轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.carousel {
width: 560px;
height: 300px;
margin:100px auto;
position: relative;
}
.carousel ul {
list-style: none;
}
.carousel .imageslist ul li {
position: absolute;
top: 0;
left: 0;
display: none;
}
.carousel .imageslist ul li.cur {
display: block;
}
.leftbtn {
height: 55px;
width: 55px;
position: absolute;
top: 50%;
left: 20px;
margin-top: -27.5px;
background-image: url(images/slide-btnL.png);
z-index: 99;
cursor: pointer;
}
.rightbtn {
height: 55px;
width: 55px;
position: absolute;
top: 50%;
right: 20px;
margin-top: -27.5px;
background-image: url(images/slide-btnR.png);
z-index: 99;
cursor: pointer;
}
.carousel .circles {
width: 150px;
height: 16px;
position: absolute;
bottom: 10px;
right: 10px;
}
.carousel .circles ul li {
float: left;
height: 16px;
width: 16px;
border-radius: 50%;
background-color: orange;
cursor: pointer;
margin-right: 12px;
}
.carousel .circles ul li.first {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<div class="btns">
<div class="leftbtn" id="leftbtn"></div>
<div class="rightbtn" id="rightbtn"></div>
</div>
<div class="imageslist" id="imageslist">
<ul>
<li class='cur'><a href=""><img src="images/0.jpg" alt=""></a></li>
<li><a href=""><img src="images/1.jpg" alt=""></a></li>
<li><a href=""><img src="images/2.jpg" alt=""></a></li>
<li><a href=""><img src="images/3.jpg" alt=""></a></li>
<li><a href=""><img src="images/4.jpg" alt=""></a></li>
</ul>
</div>
<div class="circles">
<ul>
<li class="first"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
//jQuery变量，我们习惯以$开头
var $lis = $("#imageslist ul li");
var idx = 0;
//右按钮添加事件监听
$("#rightbtn").click(function(){
//节流
if($lis.eq(idx).is(":animated")){
return;
}
//老图淡出
$lis.eq(idx).fadeOut(1000);
//信号量改变
idx++;
if(idx > $lis.length - 1){
idx = 0;
}
//新图淡入
$lis.eq(idx).fadeIn(1000);
})
//左按钮添加事件监听
$("#leftbtn").click(function(){
//节流
if($lis.eq(idx).is(":animated")){
return;
}
//老图淡出
$lis.eq(idx).fadeOut(1000);
//信号量改变
idx--;
if(idx < 0){
idx = $lis.length - 1;
}
//新图淡入
$lis.eq(idx).fadeIn(1000);
})
</script>
</body>
</html>
4、stop() 和 flish() delay() is(":animated")
- stop()
stop() 停止当前的animate动画，但是不清除队列，立即执行后面的animate动画：
$("div").stop(); //等价于$(“div”).stop(false,false);
停止当前的animate动画，并且清除队列，盒子留在了此时的位置：
$("div").stop(true); //等价于$(“div”).stop(true,false);
瞬间完成当前的animate动画，并且清除队列：
$("div").stop(true,true);
瞬间完成当前的animate动画，但是不清楚队列，立即执行后面的动画：
$("div").stop(false,true);
公式：
stop(是否清除队列,是否瞬间完成当前动画)
如果没有写 true 或者 false，默认是 false
- finish()
finish() 瞬间完成所有动画队列！
$("div").finish();
stop可以用来防止动画的积累：
//连续打点语法，先清除所有的动画队列，然后执行新的动画
$("div").stop(true).animate({"left":100},1000);
- delay()
delay延迟，可以使用连续打点，必须放在运动语句之前。
$("div").delay(1000).animate({"left":500},1000);
$("div").delay(1000).slideUp();
$("div").delay(1000).hide(1); //必须写1，写1了就是运动
小窍门，让所有的img元素，都延迟不同的时间入场：
$("img").each(function(i){
//attr() 方法设置或返回被选元素的属性和值。
$(this).delay(i * 1000).fadeIn(1000);
});
- is(":animated")
is()方法表示身份探测，只返回true、false。
is表示“是不是”，而不是“是”is里面可以写筛选器：
判断点击的这个p是不是序号是奇数：
$(this).is("p:odd")
判断点击的这个p是不是序号小于3：
$(this).is("p:lt(3)")
还可以写
is(":animated")
判断这个元素是否在运动中。
is里面可以写筛选器：
判断点击的这个p是不是序号是奇数：
$(this).is("p:odd")
判断点击的这个p是不是序号小于3：
$(this).is("p:lt(3)")
还可以写
is(":animated")
判断这个元素是否在运动中。
stop 和 if return 进行节流时候的区别？
当动画接受命令，没设置节流，动画会进行积累。stop 用于暂停当前操作，立马进行下一步。立马相应用户的命令。if return 防止用户流氓操作。基本上 if return 用于轮播和导航 slidedown/slideup。其他的用stop。
