jQuery参考手册 | 52的小窝

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery经过十多年的发展，从最原始的1.0版本，到了3.x版本，各个版本之间对浏览器的兼容存在差异。

版本	IE	Chrome	Firefox	Safari	Opera	IOS	Android
jQuery1.x	6+	支持	支持	5.1+	12.1+	6.1+	2.3.4.0+
jQuery2.x	9+	支持	支持	5.1+	12.1+	6.1+	2.3.4.0+
jQuery3.x	9+	(Current – 1) and Current	(Current – 1) and Current, ESR	(Current – 1) and Current	Current	7+	4.0+

起步

jquery是开源并被广泛使用的js库，你有很多种方式使用Jquery

下载与cdn：jquery CDN by jsDelivr – A CDN for npm and GitHub

此外，你可以使用npm快速下载

npm i jquery

或者快速cdn

<script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>

jquery语法与javascript相似。它是操作dom元素的js框架，所以：

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

基础实例：

在html中引入jquery，并使用

<h2 id="hello"></h2>

<script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script>

$("#hello").text("Hello，Jquery！");

</script>

入口函数

jquery入口函数, 相当于 window.onload, 即

window.onload = function(){
   //页面加载时执行的函数
}

jq入口函数, 功能和 window.onload 相同, 同样是等待页面加载完毕后,执行的事件, 语法如下:

$(function () {
    //函数内容
});

“jQuery(document).ready(…)”定义文档就绪函数（也就是入口函数），上述代码用了$()简化。

值得注意的是:

jquery 入口函数可以使用多次, 并且每次均生效
window.onload 只能一次, 多次会覆盖前面的内容, 只有最后一次生效
不要给body绑定onload事件，否则可能失效
此函数在dom下载完毕就会执行，而不是页面全部解析完毕（完整页面比如会等待图片加载）

Js对象与Jq对象

Jquery对象与JavaScript对象是不一样的，比如, 分别使用 Jquery 和 Js 获取 divs , 都可以得到一个数组对象

<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
    //使用Js获取divs
    var divs = document.getElementByTagName("div");
    //使用Jquery获取
    var $divs = $("div");
     
    alert(divs.length);
    alert($divs.length);
</script>

Jquery虽然对Js进行了简化，但方法名不同，且操作时的对象也不同，例如上面获取到的对象分别是

object HTMLCollection
object Object

熟练的转换jQuery对象与Js对象是重要的

把Js转为Jquery对象

var js = document.getElementById("div1");  
var $js = $(js);  //把 js 对象转换为 jquery 对象

把Jquery对象转Js对象，有2种

var $jq = $("#div2"); 
var jq = $jq.get(索引); //转换为Js对象方式1
var jq2 = $jq[索引];  //转换为Js对象方式2

操作html元素

jquery可以通过一系列方法控制html元素

html() 设置,获取元素html, –> 相当于innerHTML
text() 设置,获取元素text –>相当于innerText
append() 追加内容
…

html方法

获取元素中的html值，一般指闭合标签中的html内容

<div id="div1"><span>1111111</span></div>
<script>
   var text = $("#div1").html();
   alert(text);
</script>

给html元素设置值，只需要设置指定的值即可

<div id="div1"></div>
<script>
   var text = $("#div1").html("abc<br>abc");
</script>

text方法

例如，获取元素的text对象

<div id="div1">111111111</div>
<script>
   var text = $("#div1").text();
   alert(text);  //弹出获取后的值
</script>

设置text，以回调函数形式（上述html方法也支持，以及往后的方法大多都支持）

<div id="div1">111111111</div>
<script>
   var text = $("#div1").text();
   $("#div1").text(function(){
       let ab = 13;
       let cd = "abc";
       return ab+cd;
   });
</script>

append方法

此方法可以向选定的元素中追加html

$("p").append("追加html内容<span>22</span>1111");

注意：此方法不是万能的，它实际相当于，首先获取html内容，然后添加内容，并把该内容重新添加到该元素中。这也意味着，它实际是修改innerhtml。如果是非闭合标签，则无法使用此方法。

prepend方法

此方法在选中的元素中，往前插入html。刚好与append相反，它的语法是相似的

$("p").prepend("在开头追加文本");

before与after方法

对于append以及prepend一次只能添加一个内容，而before和after可以一次添加多个内容

function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

remove方法

删除选中的元素

$("#div1").remove();

上述的代码将会删除id为div1的元素，该元素本身会被删除掉

此方法还可以接收一个参数，用于详细指定元素，例如以下方法将会删除被italic修饰的p元素

$("p").remove(".italic");

empty方法

此方法用于清空某个元素中的所有内容。通常指的是html

$("#div1").empty();

以上方法，会将id为div1的innerhtml全部清空，但该div并没有被删除，元素本身仍被保留。

操作元素属性

操作html元素的属性，以下介绍几个方法

.val()，此方法用于快速获取/设置value属性的值
.attr()，此方法从jq1.0开始一直存在，作用是读/写DOM的attribute值；(文档可见）
.prop()，此方法jq1.6引入，作用是读/写DOM的property值；（文档不可见，但能触发效果）
.data()，此方法jq2.3引入，作用是自定义属性值（文档不可见）读取/存储到元素上。

val方法

操作value属性，不仅限于表单元素

<input id="uname" value="123"/>
<script>
   var uname = $("#uname").val();  // 获取值
   alert(uname);

   $("#uname").val("abc");  // 设置值
</script>

attr方法

语法如下：

返回属性的值：$(selector).attr(attribute)

设置属性和值：$(selector).attr(attribute,value)

使用函数设置属性和值：$(selector).attr(attribute,function(index,currentvalue))

设置多个属性和值：$(selector).attr({attribute:value, attribute:value,…})

$("button").click(function(){
    $("img").attr("width","500");
});

prop方法

prop方法是一个重要的方法，它表示dom元素的property，与前者的attr（attribute）差别很大。attr表示dom所属的node文档属性（可见的html），而property表示dom对象属性（原生js）。

例如以下为使用attr和prop同时操作radio

<input type="radio" id="radio">
<input type="radio" id="radio2">
<script>
    let attr = $("#radio").attr("checked");
    console.log(attr);                // undefined
    $("#radio").attr("checked","checked");

    let prop = $("#radio2").prop("checked");
    console.log(prop);                 // false 
    $("#radio2").prop("checked",true);

</script>

prop在操作时，值是对象，而attr操作的是字符串类型的值。

操作input时推荐使用prop，相对更简单，例子：使用jquery实现全选与取消

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>jquery全选实例</title>

	<script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>

	<div>全选与取消<input id="checkall" type="checkbox"/></div>
	<div>项目列表：
		<input type="checkbox" name="user"/>
		<input type="checkbox" name="user"/>
		<input type="checkbox" name="user"/>
	</div>
	
	<script>
		$("#checkall").click(function(){
			$(":checkbox[name=user]").prop("checked",this.checked);
		});
	</script>
</body></html>

此外，对于href操作时，attr将取得在文档中书写的字符串描述，而prop将取得绝对地址，例如以下代码

<a id="a" href="./abc.html">这是一个链接</a>
<script>
    let attr = $("#a").attr("href");
    console.log(attr);          //   ./abc.html

    let prop = $("#a").prop("href");
    console.log(prop);           //  绝对地址
</script>

注:在IE9之前版本中，如果property没有在DOM元素被移除之前删除，使用.prop()方法设置DOM元素property（简单类型除外：number、string、boolean）的值会导致内存泄露。为了安全的设置DOM对象的值，避免内存泄露，可以使用.data()方法。

data方法

在html5中DOM标签可以添加一些data-xxx的属性，可以把data()看作是存取data-xxx这样的DOM附加信息的方法。data()存取的内容可以是字符串、数组和对象。从jQuery1.4.3起，html5的data-xxx属性会自动被添加到jq的data对象里，比如：

<p id="p"  data-sno="123">abc</p>
<script>

    $("#p").data("sno","data");  // 使用data修改data-sno

    console.log($("#p").data("sno")); // 使用data获取data-sno ，显示：data

    $("#p").attr("data-sno","2222");  // 使用attr设置data-sno

    console.log($("#p").data("sno"));  // 使用data再次获取data-sno，显示：data

    console.log($("#p").attr("data-sno"));  // 使用attr再次获取data-sno，显示：2222
</script>

我们使用浏览器开发者工具审查元素，发现使用data设置的元素值是不可以被看到的。在首次获取时它却能够获取data-xxx的属性值，而经过data方法修改后它的值就与attr方法不同了。如果你希望属性在html中是可见的，就使用attr，否则使用data（使用prop时也是隐藏的）。

值得注意的是：在jquery1.8之前，直接获取data-xxx=”1.200″，取得的不是string，而是num类型。

元素宽高

jquery有一系列方法获取/设置元素宽高

width() ·方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

如果设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

语法：

返回宽度：$(selector).width()

设置宽度：$(selector).width(value)

使用函数设置宽度：$(selector).width(function(index,currentwidth))

参数	描述
value	当设置宽度时是必需的。规定元素的宽度，单位为 px、em、pt 等。默认单位是 px。
function(index,currentwidth)	可选。规定返回被选元素新宽度的函数。index – 返回集合中元素的 index 位置。currentwidth – 返回被选元素的当前宽度。

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>

上述方法比$().css(“width”)等方法通过css获取的方式更好，通过css获取时得到的是字符串（附带单位，比如”10px”），而jquery方式则默认是number类型（单位px）

在设置元素时，则是字符串格式（如果是number则默认px），可以直接指定任意单位

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  	alert($("p").height());
    $("p").height("50%");
  });
  $(".btn2").click(function(){
    $("p").height("20em");
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">把高度设置为 50%</button>
<button class="btn2">把高度设置为 20 em</button>
</body>

操作样式

操作有多种方式，比如直接编写css规则，或添加对应的class控制样式

css方法

css方法用于直接获取/设置css样式

如需返回指定的 CSS 属性的值，请使用如下语法：css(“propertyname“);

如需设置指定的 CSS 属性，请使用如下语法：css(“propertyname“,”value“);

如需设置多个 CSS 属性，请使用如下语法：css({“propertyname“:”value“,”propertyname“:”value“,…});

$(".btn1").click(function(){
  $("p").css("color","red");
});

addClass方法

此方法用于向被选元素添加一个或多个类，

添加一个类，指定类的名称

$("button").click(function(){
  $("h1,h2,p").addClass("blue");  // 添加blue类
  $("div").addClass("important");  // 添加important类
});

一次添加多个类，使用空格隔开

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

removeClass方法

删除一个类，指定类名

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

删除多个类，中间使用空格分开

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue important");  // blue类、important
  });
});

