JQuery常用API

说明

“【】”里面放的是返回值

核心

1.【$】$([selector,[context]])：这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
	$("div > p");
2.【$】$(html,[ownerDocument])：创建HTML，并且设置标签的属性
	//创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
	$("<input>",{
		type: "text",
		val: "Test",
		focusin: function() {
			$(this).addClass("active");
		},
		focusout: function() {
			$(this).removeClass("active");
		}
	}).appendTo("form");
3.【$】$(function())：$(document).ready(function())的缩写
	$(function(){
		// 文档就绪
	});
4.【$】each(callback)：以每一个匹配的元素作为上下文来执行一个函数。
	$("img").each(function(i){
		this.src = "test" + i + ".jpg";/*this指代的是DOM对象，而非jQuery对象*/
	}); //迭代两个图像，并设置它们的 src 属性。	
5.【Number】size()：个数。
6.【Number】length： 个数。
7.【Element】get([index])：取得其中一个匹配的元素。index表示取得第几个匹配的元素。不传，则取全部。/**$(this).get(0)与$(this)[0]等价。*/
8.【Number】index([selector|element])：返回所传入[DOM或者jQuery]对象在调用者中的索引
	$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
	$('li').index($('#bar')); //1，传递一个jQuery对象

属性

一、属性

1.【String】attr(name|properties|key,value|function(index,attr/*2个参数可以不写*/))：设置或返回被选元素的属性值。
	$("img").attr("src"); //返回文档中所有图像的src属性值。
	$("img").attr({src:"test.jpg",alt:"Test Image"}); //为所有图像设置src和alt属性。
	$("img").attr("src","test.jpg"); //为所有图像设置src属性。
	$("img").attr("title",function(){
		return this.src;
	}); //把src属性的值设置为title属性的值。
2.【$】removeAttr(name)：从每一个匹配的元素中删除一个属性。
	$("img").removeAttr("src"); //将文档中图像的src属性删除
3.【$】prop(name|properties|key,value|function(index,attr))：获取在匹配的元素集中的第一个元素的属性值。
	$("input[type='checkbox']").prop("checked"); //选中复选框为true，没选中为false
	$("input[type='checkbox']").prop({disabled:true}); //禁用页面上的所有复选框。
	$("input[type='checkbox']").prop("disabled":true); //禁用页面上的所有复选框。
	$("input[type='checkbox']").prop("checked",function(i,val){
		return !val;
	}); //通过函数来设置所有页面上的复选框被选中。
4.【$】removeProp(name):
	/*注释*/：attr和prop区别：
	对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
	对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

二、CSS

1.【$】addClass(class|function(index, class))：为每个匹配的元素添加指定的类名。
	$("p").addClass("selected1 selected2..."); //为匹配的元素加上 'selected' 类。
	$("ul li:last").addClass(function(){
		return 'item-' + $(this).index();
	}); //给li加上不同的class。
