jQuery API学习总结

前端 积累 javascript jQuery
前端
发布日期:   2016-12-11
文章字数:   36k
阅读时长:   140 分

jQuery，在工作中很常用，但是很多 API 或者使用这些 API 的注意事项也经常会忘记，因此写个博客总结一下，这样也能复习一下 jQuery API。主要参考了jQuery 中文文档,适用于 jQuery1.9~3.1 版本。

jQuery API 主要分为选择器、属性/CSS 相关（属性、CSS、尺寸、位置）、数据 data、DOM 操作、遍历和筛选、事件、效果、Ajax、jQuery 核心、实用工具、延迟对象、回调对象和其他一些杂项。

选择器

基本选择、层级选择、属性选择、子元素筛选这些和 CSS 基本一致。jQuery 还支持这些选择器：

基本筛选

:animated

注意事项 1: 如果您使用一个自定义的 jQuery 绑定一个没有效果模块，:animated 选择器会抛出一个错误；

注意事项 2: 因为:animated 是一个 jQuery 延伸出来的选择器，并不是的 CSS 规范的一部分，使用:animated 查询不能充分利用原生 DOM 提供的 querySelectorAll() 方法来提高性能。为了当使用:animated 的时候在现代浏览器上获得更佳的性能，首先使用纯 CSS 选择器选择元素，然后使用.filter(“:animated”)，其他非 CSS 规范选择器同理。

:eq(index)

要匹配元素的索引值，从 0 开始计数（由于 JavaScript 数组使用基于 0 的索引，而:nth-child(n)是基于 1 的索引的，以符合 CSS 规范），支持负值

:even

这是基于 0 的索引，所以:even 选择器是选择第一个元素，第三个元素，依此类推在匹配

:first

:first 伪类选择器相当于:eq(0)。它也可以写为:lt(1)。虽然:first 只匹配一个单独的元素，但是:first-child 选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

:gt()

:header

选择所有标题元素

:lang()

选择指定语言的所有元素。

:last

:lt()

:not()

.not()方法可以让代码更易读。而使用 :not() 通常会构建出一个非常复杂的选择器。所以大多数情况下，推荐使用 .not()方法。

:odd

:root

在 HTML 中，文档的根元素，和$(“:root”)选择的元素一样，永远是<html>元素

:target

如果文档的 URI 包含一个格式化的标识符，或 hash（哈希），然后:target 选择器将匹配 ID 和标识符相匹配的元素。例如，给定的 URI http://example.com/#foo， $( “p:target” )，将选择<p id=”foo”>元素。

内容筛选

:contains()

选择所有包含指定文本的元素。

:empty

选择所有没有子元素的元素（包括文本节点）。

注意：W3C 的建议 p 元素都至少有一个子节点，即使这个子节点是文字（见 http://www.w3.org/TR/html401/struct/text.html＃edef-P）。另一方面，其他一些元素始终是空的（即没有子节点）：例如input,img,br和hr。

:has()

选择元素其中至少包含指定选择器匹配的一个/种元素。

:parent

选择所有含有子元素或者文本的父级元素。这个正好和 :empty 相反。

可见性筛选

:hidden

:visible

元素可以被认为是隐藏的几个情况：

  • 他们的 CSS display 值是 none。
  • 他们是 type=”hidden”的表单元素。
  • 它们的宽度和高度都显式设置为 0。
  • 一个祖先元素是隐藏的，因此该元素是不会在页面上显示。

元素 visibility:hidden 或 opacity:0 被认为是可见的，因为他们仍然占据布局空间。在动画，隐藏一个元素，该元素被认为是可见的直到动画结束。
不在文档中的元素是被认为是不可见的;如果当他们被插入到文档中，jQuery 没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式。
jQuery 3 稍微修改了:hidden (以及:visible)的含义。 这个版本开始，如果一个元素没有任何布局盒子，那么它将被视为:hidden。例如，br 元素和没有内容的内联元素将不能通过:hidden 选择器被选择。

表单

:button

:checkbox

:checked

:disabled

:enabled

:focus

:file

:image

:input

:password

:radio

:reset

:selected

:submit

:text

属性/CSS 相关

属性

属性有.attr()，.prop()，.removeAttr()，.removeProp()，.val()这 5 个方法。

1 .attr()

获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

jQuery 的很多方法都是默认获取的时候为第一个元素的值，而写入或设置的时候为修改所有匹配的元素

1.1 .attr( attributeName )

获取匹配的元素集合中的第一个元素的属性的值。

根据 W3C 的表单规范 ，checked 属性是一个布尔属性，这意味着,如果这个属性（attribute）是目前存在，即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是”false”，相应的属性（property）为 true。这才是真正的所有布尔属性（attributes）。
checked 特性（attribute）值不会因为复选框的状态而改变，而 checked 属性（property）会因为复选框的状态而改变。因此，跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）：

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

除了 checked，对于其他的动态属性 selected，disabled 和 value 也应该使用 prop()方法

在 Internet Explorer 9 之前的版本，使用.prop()设置 DOM 元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有在 DOM 元素从文档中被移除之前使用 .removeProp() 方法。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data()方法。

1.2 .attr( attributeName, value )