toggleClass方法

toggle表示开关，此方法智能判断元素是否存在指定的类名，如果存在则删除该类，不存在则增加

此方法是常用方法，比如设置下拉菜单的开关等

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

选择器详解

熟练jquery的选择器是使用jquery的基本功。

基本选择器

基本选择器，包含了以下选择器

语法	描述
$(“*”)	通配符选择器（所有元素）
$(“#ID”)	ID选择器
$(“.Class”)	类选择器
$(“TagName”)	标签选择器
$(“.demo.demo”)	与选择器 (可多个，后续同)
$(“.demo,.demo)	或选择器
$(“.demo .demo”)	后代选择器（所有后代，可多个）
$(“.demo>.demo”)	子选择器（直接子）
$(“.demo+.demo”)	相邻兄弟选择器（后一个）
$(“.demo~.demo”)	兄弟选择器（后续所有）

属性选择器

语法	描述
$(“[href]”)	属性包含选择器
$(“[href=’#’]”)	属性值相等选择器
$(“[href!=’#’]”)	属性值不相等选择器
$(“[href^=’#’]”)	属性值开头选择器
$(“[href$=’#’]”)	属性值结尾选择器
$(“[href*=’#’]”)	属性值包含选择器
$(“[href=’#’][href=’#’] “)	属性与选择器(可多个，后续同)
$(“[href=’#’],[href=’#’] “)	属性值或选择器
$(“[href=’#’] [href=’#’] “)	属性后代选择器
$(“[href=’#’]>[href=’#’] “)	属性子选择器
$(“[href=’#’]+[href=’#’] “)	属性相邻兄弟选择器
$(“[href=’#’]~[href=’#’] “)	属性兄弟选择器

基本选择器，与属性选择器之间，仍然可以使用组合语法，例如以下实例：

<p class="p" name='1' href='2'>11</p>
<p class="p" name='33'><span name='2'>33</span></p>
<script>
    let and = $(".p[name='1']").text();
    console.log(and);              //  11

    let son = $(".p>[name='2']").text();
    console.log(son);              //   33
</script>

伪类选择器

语法	描述
$(“p:first”)	选择第一个元素
$(“p:last”)	选择最后一个元素
$(“tr:even”)	选择偶数元素
$(“tr:odd”)	选择奇数元素
$(“ul li:eq(3)”)	选择第n个元素
$(“input:not(selector)”)	排除指定选择器的选择器
$(“ul li:gt(3)”)	列出 index 大于 n 的元素
$(“ul li:lt(3)”)	列出 index 小于 n 的元素
$(“:header”)	所有标题元素 <h1> – <h6>
:animated	匹配所有正在执行动画效果的元素
$(“:contains(’52dixiaowo’)”)	包含指定字符串的所有元素
$(“:empty”)	无子（元素）节点的所有元素
$(“p:hidden”)	所有隐藏的元素
$(“table:visible”)	所有可见的元素
$(“div:parent”)	匹配含有子元素或者文本的元素
$(“p:has(selector)”)	匹配含有选择器所匹配的元素

表单选择器

表单选择器，属于伪类选择器，默认全部是input标签

语法	描述
$(“:input”)	所有 <input> 元素
$(“:text”)	所有 type=”text” 的 <input> 元素
$(“:password”)	所有 type=”password” 的 <input> 元素
$(“:radio”)	所有 type=”radio” 的 <input> 元素
$(“:checkbox”)	所有 type=”checkbox” 的 <input> 元素
$(“:submit”)	所有 type=”submit” 的 <input> 元素
$(“:reset”)	所有 type=”reset” 的 <input> 元素
$(“:button”)	所有 type=”button” 的 <input> 元素
$(“:image”)	所有 type=”image” 的 <input> 元素
$(“:file”)	所有 type=”file” 的 <input> 元素
$(“:enabled”)	所有激活的 input 元素
$(“:disabled”)	所有禁用的 input 元素
$(“:selected”)	所有被选取的 input 元素
$(“:checked”)	所有被选中的 input 元素

效果参考

jquery提供了一些关于隐藏、显示、切换，滑动，淡入淡出，以及动画效果！

显示与隐藏

包含了显示、隐藏方法（display:none）

hide与show方法

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

$("button").click(function(){
  $("p").hide(1000);
});

toggle方法

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

fadeIn方法

jQuery fadeIn() 用于淡入已隐藏（display:none）的元素。

语法：

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

fadeOut方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>

<body>

<p>演示带有不同参数的 fadeTo() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

滑动

通过 jQuery，您可以在元素上创建滑动效果。

slideDown方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

动画

jQuery animate() 方法用于创建自定义动画。

基本语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 
<body>

<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

使用预定义的值

您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 
<body>

<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>
 
<body>

<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

常用动画示例

使用jquery可以做出很多常用的动画，比如：页面的平滑滚动

$("html,body").animate({"scrollTop":top})

选择器中使用html,body是为了兼容chrome和firefox，而scrollTop则是页面滚动条，其中top是一个值，例如需要“返回顶部”这样一个点击小功能，则它的代码是：

<html style="height: 2000px;">
    <body>
        <div style="position: fixed; right: 20px; bottom: 20px; display: block;">
            <a onclick="$('html,body').animate({'scrollTop':0},1000)" title="返回顶部" id="back-to-top" style="display: block; position: fixed; bottom: 10px; background-color: rgb(95, 99, 104); box-sizing: border-box; cursor: pointer; text-align: center; border: 0px; right: 20px;">🔺</a>
        </div>
    </body>
</html>

停止

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>

<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>

回调函数

Callback 函数在当前动画 100% 完成之后执行。

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：$(“p”).hide(“slow”)

speed 或 duration 参数可以设置许多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。

$("button").click(function(){
$("p").hide(1000);
});

由于 JavaScript 语句（指令）是逐一执行的 – 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

当动画 100% 完成后，即调用 Callback 函数。

语法：

$(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。

错误示例，没有callback

$("p").hide(1000);
alert("The paragraph is now hidden");

正确示例，使用callback

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

调用链

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

例子 1

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。”p1″ 元素首先会变为红色，然后向上滑动，然后向下滑动：

<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

如果需要，我们也可以添加多个方法调用。

提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

遍历函数

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

这些函数包括了用于筛选、查找和串联元素的方法。

遍历祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

parent方法

parent() 方法返回被选元素的直接父元素。（不包括自身）

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

</body>

parents方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：（不包括自身）

<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

<!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 -->

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：（开区间，不包含span和div）

$(document).ready(function(){
  $("span").parentsUntil("div");
});

遍历后代

后代是子、孙、曾孙等等。

通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

children方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：

<head>
<style>
.descendants *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (子)
    <span>span (孙)</span>     
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p> 
</div>

</body>

实际上，$(“div”).children()相当于 $(“div>*)，我们可以看到：遍历函数是选择器的另一种方式。

您也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

其中$(“div”).children(“p.1”)实际相当于$(“div>p.1”)

find方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

<head>
<style>
.descendants *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (子)
    <span>span (孙)</span>     
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p> 
</div>

</body>

上面的例子相当于选择器：$(“div span”)

下面的例子返回 <div> 的所有后代：

$(document).ready(function(){
  $("div").find("*");
});

其中：$(“div”).find(“*”)相当于$(“div *”)

遍历同胞

同胞拥有相同的父元素。

通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

siblings 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

<head>
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>

您也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

next方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

<head>
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>

此例子中的$(“h2”).next()可用$(“h2+*”)替代

nextAll方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

下面的例子返回 <h2> 的所有跟随的同胞元素：

<head>
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>

其中$(“h2”).nextAll()等价于$(“h2~*”)

nextUntil方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

<head>
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

</body>

prev，prevAll，prevUntil方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

过滤

缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first方法

first() 方法返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>

<div>
<p>这是 div 中的另一个段落。</p>
</div>

<p>这也是段落。</p>

</body>

last方法

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function(){
  $("div p").last();
});

eq方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭 (index 0)。</p>
<p>唐老鸭 (index 1)。</p>
<p>我住在 Duckburg (index 2)。</p>
<p>我最好的朋友是米老鼠 (index 3)。</p>

</body>

filter方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 “intro” 的所有 <p> 元素：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>

</body>

not方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 “intro” 的所有 <p> 元素：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").not(".intro").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>

</body>

集合

当你使用选择器获取元素时，这些元素视为一个集合。

通过jQuery，您能够便捷的对集合元素增删、放大与缩小范围、或遍历每个对象。

add方法

找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象，并把它们的背景设置为黄色：

$("div").css("border", "2px solid red")
        .add("p")
        .css("background", "yellow");

语法	描述
.add(selector)	添加选择器查到的元素
.add(elements)	添加js的elements
.add(html)	添加html片段
.add(jQueryObject)	添加jquery对象
.add(selector, context)	使用context指定选择器开始进行匹配的位置

andSelf方法

andSelf方法在进行选择器语法获取对象时，添加当前对象到集合中。

到所有 div，以及其中的所有段落，并为它们添加两个类名。请注意，由于未使用 .andSelf()，div 没有黄色背景色。

$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");

首先查找的是div，然后再查找它的所有p后代但并不包含div本身，为了加入div本身可以使用andSelf方法

each方法

each()方法遍历每个对象，为每个对象设定一个回调函数，就像for循环那样

each() 方法规定为每个匹配元素规定运行的函数。

语法1：

$(selector).each(function(index,element))

提示：返回 false 可用于及早停止循环。

index – 选择器的 index 位置
element – 当前的元素（也可使用 “this” 选择器）

输出每个 li 元素的文本：

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

语法2：

$.each(function(elements,index,element))

此语法可以遍历数组或对象

$.each(["aaa","bbb","ccc"],function(index,value){
     alert(index+"..."+value);
});

其中，第一个函数是数组或对象，index表示下标，value代表遍历的每个值，value缺省时默认使用this代替。

has方法

has()方法检测某个元素是否在另一个元素中：

.has(selector)

如果给定一个表示 DOM 元素集合的 jQuery 对象，.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代；如果任何后代元素匹配该选择器，该元素将被包含在结果中。

<head>
  <style>
    .full { border: 1px solid red; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

<script>
$('li').has('ul').css('background-color', 'red');
</script>

</body>

is方法

is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。

.is(selector)

您可以向 <ul> 元素添加 click 处理程序，然后把代码限制为只有当列表项本身，而非子元素，被点击时才进行触发：

<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

<script>
$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});
</script>

</body>

该方法的第二种用法是，对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说，如果该函数返回 true，则 .is() 也返回 true

<body>
<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

<script>
$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});
</script>

</body>

map方法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

.map(callback(index,domElement))

由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单，我们能够获得复选框 ID 组成的逗号分隔的列表：

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

<p><b>Values: </b></p>

<script>
  $("p").append($(':checkbox').map(function() {
    return this.id;
  }).get().join(','));
</script>

slice方法

slice() 把匹配元素集合缩减为指定的指数范围的子集。

.slice(selector,end)

参数	描述
selector	基于 0 的整数值，指示开始选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。
end	基于 0 的整数值，指示结束选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。如果省略，则选取范围会在集合末端结束。

选中所有段落，然后将所选内容缩减为只包含第一和第二个段落：

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

<script>
$("p").slice(0, 2).wrapInner("<b></b>");
</script>

offsetParent方法

offsetParent() 获得被定位的最近祖先元素。

如果给定一个表示 DOM 元素集合的 jQuery 对象，.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先，并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是，元素的 CSS position 属性设置为 relative、absolute 或 fixed。在为表演动画计算偏移或在页面上放置对象时，该信息会很有用处。

如果我们从项目 A 开始，我们可以找到其定位祖先元素：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

<script>
$('li.item-a').offsetParent().css('background-color', 'red');
</script>

closest方法

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

.closest(selector)

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：

.closest()	.parents()
从当前元素开始	从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象	返回包含零个、一个或多个元素的 jQuery 对象

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').closest('li').css('background-color', 'red');
</script>

contents方法

contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

如果给定表示 DOM 元素集合的 jQuery 对象，.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点，并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似，不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

.contents() 方法也可以用于获得 iframe 的内容文档，前提是该 iframe 与主页面在同一个域。

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  <br /> <br />
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur.
</div>
<script>
$('.container').contents().filter(function() {
  return this.nodeType == 3;
}).wrap('<p style="color:blue;"></p>').end().filter('br').remove();
</script>

这段代码首先会接收 <div class=”container”> 的内容，然后滤过其文本节点，将文本节点封装入段落标签中。这是通过测试元素的 .nodeType 属性实现的。该属性存有指示节点类型的数字代码；文本节点使用代码 3。内容会被再次过滤，这次针对 <br /> 元素，这些元素会被移除。

end方法

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例，并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时，应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集，可以使用 end() 从堆栈中弹出新集合。

  <ul class="first">
     <li class="foo">list item 1</li>
     <li>list item 2</li>
     <li class="bar">list item 3</li>
  </ul>
  <ul class="second">
     <li class="foo">list item 1</li>
     <li>list item 2</li>
     <li class="bar">list item 3</li>
  </ul>
  <script>$('ul.first').find('.foo')
    .css('background-color', 'red')
  .end().find('.bar')
    .css('background-color', 'green')
  .end();</script>

事件参考

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

鼠标事件

鼠标事件包含了通用的鼠标操作事件

click方法

当点击元素时，会发生 click 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

dblclick方法

当双击元素时，会发生 dblclick 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

在很短的时间内发生两次 click，即是一次 double click 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>

mousedown方法

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mousedown(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

mouseup方法

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mouseup(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

mousemove方法

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。

注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(document).mousemove(function(e){
    $("span").text(e.pageX + ", " + e.pageY);
  });
});
</script>
</head>
<body>
<p>鼠标位于坐标： <span></span>.</p>
</body>

mouseover方法

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>

mouseout方法

当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>

mouseenter方法

当鼠标指针穿过元素时，会发生 mouseenter 事件。

该事件大多数时候会与 mouseleave 事件一起使用。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>

mouseleave方法

当鼠标指针离开元素时，会发生 mouseleave 事件。

该事件大多数时候会与 mouseenter 事件一起使用。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。

注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>

键盘事件

键盘事件包含了通用的键盘操作事件

keydown方法

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

当按钮被按下时，发生 keydown 事件。

keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

提示：请使用 .which 属性来确定按下了哪个按键。

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").keyup(function(){
        $("input").css("background-color","#D6D6FF");
      });
    });
    </script>
</head>
<body>
    Enter your name: <input type="text" />
    <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>

keypress方法

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    i=0;
    $(document).ready(function(){
      $("input").keypress(function(){
        $("span").text(i+=1);
      });
    });
    </script>
</head>
<body>
    Enter your name: <input type="text" />
    <p>Keypresses:<span>0</span></p>
</body>

keyup方法

完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

提示：请使用 .which 属性来确定按下了哪个按键。

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").keyup(function(){
        $("input").css("background-color","#D6D6FF");
      });
    });
    </script>
</head>
<body>
    Enter your name: <input type="text" />
    <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>

事件属性

事件属性，指对事件的一些必要描述

pageX属性

pageX() 属性是鼠标指针的位置，相对于文档的左边缘。

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){ 
        $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
      });
    });
    
    </script>
</head>
<body>
    <p>鼠标指针位于： <span></span></p>
</body>

pageY属性

pageY() 属性是鼠标指针的位置，相对于文档的上边缘。

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){ 
        $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
      });
    });
    
    </script>
</head>
<body>
    <p>鼠标指针位于： <span></span></p>
</body>

type属性

type 属性描述触发哪种事件类型。

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").bind('click dblclick mouseover mouseout',function(event){
        $("div").html("事件：" + event.type);
      });
    });
    </script>
