现在的位置: 首页 > 综合 > 正文

jQuery 1.3 API 参考文档中文版

2013年05月29日 ⁄ 综合 ⁄ 共 19135字 ⁄ 字号 评论关闭
jQuery 核心函数
jQuery(expression,[context])

jQuery(expression,[context])

这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。

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

默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。

参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。


This function accepts a string containing a CSS selector which is then used to match a set of elements.

The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements.

By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context.

See Selectors for the allowed CSS syntax for expressions.

返回值

jQuery

参数

expression (String) : 用来查找的字符串

context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。

示例

找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。

HTML 代码:

<p>one</p> <div><p>two</p></div> <p>three</p>

jQuery 代码:

$("div > p");

结果:

[ <p>two</p> ]

在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

jQuery 代码:

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

在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。

jQuery 代码:

$("div", xml.responseXML);
jQuery(html,[ownerDocument])

jQuery(html,[ownerDocument])

根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。
你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("<span/>") 或 $("<span></span>") ,但不推荐 $("<span>")。在jQuery 中,这个语法等同于$(document.createElement("span"))

Create DOM elements on-the-fly from the provided String of raw HTML.
You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may
include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag. As of jQuery 1.3
this syntax is completely equivalent to $(document.createElement("span"))

返回值

jQuery

参数

html (String) : 用于动态创建DOM元素的HTML标记字符串

ownerDocument (Document) : 可选,创建DOM元素所在的文档

示例

动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。

jQuery 代码:

$("<div><p>Hello</p></div>").appendTo("body");

创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

jQuery 代码:

// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
jQuery(elements)

jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。

Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).

返回值

jQuery

参数

elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素

示例

设置页面背景色。

jQuery 代码:

$(document.body).css( "background", "black" );

隐藏一个表单中所有元素。

jQuery 代码:

$(myForm.elements).hide()
jQuery(callback)

jQuery(callback)

$(document).ready()的简写。

允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。

你可以在一个页面中使用任意多个$(document).ready事件。

参考 ready(Function) 获取更多 ready 事件的信息。


A shorthand for $(document).ready().
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being
ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.

You can have as many $(document).ready events on your page as you like.

See ready(Function) for details about the ready event.

返回值

jQuery

参数

callback (Function) : 当DOM加载完成后要执行的函数

示例

当DOM加载完成后,执行其中的函数。

jQuery 代码:

$(function(){
// 文档就绪
});

使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

jQuery 代码:

jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
jQuery 对象访问
each(callback)

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。

而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。


Execute a function within the context of every matched element.
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.

Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).

Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with
a normal loop).

返回值

jQuery

参数

callback (Function) : 对于每个匹配的元素所要执行的函数

示例

迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

如果你想得到 jQuery对象,可以使用 $(this) 函数。

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

你可以使用 'return' 来提前跳出 each() 循环。

HTML 代码:

<button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div>

jQuery 代码:

$("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });
size()

size()

jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'length' 属性一致。

The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").size();

结果:

2
length

length

jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。

The number of elements in the jQuery object.
The number of elements currently matched. The size function will return the same value.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").length;

结果:

2
selector

selector

jQuery 1.3新增。返回传给jQuery()的原始选择器。
换句话说,就是返回你用什么选择器来找到这个元素的。可以与context一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

New in jQuery 1.3 A selector representing selector originally passed to jQuery().
Should be used in conjunction with context to determine the exact query used. These two properties are mostly useful to plugin developers.

返回值

Striing

示例

确定查询的选择器

jQuery 代码:

$("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

结果:

ul
ul li
div#foo ul:not([class])
context

context

jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
可以与selector一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

New in jQuery 1.3 The DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document).
Should be used in conjunction with selector to determine the exact query used. These two properties are mostly useful to plugin developers.

返回值

HTMLElement

示例

检测使用的文档内容

jQuery 代码:

$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");

结果:

[object HTMLDocument] //如果是IE浏览器,则返回[object]
BODY
get()

get()

取得所有匹配的 DOM 元素集合。

这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。

如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。


Access all matched DOM elements.
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using
built-in jQuery functions.

返回值

Array<Element>

示例

选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").get().reverse();

结果:

[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
get(index)

get(index)

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

Access a single matched DOM element at a specified index in the matched set.
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery
object itself like $(this)[0].

返回值

Element

参数

index (Number) :取得第 index 个位置上的元素

示例

 

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").get(0);

结果:

[ <img src="test1.jpg"/> ]
index([subject])

index(subject)

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。未传递参数时,返回当前元素在同级元素中的索引值。

Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.

返回值

Number

参数

subject (Element, Selector) : 要搜索的对象

示例

返回ID值为foobar的元素的索引值。

HTML 代码:

<div id="foobar"><div></div><div id="foo"></div></div>

jQuery 代码:

$("div").index($('#foobar')[0]) // 0
$("div").index($('#foo')[0]) // 2
$("div").index($('#foo')) // -1
数据缓存
data(name)

data(name)

返回元素上储存的相应名字的数据,可以用data(name, value)来设定。

如果jQuery集合指向多个元素,那将只返回第一个元素的对应数据。

这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。你可以在很多地方使用这个函数,另外jQuery UI里经常使用这个函数。


Returns value at named data store for the element, as set by data(name, value).

If the JQuery collection references multiple elements, the value returned refers to the first element.

This function is used to get stored data on an element without the risk of a circular reference. It uses jQuery.data and is new to version 1.2.3. It can be used for many reasons and jQuery UI uses it heavily.

返回值

Any

参数

name (String) :存储的数据名

示例

在一个div上存取数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined

在一个div上存取名/值对数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
data(name,value)

data(name,value)

在元素上存放数据,同时也返回value。

如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。

这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。


Stores the value in the named spot and also returns the value.

If the JQuery collection references multiple elements, the data element is set on all of them.

This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.

返回值

Any

参数

name (String) :存储的数据名

value (Any) :将要存储的任意数据

示例

参考data(name)的示例

removeData(name)

removeData(name)

在元素上移除存放的数据
与$(...).data(name, value)函数作用相反

Removes named data store from an element.
This is the complement function to $(...).data(name, value).

返回值

jQuery

参数

name (String) :存储的数据名

示例

参考data(name)的示例

queue([name] )

queue([name])

返回指向第一个匹配元素的队列(将是一个函数数组)

Returns a reference to the first element's queue (which is an array of functions).

返回值

Array<Function>

参数

name (String) :队列名,默认为fx

示例

显示队列长度

HTML 代码:

<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } span { color:red; } </style> <button id="show">Show Length of Queue</button> <span></span> <div></div>

jQuery 代码:

$("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt();
queue([name],callback)

queue([name],callback)

在匹配的元素的队列最后添加一个函数

Adds a new function, to be executed, onto the end of the queue of all matched elements.

返回值

jQuery

参数

name (String) :队列名,默认为fx

callback (Function) : 要添加进队列的函数

示例

插入一个自定义函数 如果函数执行后要继续队列,则执行 jQuery(this).dequeue();

HTML 代码:

<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> Click here... <div></div>

jQuery 代码:

$(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(); });
queue([name],queue)

queue([name],queue)

将匹配元素的队列用新的一个队列来代替(函数数组).


Replaces the queue of all matched element with this new queue (the array of functions).

返回值

jQuery

参数

name (String) :队列名,默认为fx

queue (Array<Function>) : 用于替换的队列。所有函数都有同一个参数,这个值与queue(callback)相同

示例

通过设定队列数组来删除动画队列

HTML 代码:

<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <button id="start">Start</button> <button id="stop">Stop</button> <div></div>

jQuery 代码:

$("#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(); });
dequeue([name])

dequeue([name])

从队列最前端移除一个队列函数,并执行他。

Removes a queued function from the front of the queue and executes it.

返回值

jQuery

参数

name (String) :队列名,默认为fx

示例

用dequeue来结束自定义队列函数,并让队列继续进行下去。

HTML 代码:

<style> div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; } </style> <button>Start</button> <div></div>

jQuery 代码:

$("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); });
插件机制
jQuery.fn.extend(object)

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
查看这里Plugins/Authoring可以获取更多信息。

Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
Can be used to add functions into the to add plugin methods (plugins).

返回值

jQuery

参数

object (Object) :用来扩充 jQuery 对象。

示例

增加两个插件方法。

jQuery 代码:

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

结果:

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
jQuery.extend(object)

jQuery.extend(object)

扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。 查看 'jQuery.fn.extend' 获取更多添加插件的信息。

Extends the jQuery object itself.
Can be used to add functions into the jQuery namespace. See 'jQuery.fn.extend' for more information on using this method to add Plugins.

返回值

jQuery

参数

object (Object) : 用以扩展 jQuery 对象

示例

在jQuery命名空间上增加两个函数。

jQuery 代码:

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

结果:

jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
多库共存
jQuery.noConflict()

jQuery.noConflict()

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。

在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

注意:这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。


Run this function to give control of the $ variable back to whichever library first implemented it.

This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.

By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p").

NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included
last.

返回值

jQuery

示例

将$引用的对象映射回原始的对象。

jQuery 代码:

jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:

jQuery.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码

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

jQuery 代码:

var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';
jQuery.noConflict(extreme)

jQuery.noConflict(extreme)

将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚!
这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
This is a more-extreme version of the simple noConflict method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. NOTE: It's
very likely that plugins won't work after this particular method has been called.

返回值

jQuery

参数

extreme (Boolean) : 传入 true 来允许彻底将jQuery变量还原

示例

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

jQuery 代码:

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

结果:

// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();
基本
#id

#id

根据给定的ID匹配一个元素。
如果选择器中包含特殊字符,可以用两个斜杠转义。参见示例。

Matches a single element with the given id attribute.

返回值

Element

参数

id (String) : 用于搜索的,通过元素的 id 属性中给定的值

示例

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div> 

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

查找含有特殊字符的元素

HTML 代码:

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

jQuery 代码:

#foo//:bar
#foo//[bar//]
#foo//.bar
element

element

根据给定的元素名匹配所有元素

Matches all elements with the given name.

返回值

Array<Element>

参数

element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。

示例

查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]
.class

.class

根据给定的类匹配元素。

Matches all elements with the given class.

返回值

Array<Element>

参数

class (String) : 一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。

示例

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
*

*

匹配所有元素
多用于结合上下文来搜索。

Matches all elements.
Most useful when combined with a context to search in.

返回值

Array<Element>

示例

找到每一个元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
selector1,selector2,selectorN

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。

Matches the combined results of all the specified selectors.
You can specify any number of selectors to combine into a single result.

返回值

Array<Element>

参数

selector1 (Selector) : 一个有效的选择器

selector2 (Selector) : 另一个有效的选择器

selectorN (Selector) : (可选) 任意多个有效选择器

示例

找到匹配任意一个类的元素。

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p> 

jQuery 代码:

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

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
层级
ancestor descendant

ancestor descendant

在给定的祖先元素下匹配所有的后代元素

Matches all descendant elements specified by descendant of elements specified by ancestor.

返回值

Array<Element>

参数

ancestor (Selector) : 任何有效选择器

descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素

示例

找到表单中所有的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]
parent > child

parent > child

在给定的父元素下匹配所有的子元素

Matches all child elements specified by child of elements specified by parent.

返回值

Array<Element>

参数

parent (Selector) : 任何有效选择器

child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素

示例

匹配表单中所有的子级input元素。

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]
prev + next

prev + next

匹配所有紧接在 prev 元素后的 next 元素

Matches all next elements specified by next that are next to elements specified by prev.

返回值

Array<Element>

抱歉!评论已关闭.