jQuery 常用方法总结

熟练掌握以下内容，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指向

更多详细知识介绍请访问我的个人主页