</head>
    
<body>
    <p>该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果您触发了其中的一个事件，下面的 div 中会显示出事件的类型。</p>
    <div></div>
</body>

which属性

which 属性指示按了哪个键或按钮。

用数字识别键盘按键，比如enter键值为13，一些字母可以使用String.fromCharCode识别

此外，IE用event.keCode方法获取当前被按下的键盘按键值，而 NetScape/FireFox/Opera用的则是event.which

FireFox中keyCode始终为0，按下keydown/keyup时，charCode=0，which为按键码。事件keypress时，which和charCode二者的值相同，存储了字符码。

此外，它仅仅记录按键，也不能区分大小写

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("input").keydown(function(event){ 
            var  currKey=0,e=e||event;
            currKey=e.keyCode||e.which||e.charCode;
            var keyName = String.fromCharCode(currKey);
            $("div").html("按键码: " + currKey + " 字符: " + keyName);
          });
        });
    </script>
</head>
<body>
    请随意键入一些字符：<input type="text" />
    <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
    <div></div>
</body>

timeStamp属性

timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。

该属性，用于记录事件触发时的毫秒数，在一些情况下是有用的，比如计算两个事件触发的时间间隔

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(e){
        $("span").text(e.timeStamp);
      });
    });
    </script>
</head>
<body>
    <p>对下面这个按钮的点击事件发生在 1970 年 1 月 1 日之后 <span>unknown</span> 毫秒。</p>
    <button>Click me</button>