value 类型: String or Number or Null。如果为 null， 指定的属性将被删除（就像.removeAttr()一样）

1.3 .attr( attributes )

attributes 类型: PlainObject，一个要设置的属性-值集合对象

1.4 .attr( attributeName, function(Integer index, String attr) )

这个函数返回用来设置的值。this 指向当前的元素。接收该元素在集合中索引位置（index）和 原来属性值（attr）作为参数。

注意 如果 setter 函数没有返回任何数据（例如：function(index, attr){})，属性的当前值返回值是 undefined，作为一个 getter 行为。实际上，如果不进行任何更改的 setter 函数不返回的东西。

警告： 当设置样式名（“class”）属性时，必须使用引号！

注意: 试图改变 由 document.createElement()创建的 input 或 button 的 type 属性，在 Internet Explorer 8 或更老的版本中将抛出一个例外。

2 .prop()

参见 attr().

禁用页面所有复选框

<script>
$("input[type='checkbox']").prop({
  disabled: true
});
</script>

3 .removeAttr( attributeName )

attributeName 类型: String，要移除的属性名,从 1.7 版本开始，它可以是一个空格分隔的属性列表。

注意: Internet Explorer 8， 9 ，和 11 中，使用.removeAttr()
删除一个内联 onclick 事件处理程序不会达到预期的效果，为了避免潜在的问题，使用 .prop()代替：

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);

4 .removeProp( propertyName )

若尝试移除 DOM 元素或 window 对象上一些内建的 属性（ property ） ，浏览器可能会产生错误。如果真的那么做了，那么 jQuery 首先会将 属性（ property ） 设置成 undefined ，然后忽略任何浏览器产生的错误。一般来说,只需要移除自定义的 属性（ property ） ，而不是移除内建的（原生的）属性（ property ）。

注意: 不要使用此方法来删除原生的属性（ property ），比如 checked, disabled, 或者 selected。这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为 false 代替。

5 .val()

5.1 .val()

当该集合中第一个元素是一个 select-multiple（即 select 元素设置了 multiple 属性），.val()返回一个包含每个选择项值的数组。在 jQuery 3.0 中， 如果没有选项被选中，它将返回一个空数组；在 jQuery 3.0 之前的版本中， 它将返回 null。

function displayVals() {
  var singleValues = $("#single").val();
  var multipleValues = $("#multiple").val() || []; //确保没有选项被选中时为[]
  $("p").html("<b>Single:</b> " +
              singleValues +
              " <b>Multiple:</b> " +
              multipleValues.join(", "));
}

$("select").change(displayVals);
displayVals();

对于选择框（select），复选框（checkbox）和单选按钮（radio button），您也可以使用:selected 和 :checked 选择器来获取值。

注意: 通过 .val() 方法从 <textarea> 元素中获取的值是不含有回车（\r）字符的。但是如果该值是通过 XHR 传递给服务器的，回车（\r）字符会被保留（或者是被浏览器添加的，但是在原始数据中并不包含回车（\r））。可以使用下面的 valHook 方法解决这个问题：

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};

5.2 .val( value )

value 类型: String or Number or Array，一个文本字符串,一个数字，或一个以字符串形式的数组来设定每个匹配元素的值。

val() 允许你传递一个元素值的数组。当使用在包含像, , 和 属于一个单选按钮组 ，还有) 和用户选中一个复选框）将被保留在克隆元素中。

像我们讨论.append()一样，通常我们将页面上一个元素插入到 DOM 里另立个地方，它会被从老地方移走（愚人码头注：不是复制）

但是我们如果需要的是复制而不是移除，我们可以像下面这样写代码：

$('.hello').clone().appendTo('.goodbye');

然而，元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个：

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
    $clone = $elem.clone( true )
      // Deep copy to prevent data sharing
      .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

在 jQuery 1.5，withDataAndEvents 可以选择性增强 deepWithDataAndEvents 复制元素的事件和数据的克隆的所有子元素。

注意: 使用.clone()可能产生 id 属性重复的元素的副作用，id 应该是唯一的。在可能的情况下，建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替。

当使用 .clone()克隆一组元素，并且这些克隆生成的元素尚未被添加到 DOM 中，那么当这些元素被插入到 DOM 中时，不能保证是按它们的原顺序被插入的。但是，可以像下面例子中提到的那样，保证顺序的正确性：

<!DOCTYPE html>
<html>
<head>
  <style>
  #orig, #copy, #copy-correct {
    float: left;
    width: 20%;
  }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="orig">
    <div class="elem"><a>1</a></div>
    <div class="elem"><a>2</a></div>
    <div class="elem"><a>3</a></div>
    <div class="elem"><a>4</a></div>
    <div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>

<script>
// sort order is not guaranteed here and may vary with browser
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone());

// correct way to approach where order is maintained
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end());
</script>

</body>
</html>

DOM 插入, 包裹

有三个方法：.wrap()，.wrapAll()，.wrapInner()

1 .wrap()

在集合中匹配的每个元素周围包裹一个 HTML 结构。

.wrap( wrappingElement )

