1.1 前端工程师的工作
一个前端开发工程师的成长之路，一定要制作页面特效。而jQuery就是制作页面特效的时候大家都比较青睐的一种解决方案。
1.2 jQuery简介
jQuery是一个快速、简洁的JavaScript框架
写更少的代码，做更多的事情。
1.3 整体感知
首先我们使用jQuery的时候，必须要先引包（和我们之前自己封装的xxx.js一样）：
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
//自己的代码
</script>
2.1 size()方法和length属性
var $div = $("div").size()
var $div = $("div").length
两种方法都能够获取通过$()函数得到的页面元素的个数。
2.2 jQuery全面支持css2.1的选择器
$("div .box #span1").animate({"font-size":400},1000);
2.3 jQuery全面支持css3的选择器
$("div[id=div1]").css("background-color","red");
2.4 jQuery自己发明的伪类
jq中自创的筛选器有七种：
选择器:first 选中指定元素集合中的第一个元素
选择器:last 选中指定元素集合中的最后一个元素
选择器:eq(n) 选中指定元素集合中从0开始，第n个元素
选择器:lt(n) 选中指定元素集合中从0开始，第n个元素之前的所有元素
选择器:gt(n) 选中指定元素集合中从0开始，第n个元素之后的所有元素
选择器:odd 选中指定元素集合中从0开始，所有奇数序号的元素
选择器:even 选中指定元素集合中从0开始，所有偶数序号的元素
2.5 $()函数和jQuery函数等价
$("p:eq(2)").css("background-color","red");
等价于 jQuery("p:eq(2)").css("background-color","red");
2.6 $()函数得到的是jQuery对象
var $p = $("p")；//此处$p就是一个jq对象(集合)
a) jq对象可以通过【jq对象[n]】方式转换为js原生对象
var p = $("p")[0];
b) jq对象可以通过【.get(n)】方式转换为js原生对象
var p = $("p").get(0);
2.7 关于引号
$(window)
$(document)
$(this)
只有这三种情况的时候不需要写引号
3.1 基本写法
$("选择器").click(function(){})
$("div").click(function(){ $(this).css("background-color","red"); });3.2 事件名
jQuery中事件的名字，一律没有on。
单击： click()
双击： dblclick()
鼠标进入： mouseenter()
鼠标离开： mouseleave()
文本框得到焦点： focus()
失去焦点： blur()
//鼠标进入div颜色变红 $("div").mouseenter(function(){ $(this).css("background-color","red"); });允许链式声明
$("div").mouseenter(function(){$(this).css("background-color","red");}) .mouseleave(function(){$(this).css("background-color","orange");});3.3 jQuery事件监听的特点
jq中规定事件绑定不存在覆盖问题，事件的实际执行顺序会按照事件绑定的顺序逐个执行。
3.4 其他添加事件监听的方法
(1)通过on方法来为jq对象添加事件监听、通过off方法来为jq对象取消事件监听。
$("div").on("click",function(){ $(this).css("background-color","red"); }); $("div").off("click"); //去掉div的click事件监听(2)通过bind方法来给jq对象添加事件监听。
//bind方法的好处的就是能够给一个jq对象添加多个事件监听。事件名用空格隔开。 $("div").bind("mouseenter mouseleave",function(){ num++; //让h1里面显示这个num数字 $("h1").html(num); }); //bind还可以采用JSON形式的参数来给jq对象添加事件监听。 $("div").bind( { click : function(){$(this).css("background-color","red");}, mouseenter : function(){$(this).css("background-color","pink");} } );(3)通过one方法来给jq对象添加事件监听。'一次性的'，只能执行一次。
4.1 css()方法
4.2 show()和hide()方法
4.3 slideDown()和slideUp()方法
4.4 fadeIn()和fadeOut()方法
4.5 addClass()和removeClass()方法
4.6 attr()方法
4.7 html()方法
6.1 最简单的形态
6.2 不能够变化的属性
background-color、background-position不能参与动画！
6.3 动画顺序
同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行。
异步原则：不同元素如果存在多个animate命令，则他们同时执行。
6.4 回调函数
6.5 匀速运动
animate的完整写法，一共有4个参数：
$("#box1").animate({"left" : 1000, "top" : 1000} ,1000,"linear",function(){ $("#box2").animate(); } );6.6 stop()方法
6.7 动画积累的防止
animate()方法中的防止动画积累的策略就是如下的实现方式。
策略1：立即结束当前动画，执行新的命令：
$().stop(true).animate();
策略2：如果当前正在运动，那么不接收新的命令：
if($("div").is(":animated")){
return;
}
8.1 children()方法
$("#box").children().css("background-color","red");
将#box中所有的子元素背景色都变红
8.2 find()方法
作用：在某个节点中查找符合选择器要求的后代节点
实例：
$("div").click(function(){
//$(this)没有引号，表示触发监听的这个元素，这个元素是某一个div
$(this).find("li").css("background-color","red");
});
8.3 parent()方法
作用：表示查找当前节点的直属父节点
实例：$("p").click(function(){
$(this).parent().css("background-color","red");
});
//把点击的p标签的父级元素背景改成红色
8.4 parents()方法
作用：表示查找当前节点的所有祖先节点，直到html节点为止。
实例：$("p").click(function(){
$(this).parent().css("background-color","red");
});
8.5 siblings()方法
作用：访问当前节点的所有兄弟节点（除本身之外）
实例：
$("li").click(function(){
//常见用法，排他操作。
$(this).addClass('selected').siblings().removeClass("selected");
});
8.6 next()、prev()、nextAll()和prevAll()方法
next() 后一个亲兄弟
prev() 前一个亲兄弟
nextAll() 后所有亲兄弟
prevAll() 前所有亲兄弟
实例：
$(this).next().css("background-color","red");//其他格式一样，以此类推
8.7 节点关系综合查找
9.1 index()方法
index()方法用来获取当前元素在其兄弟节点中的排名，从0开始。
语法：$('selector').index()
例如：
$(".teshu").click(function(){
alert($(this).index());
});
//获得点击节点在其兄弟节点中的排名。
9.2 对应
语法：$('selector').eq(index)
例如：$('p').eq(2)//表示获取这个p集合中的第三个p
9.3 each()方法
作用：遍历每个节点，然后执行里面的回调函数。
注意：回调函数中如果存在$(this)，那么它指的是【遍历中当前这一次的这个节点】。
语法：$('selector').each(func)
实例：
$("div").each(function(){
$(this).children().eq(2).css("background-color","red");
});
10.1 内部插入append()、appendTo()、prepend()、prependTo()方法
作用：这四个方法都用来在某个节点内部插入新内容
语法：
A.append(B); //向【A节点内部现有内容之后】追加【B节点】
B.appendTo(A); //将【B节点】追加到【A节点内部现有内容之后】
A.prepend(B); //向【A节点内部现有内容之前】追加【B节点】
B.prependTo(A); //将【B节点】追加到【A节点内部的现有内容之前】
10.2 外部插入after()、before()、insertAfter()、insertBefore()
作用：相比于前面的四个方法的作用，这四个方法可以认为是给当前节点添加兄弟
语法：
A.after(B); //在【A节点之后】添加【同级节点B】
A.before(B); //在【A节点之前】添加【同级节点B】
A.insertAfter(B); //把【A节点】添加到【B节点之后】
A.insertBefore(B); //将【A节点】添加到【B节点之前】
10.3 改变节点位置
对于jq来说操作的实际上要么是节点，要么是节点组。那么有一条原则在操作节点的时候我们就必须遵守：
通过搜索获得的节点在页面中只能同一时刻出现在一个位置。
10.4 包裹wrap()
作用：给自己增加一个父类(开发中基本没啥用)
语法：A.warp(B)
10.5 删除节点empty()、remove()
作用：empty()表示删除指定节点中的内容，而remove()则表示移除自己
语法：
A.empty() 等价于 A.html(‘’);
A.remove();
10.6 克隆clone()
作用：相当于js中的cloneNode操作，即克隆的节点在页面中没有自己的位置。
需要通过append等操作才能够追加到页面当中。
语法：
A.append(B.clone)