</body>

target属性

target 属性记录了哪个 DOM 元素触发了该事件。

比如用于辨别多个元素同时触发某个事件时进行识别。

以下实例：分辨是哪个按钮触发了表单提交事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>target属性实例</title>
        <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    </head>
    <body>  
        <form id="Form">
            <input type="submit" value="搜索">
            <input type="submit" value="添加">
        </form>
    <script>
        $("#Form").submit(function(e){
            $("body").append("表单提交了...<br>")
            return false;
        })
        $("#Form>:submit").click(function(e){
            $("body").append("触发此次提交的按钮是："+e.target.getAttribute("value")+"<br>")
        })
    </script>
    </body>
</html>

或者，获取事件触发的元素，或者前后一个元素

<script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<b>我是前一个元素</b><button onclick="test()">确定</button>


<script>
    function test(){
        let e = window.event;
        let obj = e.target;
        console.log(obj);  // 触发事件的元素

        // 取得前一个元素
        let before = $(obj).prev();
        // 转为js对象
        let jsBefore = before.get(0)
        console.log(jsBefore)
    }
</script>

result属性

result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。

通俗来说，就是得到return的内容，除非该事件没有return

<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(e) {
        return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY);
      });
      $("button").click(function(e) {
        $("p").html(e.result);
      });  
    });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <button>请点击这里</button>
</body>

文档事件

html文档及其元素的一般事件

ready方法

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>

提示：ready() 函数不应与 <body onload=””> 一起使用。

load方法

当指定的元素（及子元素）已加载时，会发生 load() 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

注释：还存在一个名为 load() 的 jQuery Ajax 方法，根据不同的参数而定。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("img").load(function(){
    $("div").text("图像已加载");
  });
});
</script>
</head>
<body>
<img src="/i/shanghai_lupu_bridge.jpg" />
<div>图像正在加载中 ...</div>
<p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p>
</body>

unload方法

当用户离开页面时，会发生 unload 事件。

具体来说，当发生以下情况时，会发出 unload 事件：

点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面

unload() 方法将事件处理程序绑定到 unload 事件。

unload() 方法只应用于 window 对象。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(window).unload(function(){
    alert("再见！");
  });
});
</script>
</head>
<body>
<p>当您点击 <a href="http://www.52dixiaowo.com">这个链接</a> 时，或者关闭窗口，会触发一个警告框。</p>
</body>
</html>

遗憾的是：大多数浏览器并不支持此方法，如果需要实现此功能，可参考如下代码

<html>
<head>
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript">

window.onbeforeunload=function(e){
    e.preventDefault();
    e.returnValue ="";
}

</script>
</head>
<body>
<p>当您点击 <a href="http://www.52dixiaowo.com">这个链接</a> 时，或者关闭窗口，会触发一个警告框。</p>
</body>
</html>

focus方法

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>

blur方法

当元素失去焦点时发生 blur 事件。

blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>

change方法

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>

select方法

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after(" Text marked!");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<p>请试着选取输入域中的文本，看看会发生什么。</p>
</body>

scroll方法

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
  $("div").scroll(function() {
    $("span").text(x+=1);
  });
});
</script>
</head>
<body>
<p>请试着滚动 DIV 中的文本：</p>
<div style="width:200px;height:100px;overflow:scroll;">text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. 
<br /><br />
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
<p>滚动了 <span>0</span> 次。</p>
</body>

submit方法

当提交表单时，会发生 submit 事件。

该事件只适用于表单元素。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>submit属性实例</title>
        <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    </head>
    <body>  
        <form id="Form">
            <!-- 在submit时，触发input的required，进行非空验证 -->
            <input name="username" placeholder="用户名" required/>
            <input name="test" placeholder="关键字" required/>
            <!-- onclick会在submit之前触发 -->
            <input type="submit" onclick="form_action='search'" value="搜索">
            <input type="submit" onclick="form_action='add'" value="添加">
        </form>
    <script>
        $("#Form").submit(function(e){

            $("body").append("表单提交了..."+form_action+"<br>")

            // 快速生成查询字符串
            $("body").append($(this).serialize()+"..."+form_action+"<br><hr>")

            // 使用return false让表单提交失效
            return false;
        })
    </script>
    </body>
</html>

其他事件

包含了上述未归纳的事件

preventDefault方法

preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
  });
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>

isDefaultPrevented方法

isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    alert("Default prevented: " + event.isDefaultPrevented());
  });
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
<p>请点击该链接，检查是否阻止了默认动作。</p>
</body>

stopPropagation方法

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

子元素的事件会沿着dom树冒泡到父元素上，如果不希望事件冒泡，则使用此方法。

提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。

event.stopPropagation()

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").click(function(event){
    event.stopPropagation();
    alert("The span element was clicked.");
  });
  $("p").click(function(event){
    alert("The p element was clicked.");
  });
  $("div").click(function(){
    alert("The div element was clicked.");
  });
});
</script>
</head>
<body>

<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span></p></div>

<p><b>提示:</b> 点击span只会触发span，而点击p会触发p和div的click</p>
<p><b>Tip:</b> 尝试删除stopPropagation查看区别</p>

</body>
</html>

isPropagationStopped方法

event.isPropagationStopped() 方法检查指定的事件上是否调用了 event.stopPropagation()。

如果 event.stopPropagation() 被调用则该方法返回 true，否则返回 false。

语法：

event.isPropagationStopped()

检查 event.stopPropagation() 是否被调用：

$("div").click(function(event){
    event.stopPropagation();
    alert(event.isPropagationStopped());
});

resize方法

当调整浏览器窗口的大小时，发生 resize 事件。

resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
  $("span").text(x+=1);
});

});
</script>
</head>
<body>
<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>
</body>

bind方法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(event,data,function)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

向元素绑定多个事件

$(selector).bind({event:function, event:function, ...})

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

unbind方法

unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

ubind() 适用于任何通过 jQuery 附加的事件处理程序。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>

规定要删除的事件对象。用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。

如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。

$(selector).unbind(eventObj)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var x=0;
  $("p").click(function(e){
    $("p").animate({fontSize:"+=5px"});
    x++;
    if (x>=2)
      {
      $(this).unbind(e);
      }
  });
});
</script>
</head>
<body>
<p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p>
</body>

trigger方法

trigger() 方法触发被选元素的指定事件类型。

规定被选元素要触发的事件。

$(selector).trigger(event,[param1,param2,...])

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>

规定使用事件对象的被选元素要触发的事件。