wrappingElement
类型: Selector 或 htmlString 或 Element 或 jQuery，
一个选择器，元素，HTML 字符串，或 jQuery 对象指定的 html 结构环绕包裹的匹配元素。 当你传递一个包含多个元素一个 jQuery 集合， 或选择器的匹配多个元素时， 第一元素将被使用。

.wrap( function )
function
类型: Function( Integer index ) => String 或 jQuery，
一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。接受的 index 参数表示匹配元素在集合中的索引位置。该函数内的 this 指向集合中的当前元素。

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

使用一个嵌套深度为两层 div 的 jQuery 对象来包裹所有的段落。注意，这并不会移动用于包裹的对象，只是将克隆后的对象用于包裹。

<!DOCTYPE html>
<html>
<head>
  <style>

  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>
<script>$("p").wrap($(".doublediv"));</script>

</body>
</html>

2 .wrapAll()

.wrapAll( wrappingElement )

wrappingElement

类型: Selector 或 htmlString 或 Element 或 jQuery

一个选择器，元素，HTML 字符串，或 jQuery 对象指定的 html 结构环绕包裹的匹配元素。

.wrapAll( function )

function

类型: Function() => String 或 jQuery，

一个回调函数，返回的 HTML 内容或 jQuery 对象将包裹所有匹配的元素。函数内的 this 指向集合中的第一个元素。在 jQuery 3.0 之前，回调函数错误地调用集合中的每一个元素并且接收所述集合中这个元素的索引位置作为参数。

.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个 DOM 结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

为 span 标签包裹一个对象树。注意，任何 span 之间的元素都不会被包裹，例如例子中使用的 (红色文本)。即使是 span 之间的空格也不会被包裹。可以查看原始 HTML 的源代码。

<!DOCTYPE html>
<html>
<head>
  <style>

  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>
<script>$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");</script>

</body>
</html>

3 .wrapInner()

注意: 当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。下面是一些正确的例子：

$(elem).wrapInner("<div class='test' />");
$(elem).wrapInner("<div class='test'></div>");
$(elem).wrapInner("<div class=\"test\"></div>");

DOM 插入, 内部插入

有.append()，.appendTo()，.prepend()，.prependTo()，.html()，.text()

1 .append()

.append( content [, content ] )

content
类型: String, Element, jQuery，
DOM 元素，文本节点，元素和文本节点的数组，HTML 字符串，或者 jQuery 对象，用来插在每个匹配元素里面的末尾。

content
类型: String, Element, Array, jQuery，
一个或多个 DOM 元素，文本节点，元素和文本节点的数组，HTML 字符串，或 jQuery 对象插入到每个匹配元素的末尾。

.append( function(index, html) )

function(index, html)
类型: Function()，
一个返回 HTML 字符串，DOM 元素（或多个），文本节点（或多个），jQuery 对象的函数，该字符串用来插入到匹配元素的末尾。接收 index 参数表示元素在匹配集合中的索引位置和 html 参数表示元素上原来的 HTML 内容。在函数中 this 指向元素集合中的当前元素。

如果一个被选中的元素被插入到另外一个地方，这是移动而不是复制。

和其他添加内容的方法类似， 例如.prepend() 和 .before(), .append() 还支持传递输入多个参数。支持的输入包括 DOM 元素，jQuery 对象，HTML 字符串，DOM 元素的数组。

.append() 可以接受任何数量的额外的参数

设计上，任何 jQuery 的构造或方法，都接受一个 HTML 字符串（作为参数） - jQuery(),.append(), .after()等 -可以潜在地执行代码。这可能会出现注入 script 标签或使用 HTML 属性执行的代码（例如，）。不要使用这些方法来插入来自不受信任来源的内容，如网址查询参数，Cookie 或表单输入获得的字符串。这样做可能会引起跨站点脚本（XSS）漏洞。将内容添加到文档之前删除或避免用户任何输入内容。

jQuery 没有正式的支持 SVG。在 SVG 文档上使用 jQuery 方法，除非该方法有明确的说明，否则可能会导致意外的行为。例如 jQuery 3.0 中支持 SVG 的方法有 addClass 和 removeClass。

2 .appendTo()

然而，如果有多个目标元素，插入元素的克隆副本被创建到每个目标元素，而不是只插入到最后一个目标元素，并且新的集合（原始元素加克隆元素）被返回。

在 jQuery 1.9 以前，追加到单个元素的情况下没有创建一个新的集合，而是返回原来的集合，当被用与数目不详的元素时，使得它难以可靠地使用.end()方法。

3 .prepend()

4 .prependTo()

5 .html()

5.1 .html()

这种方法使用浏览器的 innerHTML 属性。有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如，如果属性值只包含字母数字字符，Internet Explorer 有时丢弃包裹属性值的引号。

5.2 .html( htmlString )

5.3 .html( function(index, oldhtml) )

这个 .html() 方法对 XML 文档无效.

我们可以使用 .html() 来设置元素的内容，这些元素中的任何内容会完全被新的内容取代。此外，用新的内容替换这些元素前，jQuery 从子元素删除其他结构，如数据和事件处理程序。（愚人码头注：这样可以防止内存溢出。）