2.【$】removeClass([class|function(index,class)])：从所有匹配的元素中删除全部或者指定的类。
	$("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类
	$("p").removeClass();//删除匹配元素的所有类
	$("p").removeClass(function(){
		return $(this).prev().attr('class');
	}); //删除最后一个元素上与前面重复的class
3.【$】toggleClass(class|function(index,class,switch/*布尔值*/)[,sw])：如果存在（不存在）就删除（添加）一个类。
	$("p").toggleClass("selected"); //为匹配的元素切换 'selected' 类
	var count = 0;
	$("p").click(function(){
		$(this).toggleClass("highlight",count++ % 3 == 0);
	}); //每点击三下加上一次 'highlight' 类
	$("div.foo").toggleClass(function(){
		if($(this).parent().is('.bar')){
			return 'happy';
		}else{
			return 'sad';
	}); //根据父元素来设置class属性

三、HTML代码/文本/值

1.【String】html([val|function(index,html)])：取得/**第一个*/匹配元素的html内容。
	$("p").html(); //返回p元素的内容。
	$("p").html("Hello<b>world</b>!"); //设置所有 p 元素的内容
	$("p").html(function(n){
		return "这个p元素的 index 是：" + n;
	}); //使用函数来设置所有匹配元素的内容。
2.【String】text([val|function(index,text)])：取得所有匹配元素的内容。
3.【String,Array】val([val|function(index,value)|arr])：获得设定匹配元素的当前值。
	$("input").val(); //获取文本框中的值
	$("input").val("hello world!"); //设定文本框的值
	$("input").val(["check2", "radio1"]);//多用与select标签和checkbox多选框

筛选

一、过滤

1.【$】eq(index/*整数,0开始*/|-index/*倒数,1开始*/)：获取第N个元素
	$("p").eq(1); //获取匹配的第二个元素
	$("p").eq(-2); //获取匹配的多数第二个元素
2.【$】first()：获取第一个元素
3.【$】last()：获取倒数第一个元素
4.【Boolean】hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true。
	if($("div").hasClass("protected")) alert('yes boy');
5.【$】filter(expr|obj|ele|function(index))：筛选出与指定表达式匹配的元素集合。用于/**缩小匹配的范围*/。用逗号分隔多个表达式
	$("p").filter(".selected"); //保留带有select类的元素
	$("p").filter(".selected, :first"); //保留第一个以及带有select类的元素
	$("p").filter(function(index) {
		return $("ol", this).length == 0;
	}); //保留子元素中不含有ol的元素。
6.【Boolean】is(expr|obj|ele|function(index))：如果其中至少有一个元素符合这个给定的表达式就返回true。
	$("input[type='checkbox']").parent().is("form"); //由于input元素的父元素是一个表单元素，所以返回true。
7.【$】map(callback)：将一组元素转换成其他数组（不论是否是元素数组）,函数来建立一个列表，
	$("p").append( $("input").map(function(){
		return $(this).val();
	}).get().join(", ") ); //把form中的每个input元素的值建立一个列表。
8.【$】has(expr|ele)：保留包含特定后代的元素，去掉那些不含有指定后代的元素。
	$("li").has("ul").css("backgroud-color","red"); //给含有ul的li加上背景色
9.【$】not(expr|ele|function(index))：删除与指定表达式匹配的元素
	$("p").not($("#selected")[0]); //从p元素中删除带有 select 的ID的元素

二、查找

1.【$】children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
	$("div").children(); //查找DIV中的每个子元素。
	$("div").children(".selected"); //在每个div中查找 .selected 的类。
2.【$】find(expr|obj|ele)：搜索所有与指定表达式匹配的元素。/**这个函数是找出正在处理的元素的后代元素的好方法。*/
	$("p").find("span"); //从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
3.【$】next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面/**同辈元素*/的元素集合。
	$("p").next(); //找到每个段落的后面紧邻的同辈元素。
	$("p").next(".selected"); //找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
4.【$】nextAll([expr])：查找当前元素之后所有的同辈元素。
	$("div:first").nextAll().addClass("after"); //给第一个div之后的所有元素加个类
5.【$】nextUntil([exp|ele][,fil])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
	$('#term-2').nextUntil('dt').css('background-color', 'red'); //给#term-2后面直到dt前的元素加上红色背景
6.【$】prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
7.【$】prevAll([expr])：查找当前元素之前所有的同辈元素
8.【$】prevUntil([exp|ele][,fil])：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
9.【$】parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合。
	$("p").parent(); //查找每个段落的父元素
	$("p").parent(".selected"); //查找段落的父元素中每个类名为selected的父元素。
10.【$】parents([expr])：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
	$("span").parents(); //找到每个span元素的所有祖先元素。
	$("span").parents("p"); //找到每个span的所有是p元素的祖先元素。
11.【$】parentsUntil([expr|element][,filter])：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
	$('li.item-a').parentsUntil('.level-1').css('background-color', 'red'); //查找item-a的祖先，但不包括level-1
12.【$】siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
	$("div").siblings(); //找到每个div的所有同辈元素。
	$("div").siblings(".selected"); //找到每个div的所有同辈元素中带有类名为selected的元素。

选择器

一、基本

1.[#id]：根据给定的ID匹配一个元素。
	$("#myDiv");
2.[element]：根据给定的元素名匹配所有元素
	$("div");
3.[.class]：根据给定的类匹配元素。
	$(".myClass");
4.[*]：匹配所有元素
	$("*"); //找到每一个元素
5.selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。
	$("div,span,p.myClass");

二、层级

1.【Array<Element(s)>】" "：在给定的/**祖先元素*/下匹配所有的后代元素
	$("form input"); //找到表单中所有的 input 元素
2.【Array<Element(s)>】">"：在给定的/**父元素*/下匹配所有的子元素
	$("form > input"); //匹配表单中所有的子级input元素。
3.【Array<Element(s)>】"+"：匹配所有紧接在 prev 元素后的 next 元素
	$("label + input"); //匹配所有跟在 label 后面的 input 元素
4.【Array<Element(s)>】"~"：一个选择器，并且它作为第一个选择器的/**同辈*/
	$("form ~ input"); //找到所有与表单同辈的 input 元素

三、属性

1.【$】[:first]：获取匹配的第一个元素
	$('li:first'); 
2.【$】[:last]：获取匹配的最后一个元素
	$('li:last'); 
3.【Array<Element(s)>】[:not(selector)]：去除所有与给定选择器匹配的元素
	$("input:not(:checked)"); //查找所有未选中的 input 元素

/*index，索引都是从0开始的*/
4.【Array<Element(s)>】[:even]：匹配所有索引值为偶数的元素，从 0 开始计数
	$("tr:even"); //查找表格的1、3、5...行（即索引值0、2、4...）
5.【Array<Element(s)>】[:odd]：匹配所有索引值为奇数的元素，从 0 开始计数
	$("tr:odd"); //查找表格的2、4、6行（即索引值1、3、5...）
6.【Array<Element(s)>】[:eq(index)]：匹配一个给定索引值的元素
	$("tr:eq(1)"); //查找第二行
7.【Array<Element(s)>】[:gt(index)]：匹配所有大于给定索引值的元素
	$("tr:gt(0)"); //查找第二第三行，即索引值是1和2，也就是比0大
8.【Array<Element(s)>】[:lt(index)]：匹配所有小于给定索引值的元素
	$("tr:lt(0)"); //查找第一第二行，即索引值是0和1，也就是比2小

/*奇葩的，一般用不到的*/
9.【Array<Element(s)>】[:header]：匹配如 h1, h2, h3之类的标题元素
	$(":header").css("background","#EEE"); //给页面内所有标题加上背景色
10.【Array<Element(s)>】[:animated]：匹配所有正在执行动画效果的元素
	$().click(function(){
		$("div:not(:animated)").animate({left:"+20",top:"-20"},1000/*'slow,fast,normal'*/);
	}); //只有对不在执行动画效果的元素执行一个动画特效
11.【Array<Element(s)>】[:hidden]：匹配所有不可见元素，或者type为hidden的元素
	$("tr:hidden");
	$("input:hidden");
12.【Array<Element(s)>】[:visible]：匹配所有可见元素
	$("tr:visible");

/*属性[Attribute]相关的*/
13.【Array<Element(s)>】[attribute]：匹配包含给定属性的元素。
	$("div[id]"); //查找所有含有 id 属性的 div 元素
14.【Array<Element(s)>】[attribute=value]：匹配给定的属性是某个特定值的元素
	$("input[name='newsletter']").attr("checked", true); //查找所有 name 属性是 newsletter 的 input 元素
15.【Array<Element(s)>】[attribute!=value]：等价于[:not([attr=value])]
16.【Array<Element(s)>】[attribute^=value]：匹配给定的属性是以某些值开始的元素
	$("input[name^='news']"); //查找所有 name 以 'news' 开始的 input 元素
17.【Array<Element(s)>】[attribute$=value]：匹配给定的属性是以某些值结尾的元素
18.【Array<Element(s)>】[attribute*=value]：匹配给定的属性是以包含某些值的元素
	$("input[name*='man']"); //查找所有 name 包含 'man' 的 input 元素

四、内容

1.[:contains(text)]：匹配包含给定/**文本*/的元素
	$("div:contains('John')"); //查找所有包含 "John" 的 div 元素
2.【Array<Element(s)>】[:empty]：匹配所有/**不包含子元素*/或者文本的/**空元素*/
3.【Array<Element(s)>】[:has(selector)]：匹配含有选择器所匹配的元素的元素
	$("div:has(p)").addClass("test"); //给所有包含 p 元素的 div 元素添加一个 text 类
4.【Array<Element(s)>】[:parent]：匹配含有子元素或者文本的元素
	$("td:parent"); //查找所有含有子元素或者文本的 td 元素

五、表单

1.【Array<Element(s)>】[:input]：匹配所有 input, textarea, select 和 button 元素

六、子元素

1.【Array<Element(s)>】[:first-child]：':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
	$("ul li:first-child"); //在每个 ul 中查找第一个 li
2.【Array<Element(s)>】[:last-child]：':last' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
	$("ul li:last-child"); //在每个 ul 中查找最后一个 li
3.【Array<Element(s)>】[:only-child]：':last' 如果某个元素是父元素中唯一的子元素，那将会被匹配
	$("ul li:only-child"); //在 ul 中查找是唯一子元素的 li

CSS

1.【String】css(name|pro|[,val|function(index,value)])：访问匹配元素的样式属性。
	$("p").css("color"); //取得第一个段落的color样式属性的值。
	$("p").css({ color: "#ff0011", background: "blue" }); //将所有段落的字体颜色设为红色并且背景为蓝色。
	$("p").css("color","red"); //将所有段落字体设为红色
	$("div").click(function() {
		$(this).css({
			width: function(index, value) {
				return parseFloat(value) * 1.2;
		    }, 
			height: function(index, value) {
			    return parseFloat(value) * 1.2;
		    }
		});
	}); //逐渐增加div的大小

文档处理

一、插入

/*内部*/
1.【$】append(content|function(index,html))：向每个匹配的元素/**内部*/追加内容。
	$("p").append("<b>Hello</b>");
2.【$】appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中。
	$("p").appendTo("div"); //把所有段落追加到ID值为foo的元素中。
/*外部*/
3.【$】after(content|function())：在每个匹配的元素之后插入内容。
	$("p").after("<b>Hello</b>");
	$("p").after($("#order")[0]);
4.【$】before(content|function())：在每个匹配的元素之前插入内容。
	$("p").before("<b>Hello</b>");
	$("p").before($("#order")[0]);
5.【$】insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
	$("p").insertAfter("#foo");//把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
6.【$】insertBefore(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

二、删除

1.【$】empty()：删除匹配的元素集合中所有的子节点。/**内部全部删除*/
2.【$】remove([expr])：从DOM中删除所有匹配的元素。
	$("p").remove(); //从DOM中把所有段落删除
	$("p").remove(".hello"); //从DOM中把带有hello类的段落删除
3.【$】detach([expr])：

事件

一、绑定事件

1.【$】ready(function())：
	$(document).ready(function(){
		// 在这里写你的代码...
	}); //在DOM加载完成时运行的代码，可以这样写：
	$(function($){
		// 你可以在这里继续使用$作为别名...
	}); //使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
2.on(events,[selector],[data],function())：绑定事件
3.off(events,[selector],function())：解绑事件[一个或多个事件]
	$("p").off()：//移除所有
	$().off("click","**")
4.bind(type,[data],function(eventObject))：为每个匹配元素的特定事件绑定事件处理函数。
	$('#foo').bind('mouseenter mouseleave', function() {
		$(this).toggleClass('entered');
	}); //同时绑定多个事件类型
	$("#button").bind({
		click:function(){$("p").slideToggle();},
		mouseover:function(){$("body").css("backgroud","red");},
		mouseout:function(){$("body").css("backgroud","#FFFFF");}
	}); //同时绑定多个事件类型/处理程序
	function handler(event) {
		alert(event.data.foo);
	}
	$("p").bind("click", {foo: "bar"}, handler); //你可以在事件处理之前传递一些附加的数据。
	$("form").bind("submit", function() { return false; }); //通过返回false来取消默认的行为并阻止事件起泡。
	$("form").bind("submit", function(event){
		event.preventDefault();
	}); //通过使用 preventDefault() 方法只取消默认的行为。
	$("form").bind("submit", function(event){
		event.stopPropagation();
	}); //通过使用 stopPropagation() 方法只阻止一个事件起泡。
5.【$】one(type,[data],function())：一次性事件处理函数
	$("p").one("click",function(){
		alert($(this).text());
	}); //当所有段落被第一次点击的时候，显示所有其文本。
6.【$】trigger(type,[data])：在每一个匹配的元素上触发某类事件。
	... ... /**看不懂*/
7.【$】unbind(type,[data|function()])：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
	$("p").unbind();
	$("p").unbind( "click" );

二、基本事件

1.【$】click([[data],function()])：触发事件
	$("p").click();
	$("p").click(function(){
		$(this).hide();
	}); //将页面内所有段落点击后隐藏。
2.【$】dblclick、blur、foucs......

效果操作

1.【$】show([speed,[easing],[function()]])：显示隐藏的匹配元素。
	$("p").show();
	$("p").show("slow"/*fast,normal,1000*/); //缓慢隐藏
	$().show("fast"/*fast,normal,1000*/,function(){
		$(this).text("Animation Done!");
	}); //快速隐藏
2.【$】hide([speed,[easing],[function()]])：隐藏显示的匹配元素。
3.【$】hide([speed,[easing],[function()]])：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

AJAX

1.【XMLHttpRequest】$.ajax(url,[settings])：异步加载AJAX
	$.ajax({
		url:"发送请求的地址。",
		type:"get/post",
		data:"请求参数",
		dataType:"xml/html/script/json/jsonp/text",
		async:"是否异步[默认true]",
		timeout:"设置请求超时时间（毫秒）。此设置将覆盖全局设置。",
		success(data,textStatus,jqXHR):"成功回调函数",
		error:"失败回调函数",
	});
2.【XMLHttpRequest】$.post(url, [data], [callback], [type])：post异步
	$.post("<%= request.getContextPath() %>/setting/goDetail.do", { "model.id": "BT2017100200002" },function(data){
		alert(data); // John
	},"json");

工具类$.*

1.【Object】$.each(object,[callback])：通用例遍方法，可用于例遍对象和数组。
	$.each([1,2,3],function(index,object){
		
	});
	$.each({username:"John",password:"123456"},function(index,object){
		
	});
2.【Array】$.map(arr|obj,function(n))：将一个数组中的元素转换到另一个数组中。
	$.map([0,1,2],function(){
		 return n + 4;	/**result [4,5,6]*/
	}); //将原数组中每个元素加 4 转换为一个新数组。
	$.map( [0,1,2], function(n){	
		return [ n, n + 1 ];	/**result [0, 1, 1, 2, 2, 3]*/
	}); //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。
3.【Number】$.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。
	alert($('li').toArray()); //得到所有li的元素数组
4.【String】$.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。
	var obj = jQuery.parseJSON('{"name":"John"}');
5.【String】$.type(obj)：检测obj的数据类型。
	$.type(true) === "boolean"
	$.type(3) === "number"
	$.type("test") === "string"
	$.type(function(){}) === "function"
	$.type([]) === "array"
	$.type(new Date()) === "date"
	$.type(/test/) === "regexp"
6.【String】$.trim(str)：//去掉字符串前后的空格。