$(selector).trigger(eventObj)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  var e = jQuery.Event("select");
  $("button").click(function(){
    $("input").trigger(e);
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>

triggerHandler方法

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

与 trigger() 方法相比的不同之处

它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

$(selector).triggerHandler(event,[param1,param2,...])

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("发生 Input select 事件！");
  });
  $("button").click(function(){
    $("input").triggerHandler("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
<p>请注意，与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中）。</p>
</body>

delegate方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(selector).delegate(childSelector,event,data,function)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
</body>

live方法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").live("click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>

die方法

die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeColor()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
  $("p").live("click",changeSize);
  $("p").live("click",changeColor);
  $("button").click(function(){
    $("p").die("click",changeSize);
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
</body>

undelegate方法

undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。

$(selector).undelegate(selector,event,function)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function changeSize()
  {
  $(this).animate({fontSize:"+=3px"});
  }
function changeSpacing()
  {
  $(this).animate({letterSpacing:"+=2px"});
  }

$(document).ready(function(){
  $("body").delegate("p","click",changeSize);
  $("body").delegate("p","click",changeSpacing);
  $("button").click(function(){
    $("body").undelegate("p");  // 可详细指定的参数与delegate相同
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>
<button>从 p 元素删除由 delegate() 方法添加的所有事件处理器</button>
</body>

error方法

当元素遇到错误（没有正确载入）时，发生 error 事件。

error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数。

提示：该方法是 bind(‘error’, handler) 的简写方式。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("img").error(function(){
    $("img").replaceWith("<p><b>图片未加载！</b></p>");
  });
});
</script>
</head>
<body>
<img src="errorimg.gif" />
<p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>
</body>

one方法

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
</body>

toggle 方法

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

该方法也可用于切换被选元素的 hide() 与 show() 方法。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle(1000);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>

当指定元素被点击时，在两个或多个函数之间轮流切换。

如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

$(selector).toggle(function1(),function2(),functionN(),...)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>

on方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

on方法比bind的好处是能适用于新元素，也就是它兼容了live和delegate。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p>
<button>Insert a new p element after this button</button>
</div>

</body>

off方法

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

<head>
<meta charset="utf-8"> 
<title>off实例</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function changeSize()
{
	$(this).animate({fontSize:"+=10px"});
}
function changeSpacing()
{
	$(this).animate({letterSpacing:"+=5px"});
}
  
$(document).ready(function(){
	$("p").on("click",changeSize);
	$("p").on("click",changeSpacing);
	$("button").click(function(){
		$("p").off("click",changeSize);
		alert("移除 changeSize，字体不会变大，但是字体的间距依然点一次变宽一次。");
	});
});
</script>
</head>
<body>

<p>这是一个段落 。</p>
<p>这是另外一个段落。</p>
<p>点击任意一个段落来修改段落的字体大小。</p>

<button>移除 changeSize() 事件句柄</button>

</body>

hover方法

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

$( selector ).hover( handlerIn, handlerOut )

等同以下方式：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

注意：如果只规定了一个函数，则它将会在 mouseenter 和 mouseleave 事件上运行。

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

Ajax

jquery 简化了ajax的使用，提供了多个快速调用的方法。

基本使用

对ajax的基本使用作出详细的说明

ajax实例

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

jQuery.ajax([settings])

以下给出基础实例

$.ajax({
    type: "GET",
    url: "test.json",
    data: {username:$("#username").val(), content:$("#content").val()},
    dataType: "json",
    async: true,
    success: function(data){   //  data表示响应数据
                   console.log(data);
            }
});

$.ajax参数

ajax方法可设置的选项非常多，可参考

参数	类型	描述
options	Object	可选。AJAX 请求设置。所有选项都是可选的。
async	Boolean	默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache	Boolean	默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。 jQuery 1.2 新功能。
complete(XHR, TS)	Function	请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。
contentType	String	默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context	Object	这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
data	String	发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataFilter	Function	给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值: “xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。 “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载） “json”: 返回 JSON 数据。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 “text”: 返回纯文本字符串
error	Function	默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。这是一个 Ajax 事件。
global	Boolean	是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified	Boolean	仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 ‘etag’ 来确定数据没有被修改过。
jsonp	String	在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。
jsonpCallback	String	为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
password	String	用于响应 HTTP 访问认证请求的密码
processData	Boolean	默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset	String	只有当请求时 dataType 为 “jsonp” 或 “script”，并且 type 是 “GET” 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success	Function	请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。
traditional	Boolean	如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type	String	默认值: “GET”)。请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url	String	默认值: 当前页地址。发送请求的地址。
username	String	用于响应 HTTP 访问认证请求的用户名。
xhr	Function	需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

$.ajaxSetup方法

$.ajaxSettings
获取或设置ajax配置，相当于获取jQuery.ajax(url,[settings])方法中的settings。

$.ajaxSettings的所有属性都可以设置，设置完就是全局的。
比如：要给每个请求都加一个请求头，挨个修改太麻烦，可以用以下方式。

$.ajaxSettings.beforeSend= function(XMLHttpRequest) {
        XMLHttpRequest.setRequestHeader("api-version",2);
    };

也可以使用以下方式：$.ajaxSetup也是设置全局 AJAX 默认选项。

$.ajaxSetup({
  	url: "/xmlhttp/",
  	global: false,
 	type: "POST",

        async: false
});

这些方法所设置的全局ajax默认选项，包括对后续的$.get()，$.post()

简化方式

通常使用$.get，或$.post等简化方法

$.get方法

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

$.get(url,data,success(response,status,xhr),dataType)

$("button").click(function(){
  $.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });
});

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：response – 包含来自请求的结果数据status – 包含请求的状态xhr – 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型：”xml””html””text””script””json””jsonp”

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.post方法

post() 方法通过 HTTP POST 请求从服务器载入数据。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

对于 jQuery 1.5，也可以向 success 回调函数传递 jqXHR 对象（jQuery 1.4 中传递的是 XMLHttpRequest 对象）。

通过 POST 读取的页面不被缓存，因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释：由于浏览器安全方面的限制，大多数 “Ajax” 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 “jqXHR,”实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序，请记住该请求针对 jqxhr 对象
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

    // 在这里执行其他任务
	
    // 为上面的请求设置另一个完成函数
    jqxhr.complete(function(){ alert("second complete"); });

$.getJSON方法

通过 HTTP GET 请求载入 JSON 数据。（允许跨域）

在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。注意：此行以后的代码将在这个回调函数执行前执行。

jQuery.getJSON(url,data,success(data,status,xhr))

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：response – 包含来自请求的结果数据status – 包含请求的状态xhr – 包含 XMLHttpRequest 对象

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。

传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。

加载文档

ajax除了可以发送请求给服务器外，它也可以获取静态文件，比如加载一段html，获取一个js脚本等

$.load方法

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

注释：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。

$(selector).load(url,data,function(response,status,xhr))

参数	描述
url	规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定当请求完成时运行的函数。额外的参数： response – 包含来自请求的结果数据 status – 包含请求的状态（”success”, “notmodified”, “error”, “timeout” 或 “parsererror”）xhr – 包含 XMLHttpRequest 对象

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 “success” 或 “notmodified” 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单：

$("#result").load("ajax/test.html");

如果提供回调函数，则会在执行 post-processing 之后执行该函数：

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

上面的两个例子中，如果当前文档不包含 “result” ID，则不会执行 .load() 方法。

如果提供的数据是对象，则使用 POST 方法；否则使用 GET 方法。

加载页面片段

.load() 方法，与 $.get() 不同，允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

我们可以修改上面的例子，这样就可以使用所获得文档的某部分：

$("#result").load("ajax/test.html #container");

如果执行该方法，则会取回 ajax/test.html 的内容，不过然后，jQuery 会解析被返回的文档，来查找带有容器 ID 的元素。该元素，连同其内容，会被插入带有结果 ID 的元素中，所取回文档的其余部分会被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如 <html>, <title> 或 <head> 元素。结果是，由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

注释：由于浏览器安全方面的限制，大多数 “Ajax” 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

例子，加载文章侧边栏导航部分至一个无序列表：

HTML 代码：

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery 代码：

$("#links").load("/Main_Page #p-Getting-Started li");

$.getScript方法

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

jQuery.getScript(url,success(response,status))

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

参数	描述
url	将要请求的 URL 字符串。
success(response,status)	可选。规定请求成功后执行的回调函数。额外的参数：response – 包含来自请求的结果数据status – 包含请求的状态（”success”, “notmodified”, “error”, “timeout” 或 “parsererror”）

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用，因为那时脚本已经运行了。

载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。

此方法与script标签引入js有何不同？

相对传统的加载方式，$.getScript()方法有以下两个优点：

异步跨域加载 JavaScript 文件；
可避免提前加载 JavaScript 文件，只有需要的时候才会去加载。这样可以减少服务器和客户端的负担，加快页面的加载速度。

通过这种方式获取的js仅能执行一次，如果需要反复执行，推荐使用缓存

$.ajaxSetup({
    cache:true
})

serialize方法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。（在data位置作为参数，适用get/post等方法）

您可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

$(selector).serialize()

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="比尔" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表单值</button>
<div></div>
</body>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

serializeArray方法

serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。（serialize方法的补充）

您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

serializeArray() 方法序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。

注意：此方法返回的是 JSON 对象而非 JSON 字符串。

返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

.serializeArray() 方法使用了 W3C 关于 successful controls（有效控件）的标准来检测哪些元素应当包括在内。特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

该方法可以对已选择单独表单元素的对象进行操作，比如 <input>, <textarea>, 和 <select>。不过，更方便的方法是，直接选择 <form> 标签自身来进行序列化操作。

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
});

param方法

param() 方法创建数组或对象的序列化表示。（serialize方法核心）

该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。

jQuery.param(object,traditional)

参数	描述
object	要进行序列化的数组或对象。
traditional	规定是否使用传统的方式浅层进行序列化（参数序列化）。

param() 方法用于在内部将元素值转换为序列化的字符串表示。请参阅 .serialize() 了解更多信息。

对于 jQuery 1.3，如果传递的参数是一个函数，那么用 .param() 会得到这个函数的返回值，而不是把这个函数作为一个字符串来返回。

对于 jQuery 1.4，.param() 方法将会通过深度递归的方式序列化对象，以便符合现代化脚本语言的需求，比如 PHP、Ruby on Rails 等。你可以通过设置 jQuery.ajaxSettings.traditional = true; 来全局地禁用这个功能。

如果被传递的对象在数组中，则必须是以 .serializeArray() 的返回值为格式的对象数组：

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]

注意：因为有些框架在解析序列化数字的时候能力有限，所以当传递一些含有对象或嵌套数组的数组作为参数时，请务必小心！

在 jQuery 1.4 中，HTML5 的 input 元素也会被序列化。

我们可以如下显示对象的查询字符串表示以及 URI 编码版本：

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

recursiveEncoded 和 recursiveDecoded 的值输出如下：

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

可以将 traditional 参数设置为 true，来模拟 jQuery 1.4 之前版本中 $.param() 的行为：

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

recursiveEncoded 和 recursiveDecoded 的值输出如下：

a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3

附加处理

对ajax请求进行通用的处理方法

ajaxStart方法

ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。

无论什么时候，当一个AJAX请求将要被发送时，jQuery会检查当前是否还有其他活跃的(未完成的)AJAX请求。如果在进程中没有找到其他活跃的AJAX请求，jQuery就会触发ajaxStart事件。此时，通过 ajaxStart()函数绑定的所有事件处理函数都将被执行。

一般而言，连续执行多个AJAX请求，只有其中的第一个AJAX请求会触发ajaxStart事件。等到所有AJAX请求执行完毕后，再次连续执行多个AJAX请求，还是只有其中的第一个AJAX请求会触发ajaxStart事件。

如果某个AJAX请求被禁止触发全局AJAX事件，则它不会被视为活跃的AJAX请求。

从jQuery 1.8开始，该函数只能为document对象绑定事件处理函数，为其他元素绑定的事件处理函数不会起作用。

$("div").ajaxStart(function(){
  $(this).html("<img src='demo_wait.gif' />");
});

ajaxError方法

ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。

.ajaxError(function(event,xhr,options,exc))

参数	描述
function(event,xhr,options,exc)	必需。规定当请求失败时运行的函数。额外的参数： event – 包含 event 对象 xhr – 包含 XMLHttpRequest 对象 options – 包含 AJAX 请求中使用的选项 exc – 包含 JavaScript exception

XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递：

function (event, XMLHttpRequest, ajaxOptions, thrownError) {
 // thrownError 只有当异常发生时才会被传递 this;
 }

ajaxComplete方法

ajaxComplete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。

与 ajaxSuccess() 不同，通过 ajaxComplete() 方法规定的函数会在请求完成时运行，即使请求并未成功。

.jQueryajaxComplete(function(event,xhr,options))

参数	描述
function(event,xhr,options)	必需。规定当请求完成时运行的函数。额外的参数： event – 包含 event 对象 xhr – 包含 XMLHttpRequest 对象 options – 包含 AJAX 请求中使用的选项

$("#txt").ajaxStart(function(){
  $("#wait").css("display","block");
});
$("#txt").ajaxComplete(function(){
  $("#wait").css("display","none");
});

ajaxSend方法

ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件。

.ajaxSend([function(event,xhr,options)])

参数	描述
function(event,xhr,options)	必需。规定当请求开始时执行函数。额外的参数： event – 包含 event 对象 xhr – 包含 XMLHttpRequest 对象 options – 包含 AJAX 请求中使用的选项

$("div").ajaxSend(function(e,xhr,opt){
  $(this).html("Requesting " + opt.url);
});

ajaxStop方法

ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。

无论 Ajax 请求在何时完成，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStop 事件。在此时，由 .ajaxStop() 方法注册的任何函数都会被执行。

.ajaxStop(function())

$("#loading").ajaxStop(function(){
  $(this).hide();
});

ajaxSuccess方法

ajaxSuccess() 方法在 AJAX 请求成功时执行函数。它是一个 Ajax 事件。

XMLHttpRequest 对象和设置作为参数传递给回调函数。

无论 Ajax 请求在何时成功完成，jQuery 都会触发该 ajaxSuccess 事件。在此时，由 .ajaxSuccess() 方法注册的任何函数都会被执行。

.ajaxSuccess(function(event,xhr,options))

参数	描述
function(event,xhr,options)	必需。规定当请求成功时运行的函数。额外的参数： event – 包含 event 对象 xhr – 包含 XMLHttpRequest 对象 options – 包含 AJAX 请求中使用的选项

$("#msg").ajaxSuccess(function(evt, request, settings){
  $(this).append("<p>请求成功!</p>");
});

jQuery对象

jQuery对象详解

核心

jQuery核心函数

noConflict方法

noConflict() 方法让渡变量 $ 的 jQuery 控制权。

该方法释放 jQuery 对 $ 变量的控制。

该方法也可用于为 jQuery 变量规定新的自定义名称。

提示：在其他 JavaScript 库为其函数使用 $ 时，该方法很有用。

jQuery.noConflict(removeAll)

许多 JavaScript 库使用 $ 作为函数或变量名，jQuery 也一样。在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库，我们可以通过调用 $.noConflict() 向该库返回控制权：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
  $.noConflict();
  // 使用另一个库的 $ 的代码
</script>

创建一个新的别名用以在接下来的库中使用 jQuery 对象：

var j = jQuery.noConflict();

j("div p").hide();	// 基于 jQuery 的代码

$("content").style.display = "none";	// 基于其他库的 $() 代码

完全将 jQuery 移到一个新的命名空间：

var dom = {};
dom.query = jQuery.noConflict(true);

dom.query("div p").hide();	// 新 jQuery 的代码

$("content").style.display = "none";	// 另一个库 $() 的代码

jQuery("div > p").hide();	// 另一个版本 jQuery 的代码

jQuery方法

jQuery() 方法接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。

语法	解释
jQuery(selector, [context])	接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
jQuery(html,[ownerDocument])	使用原始 HTML 的字符串来创建 DOM 元素
jQuery( callback )	绑定一个在 DOM 文档载入完成后执行的函数

jQuery( selector, [ context ] )

该语法有以下几种用法：

用法 1 ：设置选择器环境

语法

jQuery(selector, [context])

默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。

例如，如果我们希望在一个 callback 中搜索一个元素，可以限定下面的搜索：

实例

$("div.foo").click(function() {
  $("span", this).addClass("bar");
});

由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的 class。

在内部，选择器环境是通过 .find() 方法实现的，因此 $(“span”, this) 等价于 $(this).find(“span”)。

jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。

默认情况下, 如果没有指定 context 参数，$() 将在当前的 HTML document 中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在 jQuery 1.3.2 以后，其返回的元素顺序等同于在 context 中出现的先后顺序。

用法 2 ：使用 DOM 元素

语法

jQuery(element)

该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。该功能通常的用法是，对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法：

实例

$("div.foo").click(function() {
  $(this).slideUp();
});

此例会在元素被点击时使用滑动动画对其进行隐藏。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素，因此在对其调用 jQuery 的方法之前，必须用 jQuery 对象包装该元素。

这个函数也可以接收 XML 文档和 Window 对象（虽然它们不是 DOM 元素）作为有效的参数。

当 XML 数据从 Ajax 调用中返回后，我们可以使用 $() 函数通过 jQuery 对象包装该数据。一旦完成，我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。

用法 3 ：克隆 jQuery 对象

语法

jQuery(jQuery object)

当以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本。与初始对象一样，新的 jQuery 对象引用相同的 DOM 元素。

用法 4 ：返回空的集合

语法

jQuery()

对于 jQuery 1.4，调用无参数的 jQuery() 方法会返回空的 jQuery 集合。在之前版本的 jQuery 中，这样会返回包含 document 节点的集合。

jQuery( html, [ ownerDocument ] )

该语法有以下几种用法：

用法 1 ：创建新的元素

语法

jQuery(html,[ownerDocument])

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。

当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $(“<span/>”) 或 $(“<span></span>”) ，但不推荐 $(“<span>”)。在 jQuery 中，这个语法等同于 $(document.createElement(“span”))。

如果以参数的形式将字符串传递给 $()，jQuery 会检查字符串是否是 HTML （比如，字符串某些位置存在标签）。如果不是，则把字符串解释为选择器表达式，请见上面的讲解。但如果字符串是 HTML 片段，则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象：

实例

$("<p id="test">My <em>new</em> text</p>").appendTo("body");

如果 HTML 片段比不含属性的简单标签更复杂，如同上面例子中的 HTML，那么元素实际的创建过程是由浏览器的 innerHTML 机制完成的。具体地讲，jQuery 会创建新的 <div> 元素，然后为传入的 HTML 片段设置元素的 innerHTML 属性。当参数只是简单的标签，比如$(“<img />”) 或 $(“<a></a>”)，jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。

要确保跨平台兼容性，片段的结构必须良好。能够包含其他元素的标签必须成对出现（带有关闭标签）：

$("<a href="http://jquery.com"></a>");

不过，jQuery 也允许类似 XML 的标签语法：

$("<a/>");

无法包含其他元素的标签可以关闭，也可以不关闭：

$("<img />");
$("<input>");

用法 2 ：设置属性和事件

语法

jQuery(html,props)

对于 jQuery 1.4，我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外，可以传递任意的事件类型，并可以调用下面的 jQuery 方法：val, css, html, text, data, width, height, or offset.

注意，Internet Explorer 不允许你创建 input 元素并改变其类型；您必须使用例如 “<input type=”checkbox” />” 来规定类型。

实例

创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

允许你绑定一个在 DOM 文档载入完成后执行的函数。

该函数的作用如同 $(document).ready() 一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说，这个函数是可链接的，但真正以这种方式链接的情况并不多。

例子

当DOM加载完成后，执行其中的函数：

$(function(){
  // 文档就绪
});

属性

下面列出的这些方法设置或返回元素的 CSS 相关属性。

context属性

context 属性在 jQuery version 1.10 中被弃用。

context 属性含有被传递到 jQuery 的原始上下文，可能是 DOM 节点上下文，如果未传递节点，则是 document 上下文。

$("div").append("<p>" + $("div").context + "</p>")
.append("<p>" + $("div",document.body).context.nodeName + "</p>");

jquery属性

jquery 属性返回的字符串包含 jquery 的版本号。

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").on("click",function(){ 
    var version = $().jquery; 
    alert("You are running jQuery version: " + version); 
  });
}); 
</script>
</head>
<body>