这种方法使用浏览器的 innerHTML 属性。有些浏览器可能不完全复制所提供的 HTML 源代码生成 DOM。例如，Internet Explorer 的版本 8 之前转换所有链接的 href 属性为绝对 URL 路径，和 Internet Explorer 第 9 版之前，不增加一个单独的兼容层的情况下，将无法正确处理 HTML5 元素。

要设置一个<script>元素的内容， 其不包含 HTML， 使用的 .text()方法，而不是.html()。所以在定义在 script 标签中的模板应该用.html()方法获取

注意:在 Internet Explorer 中，包括第 9 版， 设置 HTML 元素的文本内容可能会破坏其子节点的文本节点，结果导致子节点的文本节点从文档中被删除。如果你想保留这些 DOM 元素的引用，需要他们将保持不变，请使用.empty().html(string)来代替.html(string)，以便从文档中删除元素之前的元素被分配到新的字符串

6 .text()

6.1 .text()

和 .html() 方法不同， .text() 在 XML 和 HTML 文档中都能使用。.text() 方法返回一个字符串，包含所有匹配元素的合并文本。 （由于在不同的浏览器中的 HTML 解析器的变化，返回的文本中换行和其他空白可能会有所不同。）

.text() 方法不能使用在 input 元素或 scripts 元素上。 input 或 textarea 需要使用 .val() 方法获取或设置文本值。得到 scripts 元素的值，使用.html()方法

从 jQuery 1.4 开始， .text()方法返回文本内容和作为元素节点的 CDATA 节点。

6.2 .text( text )

text
类型: String or Number or Boolean,
用于设置匹配元素内容的文本。当提供的是一个数值或布尔值得时候，那么将被转换成一个字符串表现形式，提供给这个方法。

6.3 .text( function(index, text) )

function(index, text)
类型: Function(),
用来返回设置文本内容的一个函数。接收元素的索引位置和文本值作为参数。

DOM 插入, 外部插入

有.after()，.before()，.insertAfter()，.insertBefore()

1 .after()

1.1 .after( content [, content ] )

1.2 .after( function )

function 类型: Function( Integer index ) => htmlString or Element or jQuery

一个返回 HTML 字符串，DOM 元素（或多个），文本节点（或多个），或 jQuery 对象的函数，返回的内容用来插入到集合中每个匹配元素的后面（愚人码头注：外部插入）。 接收元素集合中该元素的索引位置作为一个参数（index 参数）。在函数中 this 指向元素集合中的当前元素。

1.3 .after( function-html ),1.10 版本添加

function 类型: Function( Integer index, String html ) => htmlString or Element or jQuery
一个返回 HTML 字符串，DOM 元素，jQuery 对象的函数，返回的内容用来插入到集合中每个匹配元素的后面（愚人码头注：外部插入）。接收元素集合中该元素的索引位置（愚人码头注：index 参数）和元素的原来 HTML 值（愚人码头注：html 参数）作为参数。在函数中 this 指向元素集合中的当前元素。

在此之前的 jQuery1.9， 如果该集合中的第一个节点没有在文档中， .after()将尝试添加 或 在当前的 jQuery 集合改变节点，在这种情况下返回一个新的 jQuery 集合，而不是原来的集合。该方法可能会或可能不会返回一个新的结果，这取决于它的参数个数或参数的连贯性！ 从 jQuery1.9 开始，.after(), .before(), 和 .replaceWith()总是返回原始未修改的集合。 试图在一个没有父级元素的节点上使用这些方法是没有效果的，也就是说，集合和它包含的节点都不会改变。

2 .before()

3 .insertAfter()

4 .insertBefore()

DOM 移除

有.detach()，.empty()，.remove()，.unwrap()

1 .detach()

.detach( [selector ] )，从 DOM 中去掉所有匹配的元素。

.detach() 方法和.remove()一样, 除了 .detach()保存所有 jQuery 数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM 时，这种方法很有用。

2 .empty()

从 DOM 中移除集合中匹配元素的所有子节点。

为了避免内存泄漏，jQuery 先移除子元素的数据和事件处理函数，然后移除子元素。

如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），请使用.detach()代替

3 .remove()

.remove( [selector ] )，将匹配元素集合从 DOM 中删除。

和 .empty()相似。.remove() 将元素移出 DOM。 当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的 jQuery 数据。要删除的元素不删除数据和事件的情况下，使用.detach()来代替。

4 .unwrap()

将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

4.1 .unwrap()

4.2 .unwrap( [selector ] )，添加版本 3.0

