jQuery(爱前端)
一 jQuery 简介
官网：www.jquery.com
口号：写更少的代码，做更多的事情
jQuery 是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。
jQuery 是 DOM 编程领域的霸主，极大的简化了原生 JavaScript 的 DOM 编程
jQuery 中含有丰富的轮子，完美解决了选择元素难、样式难、动画难、批量操作难等各种兼容问题，
让工程师只需要思考业务，而不必思考细枝末节的兼容问题
jQuery有两条版本线：1.X、2.X
jQuery 2.X 和 1.X 的功能完全一致，API完全一致，但是 2.X 不兼容 IE6、7、8
下载的时候有两个选择：
二 jQuery 整体感知
2.1 选择器
$() 函数就是 jQuery 的核心函数，query 就是选择的意思，也就是说 jQuery的核心招牌功能就是选择元素：
$("#box ul li.haha span").css("background-color","red");
语法： $(“选择器”)
$ 可以用 jQuery来代替，$ 和jQuery 是同一个函数：
jQuery("#box ul li.haha span").css("background-color","red");
2.2 样式
得到样式（得到计算后的样式）：$(".box").css("width");
设置样式： 语法 $(“选择器”).css(JSON);
2.3 动画
jQuery 内部含有一个运动框架 animate 函数
2.4 批量添加监听、节点关系
三 jQuery
3.1 $() 函数
jQuery 对象不是原生 JS 对象
$("选择器") 选择出来的东西，是一个类数组对象，是 jQuery 自己的对象，这个 jQuery 对象后面不能跟着原生 JS 的语法：
$("#box").style.backgroundColor = "red";
因为 .style.backgroundColor 是原生JS语法，$() 原则的对象是 jQuery 对象，不能跟着原生
jQuery 对象，转为原生 JS 对象
3.2 引号问题
$('选择器')
注意引号不能丢！！在jQuery世界中，只有三个东西不能加引号，其他必须加引号：
3.3 支持的选择器
jQuery 支持所有的 css2.1 的选择器
也支持部分 css3 的选择器
3.4 筛选器
特别的，eq 可以单独提炼为方法，可以连续打点：
提炼出来的好处是，可以用变量
3.5 css 函数
css 函数可以读样式，可以设样式（所有的数值，不需要单位）
读样式，可以读取计算后样式，写一个参数，是不是驼峰，无所谓，但是必须加引号
特别的，还支持 += 写法： 
3.5 animate 函数
有没有缓冲呢，有，jQuery 需要插件来完成，我们日后说。
jQuery 默认不是匀速，是easeInOut
jQuery默认有一个处理机制，叫做动画排队。当一个元素接收到了两个 animate 命令之后，后面的animate会排队
先1000毫秒横着跑，然后1000毫秒竖着跑。动画总时长2000。
如果想让元素斜着跑，就是同时变化 left 和 top，就写在同一个 JSON 里面：
不同的元素，不排队，是同时的
3.6 事件监听
jQuery颠覆了我们的行文习惯：
事件名一律不写 on。特别的，鼠标进入改成了 mouseenter，鼠标离开改为了mouseleave。
四 序与迭代
4.1 eq() 方法
看结构： 两个并列盒子 .box1 和 .box2 中都有 5 个小盒子 div
想让 .box2 中的第二个盒子背景变绿
$('.box2>p:eq(1)').css('backgroundColor','green');
$('p').eq(6).css('backgroundColor','green');
$('.cur').eq(2).css('backgroundColor','green');
$('.box2>.cur').eq(0).css('backgroundColor','green');
注释不同选择器下对应的下标
$() 函数返回的是一组元素，每个方法比如 css 方法内部都有 for 循环迭代
4.2 index() 方法
返回这个元素在亲兄弟中的排名，无视选择器怎么选。
$(this).index() 是一个很常见的写法，表示触发这个事件的元素，在自己亲兄弟中的排名
点击上一排 div 中的 p, 下一排对应序号的 p 变色
强调一下，是 index() 方法，而不是属性！
4.3 each()
each() 表示遍历节点，也叫作迭代符合条件的节点
$('p') 调用 each() 方法，同样的设置，对比 i 和 $(this).index() 效果
4.4 size() 方法 和 length 属性
表示 jQuery 对象中元素的个数
五 动画相关
5.1 内置 show() , hide(), toggle()
特别的，如果show()、hide()、toggle()里面有数值，将变为动画
也可以加回调函数
5.2 slideDown(), slideUp, slideToggle()方法
以上分别是：下滑展开，上滑收回，滑动切换
slideDown() 的起点一定是 display:none 换句话说，只有 display:none 的元素，才能够调用 slideDown()
同样的，slideDown、slideUp、slideToggle 里面可以写动画时间、回调函数。
动画机理：
一个 display:none 的元素，瞬间显示，瞬间高度变为 0，然后 jQuery 自己捕捉原有的 height 设置为动画的终点
下拉菜单: li > a + div
mouseenter 事件应该添加在 li 上，而不是 a 上，添加在 a 上，则不能选择到下拉框中的内容
div 的位置应该贴着 li 元素，不能有缝隙，因为缝隙不属于 li 的范围，也会选择不到下拉框中的内容
如果想要有缝隙，下拉框再套一个盒子，用 padding 表示缝隙
$(this).find('div').slideDown(200);
5.3 fadeIn(), fadeOut, fadtTo(), fadeToggle() 方法
以上分别是：淡入， 淡出，淡到一定值，淡入淡出切换
动画机理：
一个 display:none 的元素，瞬间可见，然后瞬间变为 opacity:0，往自己的 opacity 上变。
如果没有设置 opacity，就往1变。
fadeTo() 有三个参数，第一个参数是动画的时间，第二个参数是要变到的透明度，第三个参数是回调函数
fadeTo的起点不一定是 display:none;
IE6、7、8 兼容，不用关心 filter 这个东西了，jQuery已经帮你写了兼容
jQuery 呼吸轮播
图片部分遮盖案例（有文字）：
遮盖元素设置 opacity: 0.5; 文字的透明度也会改变。处理： 文字写到其他元素中
5.4 stop()
语法 ：stop( 是否清除队列, 是否瞬间完成当前动画 )
如果没有写 true 或者 false，默认是 false
$("div").stop( true ).animate({"left":100},1000);
5.5 finish()
finish() 瞬间完成所有动画队列
$("div").finish();
手风琴案例：
ul > li*5 直接用 width 的变化来设置，动画时，最右侧可能会出现空白区域
用定位来做：每个元素鼠标 hover 时 left 到固定位置，其它元素也移动到固定位置
5.6 delay()
delay延迟，可以使用连续打点，必须放在运动语句之前
5.7 is(':animated')
is() 方法表示身份探测，返回 true, false
判断是否在运动中，可以防止动画的积累：
和之前的 stop()，不一样，动画正在进行，立即停止手上的动画，执行新的命令
六 节点关系
6.1 原生 JS 中的 nodeType 属性
任何的 HTML 元素，都有nodeType属性，值有1~11，老师为大家精简到了5个：
| 1 | 元素节点 |
| 3 | 文本节点 |
| 8 | 注释节点 |
| 9 | document 节点 |
| 10 | DTD |
6.2 原生 JS 中的节点关系 childNodes
有兼容性问题，chrome, ie9, ie10... 高级浏览器会把空格换行等看成文本节点
ie 6, 7, 8 不会
document.getElementById(“box”).childNodes.length; //高级浏览器 9，低级浏览器 4
怎么解决这个差异呢？
其它：
firstChild / lastChild
元素.parentNode
previousSibling / nextSibling
七 各种特效