<button>显示版本号</button>

</body>

jQuery.fx.interval属性

jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率。可操作该属性来调整动画运行的每秒帧数。

默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。

降低这个值能够使动画在更快的浏览器中运行得更流畅，但这么做也行会影响性能。

提示：由于 jQuery 使用一个全局的间隔时间，为了使该属性生效，动画应该不在运行或者首先停止所有动画。

注释：该属性在支持 requestAnimationFrame 属性的浏览器中无效，比如 Google Chrome 11。

语法：

jQuery.fx.interval = milliseconds;

实例：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#toggle").on("click",function(){
    $("div").toggle(5000);
  });
  $("#interval").on("click",function(){
    jQuery.fx.interval = 500;
  });
});
</script>
</head>
<body>

<button id="toggle">切换 div</button>
<button id="interval">以较少的帧数来运行动画</button>

<div style="background:#98bf21;height:100px;width:100px;margin:50px;">
</div>

</body>实例：

jQuery.fx.off属性

jQuery.fx.off 属性用于对所有动画进行全局禁用或启用。

默认值是 false，它允许动画正常运行。当设置为 true 时，将禁用所有动画方法，这样会把元素设置为其最后的状态，而不是显示效果。

提示：如需简化代码，可以使用 $.fx.off 来代替 jQuery.fx.off。