selector 类型: String，
一个选择器，用来检查匹配的父元素。如果一个元素的父不匹配该选择器，该元素将不会被解开。 (愚人码头注：该签名官网还未提供示例，可以查看我写的简单示例：http://jsbin.com/rufaqu/edit?html,css,js,output)

.unwrap()删除元素的父级元素。和 .wrap()的功能相反。匹配的元素（以及他们的兄弟元素，如果有的话）取代他们的父母在 DOM 结构。

DOM 替换

有.replaceAll()，.replaceWith()

1 .replaceAll()

.replaceAll( target )，用集合的匹配元素替换每个目标元素。

.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 。

2 .replaceWith()

.replaceWith()方法，和大部分其他 jQuery 方法一样，返回 jQuery 对象，所以可以和其他方法链接使用， 但是需要注意的是： （original）原始 jQuery 对象被返回。该对象指向已经从 DOM 中被移除的对象，而不是指向已经取代了它的新元素。

遍历

筛选

有.eq(),.filter(),.first(),.has(),.is(),.last(),.map(),.not(),.slice()

1 .eq()

.eq( index ),支持负值，负值从最后一个元素倒数

2 .first()

3 .last()

4 .has()

.has( selector )

.has( contained )

contained
类型: Element，
用于匹配元素的 DOM 元素。

5 .is()

5.1 .is( selector )

5.2 .is( function(index) )

5.3 .is( jQuery object )

5.4 .is( element )

6 .filter()

参数种类同上

7 .not()

从匹配的元素集合中移除指定的元素。参数同理

8 .map()

.map( callback(index, domElement) )

如果你想处理一个简单的数组或对象中，使用 jQuery.map()代替。

由于返回值是一个 jQuery 包裹的数组，所以通常会使用 get()方法将其转换成普通的数组。

.map()方法特别适用于获取或设置元素集合中的值,如下获取一组 checkbox 的值

$(':checkbox').map(function() {
  return this.id;
}).get().join();

在回调函数中，this 指向每次迭代中的当前 DOM 元素。该函数可以返回一个单独的数据或数据数组，并在结果集合中插入。如果数组返回，数组中的元素插入到集合。如果函数返回 null 或 undefined ，没有元素将被插入。

将一组 div 等高：

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 40px; float:left; }
input { clear:left}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<input type="button" value="equalize div heights">

<div style="background:red; height: 40px; "></div>
<div style="background:green; height: 70px;"></div>
<div style="background:blue; height: 50px; "></div>


<script>
$.fn.equalizeHeights = function() {
  var maxHeight = this.map(function(i,e) { //this为实例，即jquery对象
    return $(e).height();
  }).get();

  return this.height( Math.max.apply(this, maxHeight) );
};

$('input').click(function(){
  $('div').equalizeHeights();
});

</script>

</body>
</html>

9 .slice()

.slice( start [, end ] )

根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。

jQuery 的.slice()方法是仿照的 JavaScript 数组的.slice()方法。其中的一个功能就是允许传入负的 start 和 end 参数。如果传递的是负数，那么下标位置是从结尾开始的，而不是从起始位置开始。

各种遍历

.add()，.contents()，.each()，.end()

1 .add()

创建一个新的 jQuery 对象 ，元素添加到匹配的元素集合中。

1.1 .add( selector )

1.2 .add( elements )

1.3 .add( html )

1.4 .add( jQuery object )

1.5 .add( selector, context )

2 .contents()

获得匹配元素集合中每个元素的子元素，包括文字和注释节点。

给定一个 jQuery 对象，表示一个 DOM 元素的集合，.contents()方法允许我们通过 DOM 树中查找集合中的直接子元素，并根据匹配的元素创建一个新的 jQuery 对象。.contents()和.children()方法类似，只不过前者包括文本节点和注释节点，以及 jQuery 对象中产生的 HTML 元素。请注意，虽然这种方式可以传递文本节点和注释节点给一个 jQuery 集合，但是大多数操作不会支持他们。少数几个支持的操作将在他们的 API 文档页面中有一个明确的说明。

如果 iframe 与主页同域，.contents()方法也可用于获取 iframe 中的文件内容。

3 .each()

遍历一个 jQuery 对象，为每个匹配元素执行一个函数。

我们可以通过返回 false 以便在回调函数内中止循环。

注意: jQuery 的方法，返回一个 jQuery 对象遍历 jQuery 集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的.each()方法：

4 .end()

终止在当前链的最新过滤操作，并返回匹配的元素的以前状态。

大多数 jQueryDOM 遍历 方法来操作 jQuery 对象实例，并创建一个新的对象，匹配一个不同的 DOM 元素集合。当发生这种情况时，实际上是新的元素集合被压入到对象内部维护的栈中。每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时，我们可以使用 end() 进行出栈操作，来返回栈中的前一个状态。

树遍历

有.addBack()，.children()，.find()，.closest()，.parent()，.parents()，.parentsUntil()，.next()，.nextAll()，.nextUntil()，.prev()，.prevAll()，.prevUntil()，.siblings()

1 .addBack()

.addBack( [selector ] )

添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。

如上所述在讨论中的.end()， jQuery 对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个 DOM 遍历方法被调用时，新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合，.addBack() 可以提供帮助。

$('li.third-item').nextAll().addBack()

.css(‘background-color’, ‘red’);

2 .children()

.children()方法允许我们通过在 DOM 树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的 jQuery 对象。.find()和.children()方法是相似的，但后者只是针对向下一个级别的 DOM 树。还要注意的是和大多数的 jQuery 方法一样，.children()不返回文本节点;让所有子元素包括使用文字和注释节点，建议使用.contents()。

3 .find()

.find( selector )

.find( element ) 元素或 jQuery 对象

4 .closest()

从元素本身开始，在 DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。

