这是我参与8月更文挑战的第3天，活动详情查看：更文挑战
节点操作
this
this在js中表示触发事件的对象
在jquery中有三个是不需要加双引号的
$(this)
$(document)
$(window)
// 点击哪个p让哪个p背景色改变
$("p").click(function() {
$(this).css("background-color", "red");
})
parent()
parent(): 父节点 只会选中亲父亲不会选中爷爷或者曾爷爷
// 点击哪个P让它的父节点背景色改变
$("p").click(function() {
$(this).parent().css("background-color", "blue");
})
siblings()
siblings(): 兄弟节点。
// 点击哪个p让它的兄弟背景色改变
$("p").click(function() {
$(this).siblings().css("background-color", "red");
})
children()
// 点击哪个div让它的儿子颜色改变
$("div").click(function() {
$(this).children().css("background-color", "red");
})
不常用的节点操作
next(): 选中下一个兄弟节点
nextAll(): 后面所有的兄弟
prev(): 选中上一个兄弟
prevAll(): 前面所有的兄弟
parents(): 祖先节点，也可以传递参数指定父节点
find(): 会选中所有后代节点，可以传递参数指定节点
连续打点：
$("p").click(function() {
$(this).css("background-color", "red")
.siblings().css("background-color", "green")
.parent().css("background-color", "purple")
.siblings().css("background-color", "yellow");
})
序号的问题
eq(): 选中元素大队列的排名，与亲兄弟的排名没有直接关系。
eq(): 选中元素不同， 序号也是不相同的。
index()
index(): 表示亲兄弟的排名，无视亲兄弟的类型。只要是同一个父节点就是亲兄弟。
each()
each(): 表示“每一个”。 用于循环、遍历所匹配到的每一个元素。接受一个参数就是： 匿名函数
函数当中也有一个this, 表示遍历到的该对象。
each()的参数是一个函数， 函数中有一个参数i，表示遍历到该对象的序号。
animate()函数
概述
animate()：接受两个参数
第一个参数是：json
第二个参数是：完成动画的时间， 单位是ms， 省略不写。
animate是基于终点的动画
DOM结构：
<p></p>
<p></p>
<p></p>
<p></p>
代码:
// 让所有p元素运动到500的位置
$("p").animate({"left": 500}, 2000);
结果：
能够参与动画的属性
所有数值型的属性都可以参与动画
width
height
border
不能参与动画的属性
background-color
background-position
Css3的一些复杂属性（transform）
border-radius 可以参与动画的
举例：
// backgroundColor, backgroundPosition 是不能参与动画的
$("p").animate({
"width": 200,
"height": 200,
"border-radius": "50%",
"backgroundColor": "blue",
"left": 500
}, 2000);
动画的执行顺序
-
同一元素的不同animate，是按照绑定顺序执行的。
-
不同元素的animate的执行顺序 是同时执行
-
animate()和css()
css(): 瞬间完成
animate(): 需要花费时间。
举例：
// 让box运动完毕之后改变box的背景颜色
$("#box").animate({"left": 500}, 2000).css("background-color", "red");
回调函数
异步语句： 类似于animate这种需要花费时间的语句，如果后面还有其他js代码，这些代码会立即执行不会死等animate函数执行完毕之后再去执行。
异步语句都有一个回调函数，异步语句执行完毕之后要做的事要写在回调函数中。
比如： 做一个肉菜。 第一步要解冻肉。
把肉放在微波炉中进行解冻需要花费10min， 在这期间我们还可以洗菜，摘菜，烧水，等到微波炉叮一声之后（叮之后就是回调函数），将肉拿出，开始做肉菜，做肉菜就是要写在回调函数中。
animate()、show(1000)、hide(1000)、slideDown()、slideUp()、fadeIn()、fadeOut()这些都是异步语句
实际上animate({}, time，callBack)
第一个参数： json
time: 完成动画的事件
callBack: 回调函数
举例：
// 让box运动完毕之后再改变颜色
$("#box").animate({"left": 500}, 2000, function() {
$(this).css("background-color", "red");
})
比如fadeIn也可以书写回调函数
举例：
$("#box1").fadeIn(2000, function() {
$(this).css("background-color", "red");
})
delay()
delay(): 表示延迟，只能书写在动画的前面。参数就是要延迟的时间。
animate(),show(1000),hide(1000),slideDown(),slideUp(),fadeIn(),fadeOut()
举例：
// 点级btn让box延迟2s再执行动画
$("#btn").click(function() {
$("#box").delay(2000).animate({"left": 500}, 2000, function() {
$(this).css("background-color", "blue");
})
})
常用： 利用delay()可以控制元素的进场顺序
stop()
stop(): 表示让运动的元素立即停止动画。
接受两个参数，都是布尔值 默认值都是false
第一个参数：是否清空当前动画队列
第二个参数： 是否立即完成当前动画
stop(false,false) 等价方式 stop() 表示立即进入下一个动画，立即停止当前动画
stop(false, true) 表示立即进入下一个动画， 立即停止并完成当前动画
stop(true, true) 表示清空当前动画队列， 立即停止并完成当前动画
stop(true, false) 等价方式stop(true) 表示清空动画队列，立即停止当前动画
防止动画积累
一个元素身上可以存在多个动画事件， 尤其是在不经意间就会造成动画积累，此时我们就要防止（也叫防流氓）
比如：现在有一支队伍在阜阳，接到了命令，前往广州，在去广州的路上有又接到了命令，回阜阳。 此时这支队友有两个策略：
①：立即执行新的任务， 放弃原有任务
利用stop(true)可以实现
// 去广州
$("#btn2").click(function() {
$("#box").stop(true).animate({"left": 1000}, 2000);
})
// 回阜阳
$("#btn1").click(function() {
$("#box").stop(true).animate({"left": 50}, 2000);
})
②：只有当元素不运动的时候，才接受新的任务
is(): 表示元素是否具备某种状态
is(“:animated”) 表示当元素运动的时候返回true, 当元素不运动的时候返回false
呼吸轮播图
概述
轮播图：carousel
呼吸轮播变种布局重点：所有的图片摞一起。
jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。
左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()
小圆点的防流氓的策略：立即响应新事件。stop(true)