语法：

jQuery.fx.off = true|false;

实例：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#disable").click(function(){
    jQuery.fx.off = true;
  });
  $("#enable").click(function(){
    jQuery.fx.off = false;
  });
  $("#toggle").click(function(){
    $("div").toggle("slow");
  });
});
</script>
</head>
<body>

<button id="disable">jQuery.fx.off = true ( 禁用 )</button>
<button id="enable">jQuery.fx.off = false ( 启用 )</button>
<br><br>
<button id="toggle">切换动画</button>

<div style="background:#98bf21;height:100px;width:100px;margin:50px;">
</div>

</body>

jQuery.support属性

jQuery.support 属性包含表示不同浏览器特性或漏洞的属性集。

此属性主要用于 jQuery 的内部使用。

jQuery.support.propvalue

属性	描述
propvalue	必需。规定要测试的功能。这些测试包括： ajax boxModel changeBubbles checkClone checkOn cors cssFloat hrefNormalized htmlSerialize leadingWhitespace noCloneChecked noCloneEvent opacity optDisabled optSelected scriptEval() style submitBubbles tbody

实例：

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").html("本浏览器能够创建 XMLHttpRequest 对象: " + jQuery.support.ajax);
  });
</script>
</head>
<body>

<p></p>

</body>

length属性

length 属性包含 jQuery 对象中元素的数目。

语法：

$(selector).length

实例：

$("button").click(function(){
  alert($("li").length);
});

dom元素

以下是jQuery关于dom的一些方法

get方法

get() 方法获得由选择器指定的 DOM 元素。

语法：

$(selector).get(index)

实例：

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").get(0);
    $("div").text(x.nodeName + ": " + x.innerHTML);
  });
});
</script>
</head>
<body>
<p>This is a paragraph</p>
<button>获得 p DOM 元素</button>
<div></div>
</body>

index方法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释：如果未找到元素，index() 将返回 -1。

语法1：

$(selector).index()

实例：

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").click(function(){
    alert($(this).index());
  });
});
</script>
</head>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>

获得元素相对于选择器的 index 位置。

该元素可以通过 DOM 元素或 jQuery 选择器来指定。

语法2：

$(selector).index(element)

实例：

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($(".hot").index($("#favorite")));
  });
});
</script>
</head>
<body>
<p>请点击下面的按钮，以获得 id="favorite" 的元素相对于 jQuery 选择器 (class="hot") 的 index：</p>
<button>获得 index</button>
<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>

size方法

size() 方法返回被 jQuery 选择器匹配的元素的数量。

语法：

$(selector).size()

实例：

$("button").click(function(){
  alert($("li").size());
});

toArray方法

toArray() 方法以数组的形式返回 jQuery 选择器匹配的元素。

语法：

$(selector).toArray()

实例：

$("button").click(function(){
  x=$("li").toArray()
  for (i=0;i<x.length;i++)
    {
    alert(x[i].innerHTML);
    }
});

文档操作

这里完善“起步”中缺省的一些方法，包括html，属性，css

appendTo方法

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

$(content).appendTo(selector)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<b> Hello World!</b>").appendTo("p");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>

prependTo方法

prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。

提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

$(content).prependTo(selector)

在每个 p 元素的开头插入内容：

$(".btn1").click(function(){
  $("<b>Hello World!</b>").prependTo("p");
});

clone方法

clone() 方法生成被选元素的副本，包含子节点、文本和属性。

$(selector).clone(includeEvents)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").clone());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>
</body>

hasClass方法

hasClass() 方法检查被选元素是否包含指定的 class。

$(selector).hasClass(class)

$("button").click(function(){
  alert($("p:first").hasClass("intro"));
});

removeAttr方法

removeAttr() 方法从被选元素中移除属性。

$(selector).removeAttr(attribute)

从任何 p 元素中移除 id 属性：

$("button").click(function(){
  $("p").removeAttr("id");
});

insertAfter方法

insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

$(content).insertAfter(selector)

$("button").click(function(){
  $("<span>Hello world!</span>").insertAfter("p");
});

insertBefore方法

insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。

$(content).insertBefore(selector)

$("button").click(function(){
  $("<span>Hello world!</span>").insertBefore("p");
});

detach方法

detach() 方法移除被选元素，包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

$(selector).detach()

移动元素并保留其 click 事件

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>

replaceWith方法

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。

提示：replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。

$(selector).replaceWith(content)

参数	描述
content	必需。规定替换被选元素的内容。可能的值: HTML 代码 – 比如 (“<div></div>”) 新元素 – 比如 (document.createElement(“div”)) 已存在的元素 – 比如 ($(“.div1”)) 已存在的元素不会被移动，只会被复制，并包裹被选元素。
selector	必需。规定要替换的元素。

$(".btn1").click(function(){
   $("p").replaceWith("<b>Hello world!</b>");
});

replaceAll方法

replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。

提示：replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

$(content).replaceAll(selector)

参数	描述
content	必需。规定替换被选元素的内容。可能的值: HTML 代码 – 比如 (“<div></div>”) 新元素 – 比如 (document.createElement(“div”)) 已存在的元素 – 比如 ($(“.div1”)) 已存在的元素不会被移动，只会被复制，并包裹被选元素。
selector	必需。规定要替换的元素。

$(".btn1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});

wrap方法

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

$(selector).wrap(wrapper)

参数	描述
content	必需。规定替换被选元素的内容。可能的值: HTML 代码 – 比如 (“<div></div>”) 新元素 – 比如 (document.createElement(“div”)) 已存在的元素 – 比如 ($(“.div1”)) 已存在的元素不会被移动，只会被复制，并包裹被选元素。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("p").wrap("<div></div>");
    }, function(){
    $("p").unwrap();
  });
});

</script>
<style type="text/css">
div{background-color:yellow;padding:10px;}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<button>包裹或解开 p 元素</button>

</body>

unwrap方法

unwrap() 方法删除被选元素的父元素。

$(selector).unwrap()

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("p").wrap("<div></div>");
    }, function(){
    $("p").unwrap();
  });
});

</script>
<style type="text/css">
div{background-color:yellow;padding:10px;}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<button>包裹或解开 p 元素</button>

</body>

wrapAll方法

wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。

$(selector).wrapAll(wrapper)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapAll("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用一个 div 包裹所有段落</button>
</body>

wrapInner方法

wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

$(selector).wrapInner(wrapper)

参数	描述
content	必需。规定替换被选元素的内容。可能的值: HTML 代码 – 比如 (“<div></div>”) 新元素 – 比如 (document.createElement(“div”)) 已存在的元素 – 比如 ($(“.div1”)) 已存在的元素不会被移动，只会被复制，并包裹被选元素。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapInner(document.createElement("b"));
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">加粗段落中的所有内容</button>
</body>

CSS操作

这里补全“起步”中缺少的样式参考

offset方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

$(selector).offset(value)

参数	描述
value	必需。规定以像素计的 top 和 left 坐标。可能的值：值对，比如 {top:100,left:0} 带有 top 和 left 属性的对象

此外，可以使用回调函数设置offset

$(selector).offset(function(index,oldoffset))

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").offset(function(n,c){
    	newPos=new Object();
        newPos.left=c.left+100;
        newPos.top=c.top+100;
        return newPos;
    });
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>设置 p 元素的 offset 坐标</button>
</body>

position方法

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

此方法只对可见元素有效。

$(selector).position()