.parents()和.closest()方法类似，它们都在 DOM 树遍历了。两者之间的差异，尽管细微，是重要的：

  • .closest()开始于当前元素，.parents()开始于父元素
  • .closest()在 DOM 树中向上遍历，直到找到与提供的选择器相匹配的元素，.parents()向上遍历 DOM 树到文档的根元素，每个祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤
  • .closest()返回包含零个或一个元素的 jQuery 对象，.parents()返回包含零个，一个或多个元素的 jQuery 对象

5 .parent()

6 .parents()

.parents()和.parent()方法是相似的，但后者只是进行了一个单级的 DOM 树查找（愚人码头注：也就是只查找一层，直接的父元素，而不是更加上级的祖先元素）。此外，$( “html” ).parent()方法返回一个包含document的集合，而$( “html” ).parents()返回一个空集合。

7 ..parentsUntil()

8 .next()

9 .nextAll()

10 .nextUntil()

11 .prev()

12 .prevAll()

13 .prevUntil()

14 .siblings()

事件

浏览器事件

1 .resize()

1.1 .resize( handler(eventObject) )

1.2 .resize( [eventData ], handler(eventObject) )

1.3 .resize()

这个函数的前两个用法是 .bind(‘resize’, handler) 的快捷方式，第 3 个不带参数的用法是 .trigger(‘resize’) 的快捷方式。

当浏览器 window 的尺寸改变时，window 元素上绑定的 resize 事件将被触发

2 .scroll()

当用户在元素内执行了滚动操作，就会在这个元素上触发 scroll 事件。它适用于 window 对象，但也可以是可滚动 frames 与 CSS overflow 属性设置为 scroll 的元素（或 auto 时，元素的显示高度小于其内容高度）

每当元素的滚动位置的变化时，该元素就会触发 scroll 事件，不管什么原因。鼠标点击或拖动滚动条，拖动里面的元素，按箭头键，或使用鼠标的滚轮都可能导致触发此事件。

文档加载

1 jQuery.holdReady()

暂停或恢复.ready() 事件的执行。

jQuery.holdReady( hold )

hold 类型: Boolean

指示是否暂停或恢复被请求的 ready 事件

在$.holdReady()方法允许调用者延迟 jQuery 的 ready 事件。这种先进的功能，通常会被用来允许在 ready 事件发生之前，动态加载其它的 JavaScript，例如 jQuery 插件，即使 DOM 可能已经准备就绪。该方法必须在文档早期被调用，例如，在 中加载完 jQuery 脚本之后，立刻调用该方法。如果在 ready 事件已经被调用后再调用该方法，将不会起作用。

为了延迟 ready 事件，首先要调用 $.holdReady(true)，当 ready 事件准备执行时，再调用 $.holdReady(false) 。注意，在 ready 事件中可以设置多个 hold。每一个都对应一次 $.holdReady(true) 调用。直到所有的 hold 都被释放，也就是调用了对应数量的 $.holdReady(false)之后，并且满足正常的文档 ready 条件时，ready 事件才会被真正执行。（见 ready 的更多信息。）)

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

2 .ready()

当 DOM 准备就绪时，指定一个函数来执行。

大多数浏览器提供了 DOMContentLoaded 事件形式的类似功能。 然而，jQuery 的 .ready() 方法的不同之处在于它是一个重要并且有效的方法：在代码调用.ready( handler )之前，如果 DOM 已经准备就绪并且浏览器已经触发 DOMContentLoaded，handler 处理函数仍然会被执行。 相反，如果 DOMContentLoaded 事件侦听器在这个事件触发后才被添加进来，那么这个 DOMContentLoaded 事件的处理程序将永远不会被执行。

浏览器还提供了 window 对象上的 load 事件。当这个事件触发时候，表明该网页上的所有资源已加载，包括图像。此事件可以使用 jQuery 的$( window ).on( “load”, handler )监听。当代码依赖加载的资源情况下，（例如，必需知道图像的尺寸时），那么代码应放置在一个 load 事件的处理程序中。

值得注意的是，虽然 DOM 准备就绪（ready）总是在页面被完全加载之前，但是在已经生效执行的 .ready() 处理程序代码中绑定 load 事件侦听器，通常是不安全的。例如，在页面加载后，可以使用一些方法动态加载脚本，如$.getScript() 。虽然动态加载的脚本中的 .ready() 处理程序始终会被执行， 但是在动态加载脚本中的 window 的 load 事件已经触发过了，所以那些 load 事件监听器将永远不会运行。

jQuery 提供了几种方法来绑定函数，当 DOM 已准备就绪时，绑定的函数将会运行。在 jQuery 3.0 中，只建议使用第一种语法（愚人码头注：即 $( handler )）; 其他语法仍然能正常工作，但已被标记为弃用（愚人码头注：将来的某个版本会被删除）。$(document).on( “ready”, handler ),从 jQuery 1.8 开始已被标记为弃用，在 jQuery 3.0 中已经被删除。请注意。

当$快捷方式不再可用时，$.noConflict()可以用于避免命名空间冲突。然而，传递给.ready() 的处理函数可以传递一个引用 jQuery 对象的参数。这使得处理程序中能够使用 jQuery 对象，例如，用作$,这样就可以不用关心它的别名：

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // 在这个代码块中可以像往常一样使用 $ ;实际的jQuery 对象是 jq2
});

