熟练掌握以下内容，jQuery 你已经会使用一大半了，当然其中原理当我们慢慢深入自会心领神会，融会贯通。

一. 选择器

1. $("#div1")  =>  根据元素的id属性值来查找节点(id选择器)
2. $(".div1")  =>  根据元素的class属性值来查找节点(class选择器)
3. $(".div1, p")  =>  将每一个选择器匹配到的元素合并后一起返回(群组选择器)
4. $(".div1 ul li")  =>  查找祖先元素下匹配所有的后代元素(结构选择器)
5. $(".div1 > ul > li")  =>  查找给定的父元素下匹配所有的子元素(结构选择器)
6. $(".div1 ul li:eq(1)")  =>  查找一个给定索引值的元素(索引值是从0开始)
7. $('input[name="user"]')  =>  根据元素的属性来查找元素
8. $(".div1:visible")  =>  查找所有的可见元素
9. $("input:checked")  =>  选中的表单控件
10. $("select option:selected")  =>  匹配所有选中的option元素

二. 筛选

1. $("div").eq(1)  =>  获取第N个元素(从0开始)
2. $("li").first()  =>  获取第一个元素
3. $("li").last()  =>  获取最后一个元素
4. $(".div1").hasClass("selected")  =>  判断元素是否有指定的类   有返回true或false
5. $(".div1").children()  =>  返回所有的子元素，参数可以是一个选择器，会对子元素进行筛选
6. $(".div1").find("span")  =>  获取.div1节点下的所有的span元素(后代元素)
7. $(".div1").next()  =>  获取下一个兄弟节点
8. $(".div1").nextAll()  =>  获取下边所有的兄弟节点
9. $(".div1").prev()  =>  获取上一个兄弟节点
10. $(".div1").prevAll()  =>  获取上边所有的兄弟节点
11. $(".div1").siblings()  =>  获取.div1元素所有的兄弟节点
12. $(".div1").parent()  =>  查找.div1元素的父节点
13. $(".div1").parents("选择器")  =>  返回指定的祖先元素
14. $(".div1").find("p").end()  =>  将匹配的元素列表变为上一次的状态

三. CSS

1. $(".div1").css({...})  =>  设置元素css样式，同时设置多个
2. $(".div1").width()  =>  获取元素内容的宽度(不包含padding和border)，传参数表示设置
3. $(".div1").innerWidth()  =>  获取元素可视区的宽度(不包含border)，传参数表示设置
4. $(".div1").outerWidth()  =>  获取元素盒模型的宽度，传参数表示设置
5. $(".div1").height()
6. $(".div1").innerHeight()
7. $(".div1").outerHeight()
8. $(".div1").offset().left/top  =>  获取匹配元素在当前视口的相对偏移
9. $("html, body").scrollTop()  =>  获取页面卷过去的距离，传参表示设置

四. 事件

1. $(".div1").on("事件类型", 事件处理函数)  =>  表示元素的事件绑定，事件类型没有on
2. $(".div1").off("事件类型")  =>  表示元素事件的解绑
3. $(".div1").on("事件类型", "选择器", 事件处理函数)  =>  表示事件的委派，选择器所选择的元素是真正产生事件的元素

五. 属性操作

1. $(".div1").attr()  =>  属性操作，一个参数表示查找属性，两个参数表示设置属性，如果想同时设置多个属性，传json对象
2. $(".div1").removeAttr()  =>  表示移除一个属性，参数是属性名
3. $(".div1").addClass("selected")  =>  表示追加class属性
4. $(".div1").removeClass("selected")  =>  表示移除一个class属性
5. $(".div1").html()  =>  设置或获取节点的html文本，不传参数表示获取，传参表示设置
6. $("input").val()  =>  设置或获取表单元素的值，不传参数表示获取，传参表示设置
7. $("input[type='checkbox']").prop("checked")  =>  获取表单元素的选中状态，返回 true/false

六. 文档处理

1. $(".div1").append()  =>  节点的追加，参数节点作为子元素追加到目标节点后边，参数可以是字符串也可以是节点对象
2. $(".div1").after()  =>  在匹配的元素之后插入内容，作为兄弟节点插入，参数可以是字符串也可以是节点对象
3. $(".div1").before()  =>  在匹配的元素之前插入内容，作为兄弟节点插入，参数可以是字符串也可以是节点对象
4. $(".div1").remove()  =>  表示节点的移除
5. $(".div1").clone()  =>  表示节点的克隆/复制   包含后代元素元素   参数默认是false   如果参数是true表是事件也会被克隆

七. 核心

1. each 方法  =>  jQuery对象.each(function(){})  =>  表示节点的遍历
2. index 方法  =>  jQuery对象.index()  =>  获取当前节点在节点列表中的索引值
3. length 属性  =>  获取JQ对象中节点的个数
4. $(".div1").get(0)  =>  获取JQ对象中一个匹配的元素，返回原生js对象，等价于$(".div1")[0]

八. ajax

$.ajax({ 
 type : "POST", //提交方式 
 url : "",//路径 
 data : { 
  //提交的参数
 },//数据，这里使用的是Json格式进行传输 
 success : function(result) {//返回数据根据结果进行相应的处理 
  if ( result.success ) { 
    这里写成功的数据处理
  } else { 
    这里写错误的数据处理
  } 
 } 
}); 

post 方法

$.post( "",//路径 
    { 
        //提交的参数
    },//数据，这里使用的是Json格式进行传输 
    function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
        这里写成功的数据处理
      } else { 
        这里写错误的数据处理
      } 
     }
 ); 

get 方法

$.get( "",//路径 
    { 
        //提交的参数
    },//数据，这里使用的是Json格式进行传输 
    function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
        这里写成功的数据处理
      } else { 
        这里写错误的数据处理
      } 
     }
 ); 

九. 动画

1. $(".div1").show()  =>  显示元素
2. $(".div1").hide()  =>  隐藏元素
3. $(".div1").fadeIn()  =>  淡入动画
4. $(".div1").fadeout()  =>  淡出动画
5. $(".div1").slideUp()  =>  收起的动画
6. $(".div1").slideDown()  => 展开的动画
7. $(".div1").animate()  =>  自定义动画  参数：1. 样式的json对象   2. 动画持续时间    3. 回调函数
8. stop => jQuery 的stop方法是用来清空动画序列

十. 工具方法

1. $.trim(str)  =>  过滤字符串首位空格
2. $.isArray(arr)  =>  判断参数是否是数据
3. $.inArray("John", arr)  =>  查找第一个参数在数组中的位置(如果没有找到则返回 -1 )
4. $.proxy()  =>  $.proxy(方法名, 新的引用)(方法的参数列表)  改变方法中的this指向