JavaScript笔记二：jQuery学习笔记

 

JavaScript笔记二：jQuery学习笔记

 

（20150115注：部分方法的执行结果跟jquery版本有关，

例如.attr("checked")的值可能是“checked”，也可能是true

请注意）

 

（不完整，不准确，待修改，请以官方文档为准）

see

http://docs.jquery.com/Main_Page

http://api.jquery.com/

http://docs.jquery.com/Alternative_Resources

http://semooh.jp/

http://shawphy.github.com/jquery-api/

 

* 核心(http://api.jquery.com/category/core/)

* jQuery函数和$(...)

$("input:radio", document.form[0]) 

$是jQuery的简写，第一参数是选择器（类似CSS语法），第二参数是检索范围的文档对象（如果是Ajax则为xml.responseXML），缺省为当前HTML的DOM元素。

（补注：）$("span", this).html("(ID = '<b>" + this.id + "</b>')");

（补注：见attr(key,fn)）用于$().attr(,).each()闭包内，this表示attr返回标签的当前遍历的标签的范围（这里是<div></div>）

$("<div><p>Hello</p></div>") 

根据HTML字符串创建DOM以对其进行后续操作（input节点可能有限制），注意斜杠要转义。空元素$("<span/>")在jQuery 1.3后写成$(document.createElement("span"))。第二参数可以传所属文档对象。

$(document.body) 

把一个或多个DOM元素转换为jQuery对象（但不能接受XML文档和Window对象）

$(function(){}) 

$(document).ready()的简写（可以写成jQuery(function($) {})保护$变量），在DOM加载时执行参数中的闭包

* jQuery对象操作和类似数组的操作

(http://api.jquery.com/category/miscellaneous/dom-element-methods/)

(http://api.jquery.com/category/internals/)

(http://api.jquery.com/category/properties/)

$("li").each(function() {$(this)}) 或 $("div").each(function (index, domEle) {$(this)}) 

循环遍历集合。闭包返回false结束循环（相当于break），返回true继续循环（相当于continue）。$(this)相当于闭包第二参数domEle，即当前遍历的DOM元素。

$("div").size()

集合持有的对象个数。相当于length属性

$("div").length

集合持有的对象个数。相当于size()

$("ul").selector

jQuery 1.3以后，获得选择器字符串

$("ul").context  $("ul", document.body).context.nodeName

jQuery 1.3以后，获取jQuery对象上的DOM对象，主要用于插件。

$("p").eq(1)

取出集合中索引为n的元素（索引从0开始）

$("div").get()

转换为DOM元素的数组类型，以方便遍历或用.reverse()翻转数组。

$(this).get(0)

取出指定索引的DOM元素。$(this).get(0)相当于$(this)[0]

$("div").index(this)

查询指定DOM元素的索引号或是否存在，不存在则返回-1.

$("div").toArray().reverse()

获取所有选中的jQuery对象的DOM对象数组（每个数组元素可以读取.innerHTML域）。

* 插件

jQuery.fn.extend({ xxx:function() {return this.XXX()} });$("input[@type=xxx]");

插件扩展，通常用于选择器内的条件表达式

jQuery.extend({ xxx:function(a, b) {}});jQuery.xxx(a, b);

插件扩展，加入到jQuery的名字空间内。

* 消除命名空间的冲突(http://api.jquery.com/category/miscellaneous/setup-methods/)

jQuery.noConflict();jQuery("div p").hide();$("content")或var j=jQuery.noConflict();j("div p").hide();$("content")

恢复$原有的定义或内容。后面的jQuery代码，要么把$改为jQuery，要么用(function($) {...})()括起原来使用$的jQuery代码，要么用其返回值作为名字空间。

var dom = {};dom.query = jQuery.noConflict(true);dom.query("div p").hide();

恢复$和jQuery原有定义或内容（参数为true表示extreme模式），后面的jQuery代码改用其返回值作为名字空间。

* 新增

$.holdReady(true);$.getScript("myplugin.js", function() {$.holdReady(false);});

延迟ready事件，直至指定的插件加载完毕。

var sub$ = jQuery.sub();

复制一个新的jQuery即$对象，对这个新的$的属性或方法的修改或添加不影响原来的$。

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ alert(ajaxArgs[1]);});

异步执行回调。

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).then(myFunc, myFailure);

执行一个或多个事件（如ajax），根据结果（成功和失败）执行前一个回调或后一个回调。（可以用done代替then）

$.when( { testing: 123 } ).done(function(x){ alert(x.testing); });

非异步执行回调（传给闭包的参数就是$.when的实参）。

* 选择器（使用CSS风格的字符串进行筛选，并转为jQuery对象）(http://api.jquery.com/category/selectors/)

* 基本和复合选择器(http://api.jquery.com/category/selectors/basic-css-selectors/)

$("#myID\\.entry\\[1\\]") 

id等于特定值，反斜杠需要转义

$("div") 

标签等于特定值

$(".myClass") 

class等于特定值

$("*") 

当前集合中的全部节点

$("div,span,p.myClass") 

多个选择器的并集

* 与前一个选择器有层次或平行关系的选择器(http://api.jquery.com/category/selectors/hierarchy-selectors/)

$("form input") 

某个选择器下的符合特定选择器的后代集合

$("#main > *") 

某个选择器下的符合特定选择器的子元素集合

$("label + input") 

某个选择器后符合特定选择器的紧跟的同辈元素

$("#prev ~ div") 

某个选择器后符合特定选择器的所有同辈元素

* 基本过滤器，对选择器的再选择子集，根据索引、反选、特性(http://api.jquery.com/category/selectors/basic-filter-selectors/)

$("li:first") 

选择器选中的第一个

$("li:last") 

选择器选中的最后一个

$("input:not(:checked)") 

括号内选择器选中的被排除

$("li:even") 

选择器选中的索引（总索引，从0开始）为偶数的子集

$("li:odd") 

选择器选中的索引（总索引，从0开始）为奇数的子集

$("td:eq(2)") 

选择器选中的索引（从0开始）为特定值的节点

$("td:gt(4)") 

选择器选中的索引（从0开始）大于特定值的子集

$("td:lt(4)") 

选择器选中的索引（从0开始）小于特定值的子集

$(":header") 

选中所有h1，h2，h3标签

$("div:animated") 

选择器选中的正在执行动画的子集

el.is(":focus")

判断当前是否是焦点

* 内容过滤器，对选择器的再选择子集，根据节点中的内容(http://api.jquery.com/category/selectors/content-filter-selector/)

$("div:contains('John')") 

选择器选中的内容包含特定值的子集

$("td:empty") 

选择器选中的空标签子集

$("div:has(strong)") 

选择器选中的，使括号内选择器结果存在的子集

$("td:parent") 

选择器选中的父节点，包括文本节点

* 显示过滤器(http://api.jquery.com/category/selectors/visibility-filter-selectors/)

$("div:hidden") 

最初没有显示的元素（style为display:none;的div或type为hidden的input）

$("div:visible") 

显示的元素

* 属性过滤(http://api.jquery.com/category/selectors/attribute-selectors/)

$("div[id]") 

存在属性

$("input[name='newsletter']") 

属性等于特定值

$("input[name!='newsletter']") 

属性不存在或不等于特定值

$("input[name^='news']") 

属性等于特定值开头的值

$("input[name$='letter']") 

属性等于特定值结尾的值

$("input[name*='man']") 

属性包含特定值

$("input[id][name$='man']")  

多个属性过滤

$('a[hreflang|="en"]')

属性等于特定值，或以特定值为前缀后跟着减号'-'（例如"en-xxx"）

$('input[name~="man"]')

属性包含特定值的单词（特定值的前后是空白符或字符串的头尾）

* 特定于父节点的子要素索引过滤器(http://api.jquery.com/category/selectors/child-filter-selectors/)

$("ul li:nth-child(2)") 

集合中特定于父节点的索引为指定值或even/odd/关于n的表达式（不同于:even和:odd，它的索引值特定于父节点） 

$("div span:first-child") 

集合中特定于父节点的第一个元素

$("div span:last-child") 

集合中特定于父节点的最后的元素

$("div button:only-child") 

集合中特定于父节点的只有一个元素时选中那个元素

* 表单(http://api.jquery.com/category/selectors/form-selectors/)

$(":input") 

所有input节点（包括type为input, select, button, password, radio, reset, submit, text, file, image, hidden），select，textarea，button节点

$(":text") 

所有textarea节点

$(":password") 

所有type为password的input节点

$(":radio") 

所有type为radio的input节点

$(":checkbox") 

所有type为checkbox的input节点

$(":submit") 

所有type为submit的input节点和button节点

$(":image") 

所有type为image的input节点

$(":reset") 

所有type为reset的input节点

$(":button") 

所有type为button的input节点和button节点

$(":file") 

所有type为file的input节点

$(":hidden") 

最初没有显示的元素（style为display:none;的div或type为hidden的input）

* 表单过滤器(http://api.jquery.com/category/selectors/form-selectors/)

$("input:enabled") 

所有没有disabled属性的集合

$("input:disabled") 

所有disabled属性为disabled的集合

$("input:checked") 

所有checked属性为checked（或被鼠标勾上的）的集合（通常是form的input type="checkbox"节点）（checkbox和radio按钮）

$("select option:selected") 

所有selected属性为selected（或被鼠标选中）的集合（通常是select的option节点）

el.is(":focus")

判断当前是否是焦点

* 属性读写（读取或修改标签属性、样式和文本或表单内容和选项）(http://api.jquery.com/category/attributes/)

* 修改标签属性(非"class")的值

var title = $("em").attr("title")

返回指定标签名（如"em"）的首个标签的属性（如"title"）的属性值。

$("img").attr({src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo"});

动态设置标签属性的值（注意IE的class属性需要使用.addClass(class)/.removeClass(class)）

$("button:gt(0)").attr("disabled","disabled");

设置指定标签集合的属性名和属性值

$("div").attr("id", function (arr) {return "div-id" + arr;}).each(function() {$("span", this).html("(ID = '<b>" + this.id + "</b>')");});

通过闭包动态设置标签属性的值，闭包参数arr是索引（旧版本的jQuery是arr[0]），返回值可以使用.each()和this。

$("button").click(function () {$(this).next().removeAttr("disabled").focus().val("editable now");});

删除指定标签的属性（后面可以继续操作）

* 修改标签class属性的值

$("p:last").addClass("selected");

把css的.selected样式应用在指定的标签上

$("p:even").removeClass("blue");

删除指定标签上的.blue样式

$("p").click(function () {$(this).toggleClass("highlight");});

翻转（应用或删除）标签上的highlight属性（一般用于交互动作的闭包内）

var count = 0; $("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);});

利用布尔值决定应用还是删除特定的css样式（一般用于交互动作的闭包内）

* 访问XHTML的html字符串

var htmlStr = $(this).html();

获取标签内的html字符串（相当于innerHTML），对XML无效，仅对XHTML有效。

$("div").html("<span class='red'>Hello <b>Again</b></span>");});

设置标签内的html字符串，对XML无效，仅对XHTML有效。

* 访问XML和XHTML的纯文本（指标签夹住的内容，包括里面嵌套的子标签）

$("div").text()

获取标签内的纯文本

$("p").text("<b>Some</b> new text.");$("input").val($("p").html());

设置标签内的纯文本（最终得到的html文本html()会对'<'和'>'进行转义）

* 访问表单的当前选择值

function displayVals() {var singleValues = $("#single").val();$("p").html("<b>Single:</b> " + singleValues);} $("select").change(displayVals);

动态获取<select>表单的当前选择项（一般用在交互动作的闭包内），如果表单的属性multiple="multiple"，则返回值是数组（一般写法是var multipleValues = $("#multiple").val() || [];）

$("input").val(text);$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);

动态设置表单元素（如文本框）的内容或选中表单元素（如单选框，复选框，单选按钮，多选按钮）的文本项（一般用在交互动作的闭包内）

* 新增

if($(this).hasClass("protected")){}

判断class属性是否等于某个值

$input.prop('checked')

获取选中集合中第一个元素的该属性的值（jQuery 1.6新增，不同于.attr()）

$para.prop("luggageCode", 1234);

指定属性

$para.removeProp("luggageCode");

删除属性

* 遍历（子选择器，或并集）(http://api.jquery.com/category/traversing/)

* 索引、条件过滤或条件判断，集合映射(http://api.jquery.com/category/traversing/filtering/)

$("div").eq(2).addClass("red");

索引（0至n-1）相等过滤

if($(this).hasClass("protected")){}

判断class属性是否等于某个值

$("div").css("background", "#c8ebcc").filter(".middle").css("border-color", "red");

条件过滤（保留选择器选中的集合）

$("div").css("background", "#b4b0da").filter(function(index) {return index == 1 || $(this).attr("id") == "fourth";}).css("border", "3px double red");

用闭包遍历，如果闭包返回的不是false就保留

if($(this).is(":first-child")){}

判断指定jQuery对象是否满足指定的选择器。

$("p").append($("input").map(function(){return $(this).val();}).get().join(", ") );

遍历相同类型的表单元素并用闭包映射为指定属性值的集合

$("div").not(".green, #blueone").css("border-color", "red");

相反条件过滤（删除选择器选中的集合）

$div.slice(start, end).css("background", "yellow");

返回指定索引（从0开始）范围内的集合

$("p span").last().addClass('highlight');

选中集合中最后一个元素

$("ul").has("li").addClass("full");

选中集合中的子节点符合特定选择器或DOM的所有元素

* 查找（全体子孙元素、兄弟元素、父级元素，或其选择器过滤）(http://api.jquery.com/category/traversing/tree-traversal/)

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

获取两个选择器的并集，后面的操作同时作用在.add()的选择器参数和前面的选择器。

var $kids = $(e.target).children();

获取所有子元素，参数可传入选择器（一般用于交互闭包）

$(e.target).closest("li")

最接近的子元素（一般用于交互闭包）

$("p").contents().not("[nodeType=1]").wrap("<b/>");

文本节点包含的所有子元素

$("p").find("span").css('color','red');

所有子孙元素中用选择器过滤

$("button[disabled]").next().text("this button is disabled");

获取下一个紧挨着的兄弟（平行）DOM元素，参数可传入选择器。

$curr = $curr.prev();

获取上一个紧挨着的兄弟（平行）DOM元素，参数可传入选择器。

$("div:first").nextAll().addClass("after");

获取后面所有兄弟（平行）DOM元素，参数可传入选择器。

$("div:last").prevAll().addClass("before");

获取前面所有兄弟（平行）DOM元素，参数可传入选择器。

var len = $(".hilite").siblings().css("color", "red").length;

            获取所有兄弟（平行）DOM元素，参数可传入选择器。

var parentTag = $(this).parent().get(0).tagName;

获取父级DOM元素，参数可传入选择器。

$("#term-2").nextUntil("dt").css("background-color", "red");

获取后面的兄弟（平行）DOM元素（不包括自己），直至遇到符合选择器的元素（即得到的结果不符合选择器的条件）。

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

获取最近的祖先节点

$('li.item-a').parents().css('background-color', 'red');

获取所有父节点

$("li.item-a").parentsUntil(".level-1").css("background-color", "red");

获取所有父节点，直至遇到符合选择器的元素（即得到的结果不符合选择器的条件）

$("#term-2").prevUntil("dt").css("background-color", "red");

获取前面的兄弟（平行）DOM元素（不包括自己），直至遇到符合选择器的元素（即得到的结果不符合选择器的条件）。

* 链式选择器(http://api.jquery.com/category/traversing/miscellaneous-traversal/)

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

取子选择器和父选择器的并集（如$()和.find()的结果的并集）。

$("p").showTags(0).find("span").showTags(1).css("background", "yellow").end().showTags(2).css("font-style", "italic");

丢弃所有子选择器，重置为最初的$()选择器。

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

获取两个选择器的并集，后面的操作同时作用在.add()的选择器参数和前面的选择器。

$("p").contents().not("[nodeType=1]").wrap("<b/>");

文本节点包含的所有子元素

* 操作(http://api.jquery.com/category/manipulation/)

* 内部单向插入(http://api.jquery.com/category/manipulation/dom-insertion-inside/)

$("p").append("<b>Hello</b>");

内容的后面添加html字符串

$("span").appendTo("#foo")

第一个选择器添加（移动）到第二个选择器内容的后面

$("p").prepend("<b>Hello </b>");

内容的前面添加html字符串

$("span").prependTo("#foo");

第一个选择器添加（移动）到第二个选择器内容的前面

$("div").html("<span class='red'>Hello <b>Again</b></span>");});

设置标签内的html字符串，对XML无效，仅对XHTML有效。

$("p").text("<b>Some</b> new text.");$("input").val($("p").html());

设置标签内的纯文本（最终得到的html文本html()会对'<'和'>'进行转义）

* 外部单向插入(http://api.jquery.com/category/manipulation/dom-insertion-outside/)

$("p").after("<b>Hello</b>");

标签后面添加html字符串

$("p").before("<b>Hello</b>");

标签前面添加html字符串

$("p").insertAfter("#foo");

第一个选择器添加（移动）到第二个选择器标签的后面

$("p").insertBefore("#foo"); 

第一个选择器添加（移动）到第二个选择器标签的前面

* 附近双向插入（环绕）(http://api.jquery.com/category/manipulation/dom-insertion-around/)

$("p").wrap("<div class='wrap'><b></b></div>");

用html字符串逐个包围目标标签（目标标签在内）

$("p").wrap($('#content'));

用第二选择器的标签逐个（移动并）包围目标标签（目标标签在内）

$("p").wrapAll("<div></div>");

用html字符串一次包围所有目标标签（目标标签在内）

$("p").wrapAll(document.createElement("div"));

用第二选择器的标签一次包围所有目标标签（目标标签在内）

$("p").wrapInner("<b></b>");

目标标签逐个包围指定的html字符串（目标标签在外）

$("p").wrapInner(document.createElement("b"));

目标标签逐个包围第二选择器标签（目标标签在外）

$("p").unwrap();

删除环绕的标签

* 替换(http://api.jquery.com/category/manipulation/dom-replacement/)

$(this).replaceWith("<div>" + $(this).text() + "</div>");

目标标签被替换为html字符串

$("<b>Paragraph. </b>").replaceAll("p");

用html字符串替换所有选择器的标签

* 删除(http://api.jquery.com/category/manipulation/dom-removal/)

$("p").empty();

删除选择器标签所有子要素、事件句柄和内部缓存数据。

$("p").remove();

删除选择器标签所有要素，可传入选择器参数

p = $("p").detach();

删除元素，类似.remove()，但保留相关的jQuery对象。

$("p").unwrap();

删除环绕的标签

* 复制(http://api.jquery.com/category/manipulation/copying/)

$("b").clone().prependTo("p");

复制出相同标签以便进行插入操作（此时这个复制对象成为当前目标）

$(this).clone(true).insertAfter(this);

复制出相同标签，true表示复制其事件句柄（此时这个复制对象成为当前目标）

* 类属性操纵（新增）(http://api.jquery.com/category/manipulation/class-attribute/)

$("p:last").addClass("selected");

把css的.selected样式应用在指定的标签上

$("p:even").removeClass("blue");

删除指定标签上的.blue样式

if($(this).hasClass("protected")){}

判断class属性是否等于某个值

$("p").click(function () {$(this).toggleClass("highlight");});

翻转（应用或删除）标签上的highlight属性（一般用于交互动作的闭包内）

* 通用属性（新增）(http://api.jquery.com/category/manipulation/general-attributes/)

var title = $("em").attr("title")

返回指定标签名（如"em"）的首个标签的属性（如"title"）的属性值。

$input.prop('checked')

获取选中集合中第一个元素的该属性的值（jQuery 1.6新增，不同于.attr()）

$("button").click(function () {$(this).next().removeAttr("disabled").focus().val("editable now");});

删除指定标签的属性（后面可以继续操作）

$para.removeProp("luggageCode");

删除属性

function displayVals() {var singleValues = $("#single").val();$("p").html("<b>Single:</b> " + singleValues);} $("select").change(displayVals);

动态获取<select>表单的当前选择项（一般用在交互动作的闭包内），如果表单的属性multiple="multiple"，则返回值是数组（一般写法是var multipleValues = $("#multiple").val() || [];）

$("input").val(text);$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);

动态设置表单元素（如文本框）的内容或选中表单元素（如单选框，复选框，单选按钮，多选按钮）的文本项（一般用在交互动作的闭包内）

* 层叠样式表（CSS）

(http://api.jquery.com/category/css/)

(http://api.jquery.com/category/manipulation/style-properties/)

* 读写style属性字符串的键值对

var color = $(this).css("background-color"); //style="background-color:blue;"

读取style属性字符串中CSS属性对应的值

$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });

用哈希表修改style属性字符串（多个CSS键值对）

$(this).css("color","red");

修改一对style属性字符串（单个CSS键值对）

* 位置（偏移）(http://api.jquery.com/category/offset/)

var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );

文档的偏移位置(.left和.top)

var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top );

相对于父节点的位置(.left和.top)，单位是像素

$('#out').text('scrollTop: '+$(this).scrollTop());

获取上下滚动（条）的位置

$('div').scrollTop(50);

设置上下滚动（条）的位置

$('#out').text('scrollLeft: '+$(this).scrollLeft());

获取左右滚动（条）的位置

$('div').scrollLeft(100);

设置左右滚动（条）的位置

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

获取最近的祖先节点

* 高度和宽度（例如：div {width: 200px;border: 3px solid black;padding: 2px;margin: 5px;}）(http://api.jquery.com/category/dimensions/)

$("p").height()

获取标签或文档的高度

$(this).height(30).css({cursor:"auto", backgroundColor:"green"});

设置标签的高度，参数以像素为单位

$("p").width()

获取标签或文档的宽度

$(this).width(30).css({cursor:"auto", "background-color":"blue"});

设置标签的宽度，参数以像素为单位

$('div').text('innerHeight: '+$('div').innerHeight());

获取内部（排除border但包含padding）高度

$('div').text('innerWidth: '+$('div').innerWidth());

获取内部（排除border但包含padding）宽度

$('div:last').text('outerHeight with margin: '+$('div:last').outerHeight({margin: true}));

获取外部（包括border、padding）高度，可指定{margin: true}参数，也可以缺省

$('div:last').text('outerWidth with margin: '+$('div').outerWidth({margin: true}));

获取外部（包括border、padding）宽度，可指定{margin: true}参数，也可以缺省

* 新增

$("p:last").addClass("selected");

把css的.selected样式应用在指定的标签上

$("p:even").removeClass("blue");

删除指定标签上的.blue样式

if($(this).hasClass("protected")){}

判断class属性是否等于某个值

$("p").click(function () {$(this).toggleClass("highlight");});

翻转（应用或删除）标签上的highlight属性（一般用于交互动作的闭包内）

$.cssHooks["someCSSProp"] = {get: function( elem, computed, extra ) {},set: function( elem, value ) {}};

代理css属性的设置和获取

* 事件(http://api.jquery.com/category/events/)

* 页面加载(http://api.jquery.com/category/events/document-loading/)

$(document).ready(function(){});

DOM准备好后执行闭包

* 事件处理（依附）(http://api.jquery.com/category/events/event-handler-attachment/)

$("p").bind("click", function(){alert( $(this).text() );});

添加事件句柄

function handler(event) {alert(event.data.foo);} $("p").bind("click", {foo: "bar"}, handler)

处理事件参数

$("form").bind("submit", function() {return false;})

取消提交事件（返回false）

$("form").bind("submit", function(event){event.preventDefault();});

只阻止默认操作

$("form").bind("submit", function(event){event.stopPropagation();});

只阻止冒泡（沿着DOM树向上传递）但不阻止默认操作

$("p").bind("myCustomEvent", function(e, myName){}); $("p").trigger("myCustomEvent", [ "John" ]);

处理和发送定制事件

$("div").one("click", function(){});

只处理一次事件（第二参数可以是data）

$("form:first").trigger("submit")

发送事件

$("p").click(function (event, a, b) {}).trigger("click", ["foo", "bar"]);

发送事件，传递参数给闭包

$("input").triggerHandler("focus");

发送事件（阻止默认动作；只应用第一个对象；阻止冒泡；返回最后的句柄返回的值而非jQuery对象）

$("#theone").unbind('click', aClick).text("Does nothing...");

删除事件句柄。

$("body").delegate("p", "click", function(){$(this).after("<p>Another paragraph!</p>");});

给特定根选择器下的子选择器的（现在和将来的）所有元素添加事件句柄。

$("body").undelegate("#theone", "click", aClick)

删除.delegate()指定的事件句柄。

var obj = {name: "John",test: function() {$("#log").append( this.name );$("#test").unbind("click", obj.test);}}; $("#test").click( jQuery.proxy( obj, "test" ) );

改变事件回调的上下文（this对象）

* 交互辅助函数((http://api.jquery.com/category/events/mouse-events/))

$("li").hover(function(){},function(){});

鼠标滑进和滑出事件

$("li").toggle(function(){},function(){});

鼠标多次点击事件

* 现场事件(http://api.jquery.com/category/events/event-handler-attachment/)

$("p").live("click", function(){});

添加live事件句柄（选择器对未来动态增加的DOM也有效）

$("#theone").die("click", aClick)

            删除live事件句柄

* 事件辅助函数（bind/trigger的缩写、快捷方式，可以在添加事件句柄后立刻执行无参数的事件）

(http://api.jquery.com/category/events/browser-events/)

(http://api.jquery.com/category/events/form-events/)

(http://api.jquery.com/category/events/keyboard-events/)

(http://api.jquery.com/category/events/mouse-events/)

$('#target').blur();

表单元素失去焦点

$('#target').blur(function() {alert('Handler for .blur() called.');});  

表单元素失去焦点的事件

$("select").change();

表单改变

$("select").change(function(){}).change();

表单改变事件

$("p").click()

鼠标点击

$("p").click(function(){})

鼠标点击事件

$("p").dblclick()

鼠标双击

$("p").dblclick(function(){})

鼠标双击事件

$("img").error();

加载错误

$("img").error(function(){});

加载错误事件

$("input").focus();

获取焦点

$("input").focus(function(){alert(this.type+" got focus.");});

获取焦点事件

$(window).keydown();

键盘按下

$(window).keydown(function(e){$("div").text(e.keyCode);return false;});

键盘按下事件

$("input").keypress();

键盘输入

$("input").keypress(function (e) {$("div").text(e.which);});

键盘输入事件

$(window).keyup();

键盘弹起

$(window).keyup(function(e){$("div").text(e.keyCode);});

键盘弹起事件

$(window).load(function(){});

加载事件

$(window).mousedown(function(){})

鼠标按下事件

$(window).mousemove(function(){})

鼠标移动事件

$(window).mouseout(function(){})

鼠标移出事件

$(window).mouseover(function(){})

鼠标移入事件

$(window).mouseup(function(){})

鼠标弹起事件

$(window).resize(function(){})

改变大小事件

$(window).scroll(function(){})

滚动事件

$(document).select();

文本选择

$(document).select(function () {});

文本选择事件

$("form").submit();

表单提交

$("form").submit(function(){});

表单提交事件

$(window).unload(function(){alert("Bye now!");});

页面关闭事件

$("p").focusin(function() {});

支持冒泡的得到焦点事件（检测父节点）

$("p").focusout(function() {});

支持冒泡的失去焦点事件（检测父节点）

$("div.enterleave").mouseenter(function(){});

鼠标进入（IE专用）

$("div.enterleave").mouseleave(function(){});

鼠标离开（IE专用）

* （新增）事件对象(http://api.jquery.com/category/events/event-object/)

var e = jQuery.Event("click");jQuery("body").trigger( e );

生成一个新的事件对象（不使用new），然后发送。

var e = jQuery.Event("keydown", { keyCode: 64 });

指定事件的属性

$("p").click(function(event) {alert( event.currentTarget === this );});  

冒泡阶段的当前对象（如果使用jQuery.proxy，this是提供的上下文对象）

$(this).bind('click', {index:i}, function(e){alert('my index is ' + e.data.index);});

读取bind传入的第二参数对象。

$("a").click(function(event){alert(event.isDefaultPrevented());event.preventDefault();alert(event.isDefaultPrevented());});  

判断是否执行preventDefault。

e.isImmediatePropagationStopped()

判断是否执行stopImmediatePropagation。

e.isPropagationStopped()

判断是否stopPropagation

$("p").bind("test.something", function(event) {alert( event.namespace );});

读取自定义事件的事件名（如"test.something"）

$(document).bind('mousemove',function(e){$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); });

读取相对于左上角的X坐标（iframe内）

$(document).bind('mousemove',function(e){$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); });

读取相对于左上角的Y坐标（iframe内）

$("a").click(function(event) {event.preventDefault();$('<div/>').append('default ' + event.type + ' prevented').appendTo('#log');});

阻止默认操作（例如URL的跳转）

$("a").mouseout(function(event) {alert(event.relatedTarget.nodeName);});  

如果是mouseout事件，是进入的对象，如果是mouseover，是移出的对象。

$("button").click(function(event) {return "hey";});$("button").click(function(event) {$("p").html( event.result );});

读取事件处理句柄返回的值，如果没有返回值则为undefined

$("p").click(function(event){event.stopImmediatePropagation();});$("p").click(function(event){$(this).css("background-color", "#f00");}); 

处理句柄剩下语句继续执行，但其他冒泡经过的注册处理句柄不执行。

$("p").click(function(event){event.stopPropagation();}); 

阻止冒泡和阻止执行父处理句柄。

$("body").click(function(event) {$("#log").html("clicked: " + event.target.nodeName);});

产生事件对象的DOM节点（最上层）

var last, diff;$('div').click(function(event) {if ( last ) {diff = event.timeStamp - last;$('div').append('time since last event: ' + diff + '<br/>');} else {$('div').append('Click again.<br/>');}last = event.timeStamp;}); 

点击时间（距离1970年1月1日的毫秒数）

$("a").click(function(event) {alert(event.type);}); 

返回事件的字符串（如"click"）

$('#whichkey').bind('keydown',function(e){$('#log').html(e.type + ': ' +  e.which );});

返回键盘和鼠标的按钮号

* 显示效果、动画(http://api.jquery.com/category/effects/)

* 基本(http://api.jquery.com/category/effects/basics/)

$("p").show(); //<p style="display: none">Hello</p>

显示隐藏的元素（style="display: none"或hide()）

$('#book').show('slow', function() {});

逐渐显示隐藏的元素，可以传入一个速度参数（毫秒单位或slow,normal,fast）和一个完成回调

$("p").hide();

隐藏显示的元素

$("p").hide("slow");

逐渐隐藏显示的元素，可以传入一个速度参数（毫秒单位或slow,normal,fast）和一个完成回调

$("p").toggle(); //<p>Hello</p> <p style="display: none">Good Bye</p>

翻转显示，根据显示的状态决定显示还是隐藏（通常目标选择器总是选中两个节点，一个隐藏一个显示）

var flip = 0;$("button").click(function () {$("p").toggle((flip++ % 2)==0);});

根据布尔值决定是显示还是隐藏元素。

$("p").toggle(2000);

逐渐翻转显示，可传入一个完成回调

* 滑动出现(http://api.jquery.com/category/effects/sliding/)

$("div").slideDown("slow");

向下滑动逐渐显示，可传入速度参数和一个完成回调

$("div").slideUp();

向上滑动逐渐隐藏，可传入速度参数和一个完成回调

$("p").slideToggle();

向下滑动逐渐显示或向上滑动逐渐隐藏，可传入速度参数和一个完成回调

* 透明度渐变(http://api.jquery.com/category/effects/fading/)

$("div:hidden:first").fadeIn("slow");

渐进显示，可传入速度参数和一个完成回调

$("p").fadeOut("slow");

渐出隐藏，可传入速度参数和一个完成回调

$(this).fadeTo("slow", 0.33);

渐变到指定透明度，可传入速度参数，透明度和一个完成回调

$("p:first").fadeToggle("slow", "linear");  $("p:last").fadeToggle("fast", function () {$("#log").append("<div>finished</div>");});

如果对象可视，执行fadeOut，否则执行fadeIn，可以接收三种参数：持续时间或速度类型，缓动类型，结束回调。

* 定制

(http://api.jquery.com/category/effects/custom-effects/)

(http://api.jquery.com/category/data/)

$("#block").animate({width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em", borderWidth: "10px"}, 1500 );

定制动画，第一参数是哈希表表示style的变化趋势，第二参数是持续时间（毫秒单位或slow,normal,fast）

$(".block").animate({"left": "+=50px"}, "slow");

动画移动

$(".block").animate({height: "toggle", opacity: "toggle"},"slow");

动画翻转

jQuery.extend(jQuery.easing,{easeInQuart: function (x, t, b, c, d) {return c*(t/=d)*t*t*t + b;},});

$(".block").animate({width: "toggle", opacity: "toggle"},"slow", "easeInQuart");

编写动画的回调插件，第三参数传入回调名，第四参数可传入完成回调

$(".block").animate({width: "toggle", opacity: "toggle"},{duration: "slow", easing: "linear",complete: function(){alert("completed!");},step: function(s){$("#steps").text(s)}});

定制动画，第一参数设置style的变化趋势，第二参数设置duration（持续时间）、easing（变化规律）、complete（完成回调）、step（进帧回调）、queue（是否保存在队列中）

$(".block").stop();

停止动画

var n = $("div").queue(); $("span").text("Queue length is: " + n.length);

动画队列（目标可能有多个动画同时进行）

$("div").queue(function () {$(this).removeClass("newcolor");$(this).dequeue();});

在动画队列后添加一个回调

$("div").queue([]);

设置动画队列（通常用[]置空）

$(this).dequeue();

从队列开头取出然后执行（用于queue回调内执行）

$("div").clearQueue();

删除队列中还没有运行过的所有条目（包括非动画的回调函数），与.stop(true)相似但不同。

$("div.first").slideUp(300).delay(800).fadeIn(400);

延时指定的毫秒数，可以传入队列名作为第二参数。

* 设置

(http://api.jquery.com/category/effects/custom-effects/)

(http://api.jquery.com/category/properties/)

jQuery.fx.off = !$(this).attr("checked");

是否全局关闭动画效果

jQuery.fx.interval = 100;

动画的帧间隔时间，默认13毫秒，用于调整动画帧率。不会影响浏览器的requestAnimationFrame属性。

* 异步JavaScript和XML（Ajax）(http://api.jquery.com/category/ajax/)

* Ajax请求

(http://api.jquery.com/category/ajax/low-level-interface/)

(http://api.jquery.com/category/ajax/shorthand-methods/)

$.ajax({type: "GET",url: "test.js",dataType: "script"});

异步读取脚本

$.ajax({type: "POST",url:"some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );}});

异步发送参数，成功后把接受数据传给回调

$.ajax({url: "test.html",cache:false,success: function(html){$("#results").append(html);}});

获取最新的html内容

var html = $.ajax({url: "some.php",async: false}).responseText;

同步读取数据，代替回调方式的闭包进行数据读取。

var xmlDocument = [create xml document]; $.ajax({url: "page.php",processData: false,data: xmlDocument,success: handleResponse});

发送XML格式的数据（让processData为false避免文本转换）

$("#links").load("/jquery/ #top-news div[class=inner]");

读取HTML文本后插入到DOM中，第一参数是URL，可以使用url、#id和选择器，可以传入请求的键值对作为第二参数，完成回调为第三参数。

$.get("test.php");

GET方式发送HTML请求

$.get("test.php", { name: "John", time: "2pm" } );

GET方式发送带键值数据的HTML请求

$.get("test.php", function(data){alert("Data Loaded: " + data);});

使用回调接收返回的数据

$.get("test.cgi", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});

带键值数据的HTML GET请求，使用回调接收返回的数据。

$.getJSON("test.js", function(json){alert("JSON Data: " + json.users[3].name);});

使用回调接收返回的JSON对象

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){alert("JSON Data: " + json.users[3].name);}); } );

带键值数据的HTML GET请求，使用回调接收返回的JSON对象（可以使用$().html()嵌入到HTML中）

$.getScript("test.js");

读取JavaScript脚本，然后执行

$.getScript("test.js", function(){alert("Script loaded and executed.");});

读取JavaScript脚本，然后执行，最后调用回调。

$.post('ajax/test.html', function(data) {$('.result').html(data);});

POST方式发送请求，通过回调获取返回的数据

$.post("test.php", { name: "John", time: "2pm" } );

POST方式发送带键值数据的HTML请求。

$.post("test.php", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});

POST方式发送带键值数据的HTML请求，用回调读取返回的数据

$.post("test.php", { "func": "getNameAndTime" },function(data){alert(data.name);console.log(data.time);}, "json");

POST方式发送带键值数据的HTML请求，用回调读取返回的数据，发送的数据格式为json

$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {});

在发送数据前和执行.ajax()前定制Ajax选项或修改原有选项或保存jqXHR。

* Ajax事件（全局的回调函数，可附在任意jQuery对象上，常用于日志输出）(http://api.jquery.com/category/ajax/global-ajax-event-handlers/)

$("#msg").ajaxComplete(function(event,request, settings){$(this).append("<li>Request Complete.</li>");});

ajax通信结束后执行回调

$("#msg").ajaxError(function(event, request, settings){$(this).append("<li>Error requesting page " + settings.url + "</li>");});

ajax通信错误后执行回调

$("#msg").ajaxSend(function(evt, request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});

ajax通信发送前执行回调

$("#loading").ajaxStart(function(){$(this).show();});

ajax通信发送开始时执行回调

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

ajax通信请求结束时执行回调

$("#msg").ajaxSuccess(function(evt, request, settings){$(this).append("<li>Successful Request!</li>");});

ajax通信请求成功时执行回调

* Ajax杂项

(http://api.jquery.com/category/ajax/helper-functions/)

(http://api.jquery.com/category/ajax/low-level-interface/)

$.ajaxSetup({url: "/xmlhttp/",global: false,type: "POST"});$.ajax({ data: myData });

设置Ajax请求的默认值，可反复设置（不影响全局的Ajax事件回调）

var str = $("form").serialize();

把表单数据转为=和&分隔的键值对字符串

var fields = $(":input").serializeArray();

把表单数据转为JSON对象

var params = { width:1680, height:1050 };var str = jQuery.param(params);

把对象转为=和&分割的URL参数字符串（类似.serialize()）

* 实用工具

(http://api.jquery.com/category/miscellaneous/)

(http://api.jquery.com/category/utilities/)

* 用户代理

(http://api.jquery.com/category/utilities/)

(http://api.jquery.com/category/properties/)

$.support

哈希表，指出jQuery在不同浏览器上的特性差别

jQuery.browser

哈希表，指出当前浏览器类型和版本信息

jQuery.browser.version

浏览器版本号

jQuery.boxModel

是否使用W3C CSS Box Model，除了IE是false外其余都是true

* 数组和对象操作

(http://api.jquery.com/category/miscellaneous/collection-manipulation/)

(http://api.jquery.com/category/utilities/)

jQuery.each(arr, function() {$("#" + this).text("My id is " + this + ".");return (this != "four");});

遍历数组，this为数组元素，返回false时停止遍历

jQuery.each(obj, function(i, val) {$("#" + i).append(document.createTextNode(" - " + val));});

遍历哈希表的键值对，第一参数为键，第二参数为值。

$.extend(object1, object2);

把第二对象合并到第一对象，如果键名相同，前者的键值对被后者的键值对取代

$.extend(true, object1, object2);

递归合并（如果值为对象，值对象也进行合并）

var empty = {}; var settings = $.extend(empty, defaults, options);

合并后保存在新的对象上，不修改原来两个对象

arr = jQuery.grep(arr, function(n, i){return (n != 5 && i > 4);});

用闭包过滤（返回true的话保留）后返回结果，不影响原数组，闭包的第一参数是元素值，第二参数是数组索引，grep的第三参数如果传入true则翻转过滤

var arr = jQuery.makeArray(document.getElementsByTagName("div")); arr.reverse();

把对象转为数组

arr = jQuery.map(arr, function(n, i){return (n.toUpperCase() + i);});

用闭包把数组映射为新的数组。如果返回值为null不映射，如果返回数组则拼接到结果数组中。

jQuery.inArray("John", arr)

返回最初找到的索引，如果找不到，返回-1

divs = jQuery.unique(divs);

删除数组的重复元素然后返回结果。

* 检查(http://api.jquery.com/category/utilities/)

$.isArray([])

判断是否数组，如果是对象则返回false。

jQuery.isFunction(objs[i])

判断是否函数

* 字符串操作(http://api.jquery.com/category/utilities/)

str = jQuery.trim(str);

删除字符串前后的空白，然后返回。

* 内部使用(http://api.jquery.com/category/internals/)

* 数据缓存

(http://api.jquery.com/category/miscellaneous/data-storage/)

(http://api.jquery.com/category/data/)

var id = jQuery.data(e.target);

指定元素的内部处理的ID

var adiv = $("#adiv").get(0);var value;value = jQuery.data(adiv, "blah");

从元素的缓存中取出键名对应的值

var adiv = $("div").get(0);jQuery.data(adiv, "test", { first: 16, last: "pizza!" });

从元素的缓存中保存键值对。

jQuery.removeData(adiv);

删除元素的缓存数据

jQuery.removeData(adiv, "test1");

通过键名删除元素缓存的键值对

* Ajax(http://api.jquery.com/category/miscellaneous/collection-manipulation/)

var params = { width:1680, height:1050 };var str = jQuery.param(params);

把对象转为=和&分割的URL参数字符串（类似.serialize()）

* 新增

(http://api.jquery.com/category/internals/)

(http://api.jquery.com/category/properties/)

$("ul").context  $("ul", document.body).context.nodeName

jQuery 1.3以后，获取jQuery对象上的DOM对象，主要用于插件。

jQuery.error = console.error;

重载error方法。jQuery.error是用于发送包含其第一参数字符串的异常

b = $('body'); if(b.jquery) {}; $.fn.jquery;

获取对象的jQuery版本字符串，可用于判断是否jQuery对象。

jQuery([]).pushStack( document.getElementsByTagName("div") ).remove().end();

把DOM元素集合压入jQuery堆栈

* （新增）插件(http://api.jquery.com/category/plugins/)

* 数据链接(http://api.jquery.com/category/plugins/data-link/)

var person = {};$("form").link(person);$("[name=firstName]").val("NewValue"); person.firstName;

把表单的修改绑定到特定的对象属性上

$("form").unlink(person);

移除表单的绑定

* 模板（把对象和数组渲染成HTML DOM）(http://api.jquery.com/category/plugins/templates/)

(TODO:现在仍处于beta阶段)

* （新增）延期对象（观察Ajax和动画的操作）(http://api.jquery.com/category/deferred-object/)

jQuery.Deferred()

创建延期对象。

$.get("test.php").always(function() {alert("$.get completed with success or error callback arguments"); });

不管成功还是失败都执行回调。

$.get("test.php").done(function(){alert("$.get succeeded");});

成功时执行回调。

$.get("test.php").done(function(){alert("$.get succeeded");}).fail(function(){alert("$.get failed!");});

失败时执行回调。

deferred.isRejected()

判断是否失败

deferred.isResolved()

判断是否成功

var defer = $.Deferred(),filtered = defer.pipe(function( value ) {return value * 2;});defer.resolve( 5 );filtered.done(function( value ) {alert( "Value is ( 2*5 = ) 10: " + value );});

成功过滤器，返回结果给.done的回调参数。

var defer = $.Deferred(),filtered = defer.pipe( null, function( value ) {return value * 3;});defer.reject( 6 );filtered.fail(function( value ) {alert( "Value is ( 3*6 = ) 18: " + value );});

失败过滤器，返回结果给.fail的回调参数。

var request = $.ajax( url, { dataType: "json" } ),chained = request.pipe(function( data ) {return $.ajax( url2, { data: { user: data.userId } } );});

串行执行ajax请求（链式任务）

function asyncEvent(){var dfd = new jQuery.Deferred();setTimeout(function(){dfd.resolve("hurray");}, Math.floor(Math.random()*1500));setTimeout(function(){dfd.reject("sorry");}, Math.floor(Math.random()*1500));return dfd.promise();}

$.when( asyncEvent() ).then(function(status){alert( status+', things are going well' );},function(status){alert( status+', you fail this time' );});

返回Promise对象（将来才得到真正的结果）

var obj = {hello: function( name ) {alert( "Hello " + name );}},defer = $.Deferred();defer.promise( obj );defer.resolve( "John" );

obj.done(function( name ){obj.hello( name );}).hello( "Karl" );

指定自定义的Promise对象（用于在.done()后链式调用）

deferred.reject(args)

手动执行失败句柄

deferred.rejectWith( context, [args] )

同reject，但指定this所指的对象

deferred.resolve( args )

手动执行成功句柄

deferred.resolveWith( context, [args] )

同resolve，但指定this所指的对象。

$.get("test.php").then(function(){ alert("$.get succeeded"); },function(){ alert("$.get failed!"); });

同时指定成功和失败句柄

var div = $( "<div />" );div.promise().done(function( arg1 ) {alert( this === div && arg1 === div );});

观察所有在jQuery对象上绑定的动作和动画完全结束，然后执行.done注册的句柄。

* （新增）工具（不包含上面重复的）(http://api.jquery.com/category/utilities/)

* 新增

jQuery.contains(document.documentElement, document.body);

判断第一参数的DOM是否包含第二参数DOM

jQuery.globalEval("var newVar = true;")

全局地执行JavaScript代码

jQuery.isEmptyObject({})

检查是否为没有属性的对象

jQuery.isPlainObject({}); console.log($.isPlainObject(document.location));

检查是否为纯对象（用{}和new Object创建，字符串字母值不是）

$.isWindow(window)

判断参数是否窗口

jQuery.isXMLDoc(document)

检查参数是否XML文档节点

var newArray = $.merge([], oldArray);

拼接两个数组并返回，但不改变参数。

jQuery.noop()

什么都不做，空函数。

jQuery.now()

当前时间，即(new Date).getTime()

var obj = jQuery.parseJSON('{"name":"John"}');alert( obj.name === "John" );

把JSON字符串转为JavaScript对象。

xmlDoc = $.parseXML( xml ),

把XML字符串转为XML文档对象。

jQuery.type(/test/)

返回参数的类名字符串

* （新增）数据（不包含上面重复的）(http://api.jquery.com/category/data/)

* 新增

jQuery.data(p, "testing", 123);$p.append(jQuery.hasData(p)+" "); jQuery.removeData(p, "testing");

判断是否有数据关联到jQuery对象上。

* （新增，TODO）现在仍处于beta阶段的API

* 模板(http://api.jquery.com/category/plugins/templates/)

 

（不完整，不准确，待修改）