事件绑定

1 .bind()

在 jQuery 3.0 中，.bind()已被标记为弃用。从 jQuery 1.7 开始，.on() 方法是将事件处理程序绑定到文档（document）的首选方法。所以我们不建议使用该方法。

2 .delegate()

在 jQuery 3.0 中，.delegate()已被标记为弃用。从 jQuery 1.7 开始，它已经被.on()方法取代。所以我们不建议使用该方法。

3 .on()

3.1 .on( events [, selector ] [, data ], handler(eventObject) )

events
类型: String，
一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”。

selector
类型: String，
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。，

data
类型: Anything，
当一个事件被触发时，要传递给事件处理函数的 event.data。

handler(eventObject)
类型: Function()，
事件被触发时，执行的函数。若该函数只是要执行 return false 的话，那么该参数位置可以直接简写成 false。

3.2 .on( events [, selector ] [, data ] )

events
类型: PlainObject，
一个对象，键是由一个或多个由空格分隔的事件类型及可选的名字空间，值是这些事件类型所对应的事件处理函数。

selector
类型: String，
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

data
类型: Anything，
当一个事件被触发时，要传递给事件处理函数的 event.data。

（1）Event names and namespaces（事件名称和命名空间）

事件名称可以添加指定的 event namespaces（命名空间） 来简化删除或触发事件。例如，”click.myPlugin.simple”为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理，可以用.off(“click.myPlugin”) 或 .off(“click.simple”)删除绑定到相应元素的 Click 事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。命名空间类似 CSS 类，因为它们是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字空间是供 jQuery 使用的。

在.on()方法的第二种用法中，events 参数是一个 JavaScript 对象或者键值对。键等同于 events 参数，用空格分隔的事件名称字符串和可选命名空间。每个键的值是一个函数（或 false 的值），相当于 handler 参数，但是该值并不是方法中的最后一个参数。在其它方面，这两种形式在下面描述的内容中其行为都是相同的。

（2）Direct and delegated events（直接和委托的事件）

除了可以给未创建的后代元素绑定事件外，代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。

注意: 委托事件不能用于 SVG.

（3）The event handler and its environment（事件处理程序和它的环境）

默认情况下，大多数事件的冒泡从最初的 event target（目标元素） 开始的，直到 document 元素。每个元素都沿着 DOM 层级这条路，jQuery 会调用任何匹配的已被绑定的事件处理程序。一个处理程序可以调用的 event.stopPropagation()防止事件向上冒泡文档树（从而防止这些元素的处理程序运行）。任何绑定到当前元素上的其他处理程序都将运行，为了防止这种情况，可以调用 event.stopImmediatePropagation()。（绑定在元素上的事件被调用的顺序和它们被绑定的顺序时一样的。 ）

类似地，一个处理程序可以调用的 event.preventDefault()取消浏览器默认操作行为。

调用 event.stopPropagation() 和 event.preventDefault()会从一个事件处理程序会自动返回 false。也可以直接将 false 当作 handler 的参数，作为 function(){ return false; } 的简写形式。

当 jQuery 的调用处理程序时，this 关键字指向的是当前正在执行事件的元素。对于直接事件而言，this 代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector 相匹配的元素。(注意，如果事件是从后代元素冒泡上来的话，那么 this 就有可能不等于 event.target。)若要使用 jQuery 的相关方法，可以根据当前元素创建一个 jQuery 对象，即使用 $(this)。

（4） Passing data to the handler（将数据传递到处理程序）

如果 data 参数给.on()并且不是 null 或者 undefined，那么每次触发事件时，event.data 都传递给处理程序。data 参数可以是任何类型，但如果是字符串类型时，那么 selector 参数必须提供，或明确地传递 null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值。

jQuery 的 1.4 以后 ，相同的事件处理程序可以多次绑定到一个元素。这对于使用 event.data 功能，或者在闭包中使用唯一的数据时是特别有用的。例如：

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

按一下按钮时，上面的代码会产生两个不同的警告（alert）。

除了可以向 .on() 方法传入 data 参数外，还可以向 .trigger() 或 .triggerHandler() 中传入该参数。 这种方式提供数据（Data）被传递给事件处理程序的 Event 对象内，作为进一步的参数。 如果传递给.trigger() 和 .triggerHandler()的第二个参数是一个数组， 数组中的每个元素将作为事件处理程序的单独参数。

（5）Event performance（事件性能）

对于高频率事件，可以按如下的办法提高事件的性能：

  • 减少事件处理函数中的工作量；
  • 对于在事件处理函数中要用到的信息做好缓存而不是再重新计算一次；
  • 或使用 setTimeout 限制的页面更新的实际次数。

为了获得更好的性能，在绑定代理事件时，绑定的元素最好尽可能的靠近目标元素。避免在大型文档中，过多的在 document 或 document.body 上添加代理事件。

若代理事件的选择器使用了过于复杂的形式，特别是使用了分层选择器的情况，虽然说这样做会大大的降低性能，但是对于大多数应用而言，它的速度依然是足够快的。通过为寻找更合适的元素绑定事件的方法，就可以很简单的避免使用分层选择器的情况。