$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

scrollLeft方法

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。

滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。

$(selector).scrollLeft(position)

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").scrollLeft(100);
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把滚动条的水平位置设置为 100px</button>
</body>

默认单位为px，不可设置其他单位。

scrollTop方法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

$(selector).scrollTop(offset)

注释：该方法对于可见元素和不可见元素均有效。

注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。

注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("div").scrollTop()+" px");
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">获得 scrollbar top offset</button>
<p>试着移动滚动条，然后再次点击按钮。</p>
</body>

$(window).scrollTop()和$(document).scrollTop()具有相同的效果，都为返回滚动条的垂直位置。

但是$(window).scrollTop()被所有浏览器支持。

单独来说，window表示窗口对象（用户角度），docment表示文档对象。

数据缓存

数据缓存，在这里指的是数据临时存储。在使用javascript时，我们会在script标签中定义全局变量存储数据，而在jquery中你则可以把任意数据绑定在任意dom元素上。

数据缓存主要依赖“起步”介绍的data方法，在这里介绍其他相关方法。

hasData方法

hasData() 方法检测元素是否拥有与之相关的任何 jQuery 数据。

jQuery.hasData(element)

<p>结果：</p>

<script>
$(function(){
  var $p = jQuery("p"), p = $p[0];
  $p.append(jQuery.hasData(p)+" "); /* false */
  jQuery.data(p, "testing", 123);
  $p.append(jQuery.hasData(p)+" "); /* true*/
  jQuery.removeData(p, "testing");
  $p.append(jQuery.hasData(p)+" "); /* false */
});
</script>

jQuery.hasData() 方法检测元素当前是否拥有通过使用 jQuery.data() 设置的任何值。如果没有数据与元素相关（根本不存在数据对象或者数据对象为空），则该方法返回 false；否则返回 true。

jQuery.hasData(element) 的主要优势是，在不存在数据对象的情况下，不会创建并将数据对象与元素进行关联。相反地，jQuery.data(element) 总是向调用者返回数据对象，如果之前数据对象不存在，则会创建它。

removeData方法

removeData() 方法删除之前通过 data() 方法设置的数据。

$(selector).removeData(name)

参数	描述
name	可选。规定要删除的数据的名称。如果没有规定名称，该方法将从被选元素中删除所有已存储的数据。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
    alert("Greeting is: " + $("div").data("greeting"));
  });
  $("#btn2").click(function(){
    $("div").removeData("greeting");
    alert("Greeting is: " + $("div").data("greeting"));
  });
});
</script>
</head>
<body>
<button id="btn1">向 div 元素添加数据</button><br />
<button id="btn2">从 div 元素删除数据</button>
<div></div>
</body>

queue方法

queue() 方法显示或操作在匹配元素上执行的函数队列。

语法1：

.queue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

语法2：

.queue(queueName,newQueue)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如：

$('#foo').slideUp().fadeIn();

当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用。

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

等价于：

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

请注意，当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。

对自定义函数进行队列操作：

<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

  请点击这里 ...
  <div></div>

<script>$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });</script>

</body>

设置队列数组来删除队列：

<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

  <button id="start">开始</button>
  <button id="stop">结束</button>
  <div></div>

  <script>$("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });</script>

</body>

dequeue方法

dequeue() 方法为匹配元素执行序列中的下一个函数。

.dequeue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

<head>
  <style>
    div { margin:3px; width:50px; position:absolute;
    height:50px; left:10px; top:30px; 
    background-color:yellow; }
    div.red { background-color:red; }  
  </style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

<button>开始</button>
<div></div>
<script>
$("button").click(function () {
  $("div").animate({left:'+=200px'}, 2000);
  $("div").animate({top:'0px'}, 600);
  $("div").queue(function () {
    $(this).toggleClass("red");
    $(this).dequeue();
  });
  $("div").animate({left:'10px', top:'30px'}, 700);
});
</script>

</body>

当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。该函数反过来会（直接或间接地）引发对 .dequeue() 的调用，这样序列才能继续下去。

clearQueue方法

clearQueue() 方法从序列中删除仍未运行的所有项目。

.clearQueue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

<head>
  <style>
  div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px; 
    background:green; display:none; }
  div.newcolor { background:blue; }
  </style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

<button id="start">开始</button>
<button id="stop">停止</button>
<div></div>

<script>
$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});
$("#stop").click(function () {
  $("div").clearQueue();
  $("div").stop();
});
</script>


</body>

当调用 .clearQueue() 方法时，序列中未被执行的所有函数都会被从序列中删除。如果不使用参数，则 .clearQueue() 从 fx （标准效果序列）中删除剩余的函数。在这种方式中，它类似于 .stop(true)。不过，.stop() 方法只用于动画，而 .clearQueue() 也可用于删除通过 .queue() 方法添加到通用 jQuery 序列的任何函数。

插件

jquery是一个强大的开源库，随之而来的也有很多强大的插件

Treeview插件

jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。github地址：jzaefferer/jquery-treeview: A jQuery Tree plugin (github.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>树形菜单实例</title>

	<link rel="stylesheet" href="https://qdn.52dixiaowo.com/ajax/jquery-treeview/jquery.treeview.css" />

	<script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
	<script src="https://qdn.52dixiaowo.com/ajax/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>

	<script type="text/javascript">
	$(document).ready(function(){
		$("#browser").treeview({
			toggle: function() {
				console.log("%s was toggled.", $(this).find(">span").text());
			}
		});

		$("#add").click(function() {
			var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
				"<li><span class='file'>Item1</span></li>" +
				"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
			$("#browser").treeview({
				add: branches
			});
		});
	});
	</script>
	</head>
	<body>

	<h1 id="banner">jQuery Treeview 简单实例</h1>
	<div id="main">

	

	<ul id="browser" class="filetree treeview-famfamfam">
		<li><span class="folder">Folder 1</span>
			<ul>
				<li><span class="folder">Item 1.1</span>
					<ul>
						<li><span class="file">Item 1.1.1</span></li>
					</ul>
				</li>
				<li><span class="folder">Folder 2</span>
					<ul>
						<li><span class="folder">Subfolder 2.1</span>
							<ul id="folder21">
								<li><span class="file">File 2.1.1</span></li>
								<li><span class="file">File 2.1.2</span></li>
							</ul>
						</li>
						<li><span class="folder">Subfolder 2.2</span>
							<ul>
								<li><span class="file">File 2.2.1</span></li>
								<li><span class="file">File 2.2.2</span></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
					<ul>
						<li><span class="file">File 3.1</span></li>
					</ul>
				</li>
				<li><span class="file">File 4</span></li>
			</ul>
		</li>
	</ul>

	<button id="add">Add!</button>

	

</div>

</body></html>

消息提醒插件

严格来说，这是一种类型的插件，它用于弹出消息给用户提示，而不是使用alert去通知给用户。

消息提醒，一般是省去用户点击确认的麻烦，此外也可以自定义样式比alert更美观。

下面，我们手写一个简单的代码实现此功能：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery消息提醒</title>
        <script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
        <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/font-awesome@4.7.0/css/font-awesome.min.css">
        <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    </head>
    <body>  
      <div class="container">
        <h2 class="text-left">Jquery消息提醒案例</h2>
        <div class="btn-group">
            <button id="default" class="btn btn-default" onclick="message('普通消息','default')">普通消息</button>
            <button id="info" class="btn btn-info" onclick="message('通知消息','info')">通知消息</button>
            <button id="success" class="btn btn-success" onclick="message('成功消息','success')">成功消息</button>
            <button id="warning" class="btn btn-warning" onclick="message('警告消息','warning')">警告消息</button>
            <button id="error" class="btn btn-danger" onclick="message('错误消息','error')">错误消息</button>
        </div>
    </div>
    <script>
        function message(text,type){
            let text_class = "";
            switch(type){
                
            case "default":
                text_class = "fa fa-comments";
                break;
            case "info":
                text_class = "fa fa-info-circle text-info";
                break;
            case "success":
                text_class = "fa fa-check-square-o text-success";
                break;
            case "warning":
                text_class = "fa fa-warning text-warning";
                break;
            case "error":
                text_class = "fa fa-close text-danger";
                break;
            default:
                throw "消息type错误，请传递default/info/success/warning/error中的任一种";
                break;
            }
            let msgs = $(".message");
            let len = msgs.length; 
            let end = 0;
            let baseHeight = 0;
            if(len>0){
                baseHeight =msgs.first().innerHeight()+20;
                let start = msgs.first().attr('no');
                end = +start+len;
            }
            let height = 100+end*baseHeight+"px";
            $(`<div no='${end}' id='msg-${end}' class='message ${text_class}' style='top: ${height};position: fixed;left: 50%;border: 1px solid #ddd;
            background-color:#bbb;transform: translate(-50%, -50%);font-size: 1.2em;padding: 1rem;z-index: 999;border-radius: 0.5rem;'>${text}</div>`).appendTo("body");
            let rmScript = `$("#msg-${end}").remove();`;
            setTimeout(rmScript,1500);
        }
    </script>
    </body>
</html>

本篇完，还有疑问？留下评论吧