（6）Additional notes（其他注意事项）

虽然不建议，伪类事件名称”hover”可以作为”mouseenter mouseleave”的缩写使用。不要与 接受两个函数的.hover()方法混淆，这里只用一个处理函数绑定到伪类事件名称”hover”;处理程序应该检查的 event.type 以确定是否是 mouseenter 或 mouseleave 事件。

jQuery 的事件系统需要一个 DOM 元素可以通过元素的属性附加数据，使事件就可以被跟踪和传递。object, embed, 和 applet 元素不能绑定数据，因此不能有 jQuery 的事件绑定。

W3C 指定明确指定 focus 和 blur 事件没有冒泡，但是 jQuery 定义的跨浏览器的 focusin 和 focusout 事件，并且可以冒泡。当 focus 和 blur 绑定委派的事件处理程序时，jQuery 分析名称，并提供将他们分别交付给 focusin 和 focusout。为了保持一致性和清晰度，使用冒泡事件类型的名称。

在所有的浏览器，load ，scroll, 和 error 事件(例如, 在一个 元素上)不会冒泡。在 Internet Explorer 8 和更低，paste 和 reset 事件不会冒泡，这样的事件是不支持委派使用，但若事件处理函数是直接绑定在产生事件的元素上的话，是可以使用这些事件的。

window 对象上的 error 事件使用非标准的参数和返回值约定，所以 jQuery 不支持该事件。作为替代，直接用 window.onerror 属性分配一个处理函数。

当事件被首次触发时，处理函数列表才会被设置到元素上。当前元素上添加或删除事件处理函数不会立即生效，直到下一次的事件被处理。 为了避免任何后续事件处理函数在一个元素的事件处理函数中执行，调用 event.stopImmediatePropagation() 这种行为违反了W3C 的事件规范。 为了更好地了解这种情况下，考虑下面的代码：

var $test = $( "#test" );

function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}

function handler2() {
  console.log( "handler2" );
}

$test.on( "click", handler1 );
$test.on( "click", handler2 );

在上面的代码，handler2 第一次无论如何都会被执行，即使使用.off()删除。 然而，该处理函数在下一次 click 事件被触发时将不执行。（愚人码头注：查看代码运行效果：http://jsfiddle.net/feiwen8772/dgxru81d/）

（7）一些事例

传递一个数组给.trigger()的事件处理程序，作为第二个参数。

$( "div" ).on( "click", function( event, salutation, name ) {
  alert( salutation + ", " + name );
});
$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );

添加并触发自定义事件（非浏览器事件）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>

</body>
</html>

使用 对象 同时添加多个事件处理函数。

$( "div.test" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, mouseenter: function() {
    $( this ).addClass( "inside" );
  }, mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});

在同一个元素上绑定多个事件，一个 mouseenter 和 mouseleave：

$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "active" );
});

4 .off()

5 .one()

6 .trigger()

$('#foo').on('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

注意: 对于非 window 的普通的对象和 DOM 对象， 如果一个触发事件名称和对象的一个属性名称相匹配， 如果事件处理程序没有调用 event.preventDefault()，jQuery 将尝试调用属性的方法。 如果不希望这种行为发生，请使用.triggerHandler() 来代替。（愚人码头注 .triggerHandler() 方法并不会触发事件的默认行为。）

注意: 和.triggerHandler()一样， 当调用.trigger()时，当一个事件名称匹配对象上属性名称时，属性名称会加上 on 前缀（如，在 具有非空 onclick 方法的 window 上触发 click）， jQuery 将尝试调用该属性作为方法。

注意: 当通过一个普通的对象不是类数组触发时 但仍然包含了 length 属性， 你应该传递对象到数组中（例如：[ { length: 1 } ]）。

7 .triggerHandler()

这个方法的行为与 .trigger() 相似，不同之处有如下几点：

  • .triggerHandler( “event” )方法被触发时不会调用元素上的 .event()。 这意味着在表单上触发 .triggerHandler( “submit” )将不会调用表单上的.submit()。（愚人码头注：可以理解为.triggerHandler() 方法并不会触发事件的默认行为。(例如，表单提交)。）

  • .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素。

  • 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理。
    与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler()返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined。

8 .unbind()

在 jQuery 3.0 中，.unbind()已被标记为弃用。从 jQuery 1.7 开始，它已经被.off()方法取代。所以我们不建议使用该方法。

9 .undelegate()

在 jQuery 3.0 中，.undelegate()已被标记为弃用。从 jQuery 1.7 开始，它已经被.off()方法取代。所以我们不建议使用该方法。

表单事件

1 .blur()

一个元素失去焦点将触发 blur 事件。起初，这个事件仅适用于表单元素，如元素 。在最新的浏览器中，这个事件适用范围已经扩大到包括所有元素类型。一个元素可以通过键盘命令失去焦点，比如 tab 键，或用鼠标点击网页上的其他地方。

应用不带参数的.blur()，我们可以手动触发这个事件:

2 .change()

一个元素的值改变的时候将触发 change 事件。此事件仅限用于元素，