jQuery1.1 API 中文版 第二部分DOM

jQuery1.1 API 中文版 第二部分DOM
url: http://jquery.org.cn/visual/cn/index.xml

第二部分DOM

1. Attributes
1.1 addClass(class)
为每个匹配的元素添加指定的类名。

Adds the specified class to each of the set of matched elements.

返回值
jQuery

参数
class (String): 要添加到元素中的CSS类名
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").addClass("selected")
 
结果:
[ <p class="selected">Hello</p> ]

1.2 attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。

Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element.

返回值
Object

参数
name (String): 属性名称
示例
说明:
返回文档中第一个图像的src属性值。

HTML 代码:
<img src="test.jpg"/>
 
jQuery 代码:
$("img").attr("src");
 
结果:
test.jpg

 

1.3 attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。

Set a key/value object as properties to all matched elements. This serves as the best way to set a large number of properties on all matched elements.

返回值
jQuery

参数
properties (Map): 作为属性的“名/值对”对象
示例
说明:
为所有图像设置src和alt属性。

HTML 代码:
<img/>
 
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
 
结果:
<img src="test.jpg" alt="Test Image"/>

 

1.4 attr(key, value)
为所有匹配的元素设置一个属性值。 可以是由${规则}表达式提供的计算值,见示例2。 注意,不能在IE中设置input元素的name属性。可以使用$(html)或.append(html)或.html(html)动态地创建包含name属性的input元素。

Set a single property to a value, on all matched elements. Can compute values provided as ${formula}, see second example. Note that you can't set the name property of input elements in IE. Use $(html) or .append(html) or .html(html) to create elements on the fly including the name property.

返回值
jQuery

参数
key (String): 要设置的属性名
value (Object): 要设置的值
示例
说明:
为所有图像设置src属性。

HTML 代码:
<img/>
 
jQuery 代码:
$("img").attr("src","test.jpg");
 
结果:
<img src="test.jpg"/>
 
--------------------------------------------------------------------------------

 

说明:
以src属性的值作为title属性的值。使用了attr(String,Function)的简写方式。

HTML 代码:
<img src="test.jpg" />
 
jQuery 代码:
$("img").attr("title", "${this.src}");
 
结果:
<img src="test.jpg" title="test.jpg" />

 

1.5 attr(key, value)
为所有匹配的元素设置一个计算的属性值。 不提供值,而是提供一个函数,由这个函数计算的值作为属性值。

Set a single property to a computed value, on all matched elements. Instead of a value, a function is provided, that computes the value.

返回值
jQuery

参数
key (String): 要设置的属性名称
value (Function): 返回值的函数
示例
说明:
把src属性的值设置为title属性的值。

HTML 代码:
<img src="test.jpg" />
 
jQuery 代码:
$("img").attr("title", function() { return this.src });
 
结果:
<img src="test.jpg" title="test.jpg" />

 

1.6 html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。

Get the html contents of the first matched element. This property is not available on XML documents.

返回值
String

示例
HTML 代码:
<div><input/></div>
 
jQuery 代码:
$("div").html();
 
结果:
<input/>

 

1.7 html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。

Set the html contents of every matched element. This property is not available on XML documents.

返回值
jQuery

参数
val (String): Set the html contents to the specified value.
示例
HTML 代码:
<div><input/></div>
 
jQuery 代码:
$("div").html("<b>new stuff</b>");
 
结果:
<div><b>new stuff</b></div>

 

1.8 removeAttr(name)
从每一个匹配的元素中删除一个属性。

Remove an attribute from each of the matched elements.

返回值
jQuery

参数
name (String): 要删除的属性名
示例
HTML 代码:
<input disabled="disabled"/>
 
jQuery 代码:
$("input").removeAttr("disabled")
 
结果:
<input/>

 

1.9 removeClass(class)
从所有匹配的元素中删除全部或者指定的类。

Removes all or the specified class from the set of matched elements.

返回值
jQuery

参数
class (String): (可选) 要删除的类名
示例
HTML 代码:
<p class="selected">Hello</p>
 
jQuery 代码:
$("p").removeClass()
 
结果:
[ <p>Hello</p> ]
 
--------------------------------------------------------------------------------

 

HTML 代码:
<p class="selected first">Hello</p>
 
jQuery 代码:
$("p").removeClass("selected")
 
结果:
[ <p class="first">Hello</p> ]

 

1.10 text()
取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

Get the text contents of all matched elements. The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.

返回值
String

示例
说明:
取得所有段落中文本内容的组合。

HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
 
jQuery 代码:
$("p").text();
 
结果:
Test Paragraph.Paraparagraph

 

1.11 text(val)
设置所有匹配元素的文本内容。这个函数与html()函数具有同样的效果。

Set the text contents of all matched elements. This has the same effect as html().

返回值
String

参数
val (String): 文本内容
示例
说明:
设置所有段落的文本内容。

HTML 代码:
<p>Test Paragraph.</p>
 
jQuery 代码:
$("p").text("Some new text.");
 
结果:
<p>Some new text.</p>

 

1.12 toggleClass(class)
如果存在(不存在)就删除(添加)一个类。

Adds the specified class if it is not present, removes it if it is present.

返回值
jQuery

参数
class (String): CSS类名
示例
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
 
jQuery 代码:
$("p").toggleClass("selected")
 
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]


1.13 val()
获得第一个匹配元素的当前值。

Get the current value of the first matched element.

返回值
String

示例
HTML 代码:
<input type="text" value="some text"/>
 
jQuery 代码:
$("input").val();
 
结果:
"some text"

 

1.14 val(val)
设置每一个匹配元素的值。

Set the value of every matched element.

返回值
jQuery

参数
val (String): 要设置的值。
示例
HTML 代码:
<input type="text" value="some text"/>
 
jQuery 代码:
$("input").val("test");
 
结果:
<input type="text" value="test"/>

 


2. Manipulation

2.1 after(content)
在每个匹配的元素之后插入内容。

Insert content after each of the matched elements.

返回值
jQuery

参数
content (<Content>): 插入到每个目标后的内容
示例
说明:
在所有段落之后插入一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>
 
jQuery 代码:
$("p").after("<b>Hello</b>");
 
结果:
<p>I would like to say: </p><b>Hello</b>
 
--------------------------------------------------------------------------------

 

说明:
在所有段落之后插入一个元素。

HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
 
jQuery 代码:
$("p").after( $("#foo")[0] );
 
结果:
<p>I would like to say: </p><b id="foo">Hello</b>
 
--------------------------------------------------------------------------------

 

说明:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<b>Hello</b><p>I would like to say: </p>
 
jQuery 代码:
$("p").after( $("b") );
 
结果:
<p>I would like to say: </p><b>Hello</b>

 

2.2 append(content)
向每个匹配的元素内部追加内容。 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

Append content to the inside of every matched element. This operation is similar to doing an appendChild to all the specified elements, adding them into the document.

返回值
jQuery

参数
content (<Content>): 要追加到目标中的内容
示例
说明:
向所有段落中追加一些HTML标记。

HTML 代码:
<p>I would like to say: </p>
 
jQuery 代码:
$("p").append("<b>Hello</b>");
 
结果:
<p>I would like to say: <b>Hello</b></p>
 
--------------------------------------------------------------------------------

 

说明:
向所有段落中追加一个元素。

HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
 
jQuery 代码:
$("p").append( $("#foo")[0] );
 
结果:
<p>I would like to say: <b id="foo">Hello</b></p>
 
--------------------------------------------------------------------------------

 

说明:
向所有段落中追加一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<p>I would like to say: </p><b>Hello</b>
 
jQuery 代码:
$("p").append( $("b") );
 
结果:
<p>I would like to say: <b>Hello</b></p>

 

2.3 appendTo(expr)
把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

Append all of the matched elements to another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to A, you're appending A to B.

返回值
jQuery

参数
expr (String): 用于匹配元素的jQuery表达式
示例
说明:
把所有段落追加到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
 
jQuery 代码:
$("p").appendTo("#foo");
 
结果:
<div id="foo"><p>I would like to say: </p></div>

 

2.4 before(content)
在每个匹配的元素之前插入内容。

Insert content before each of the matched elements.

返回值
jQuery

参数
content (<Content>): 插入到每个目标前的内容
示例
说明:
在所有段落之前插入一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>
 
jQuery 代码:
$("p").before("<b>Hello</b>");
 
结果:
<b>Hello</b><p>I would like to say: </p>
 
--------------------------------------------------------------------------------

 

说明:
在所有段落之前插入一个元素。

HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
 
jQuery 代码:
$("p").before( $("#foo")[0] );
 
结果:
<b id="foo">Hello</b><p>I would like to say: </p>
 
--------------------------------------------------------------------------------

 

说明:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<p>I would like to say: </p><b>Hello</b>
 
jQuery 代码:
$("p").before( $("b") );
 
结果:
<b>Hello</b><p>I would like to say: </p>

 

2.5 clone(deep)
克隆匹配的DOM元素并且选中这些克隆的副本。 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

Clone matched DOM Elements and select the clones. This is useful for moving copies of the elements to another location in the DOM.

返回值
jQuery

参数
deep (Boolean): (可选)如果除了元素本身不想克隆其任何后代节点设置为false
示例
说明:
克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。

HTML 代码:
<b>Hello <span>world</span></b><p>, how are you?</p>
 
jQuery 代码:
$("b").clone().prependTo("p");
 
结果:
<b>Hello <span>world</span></b><p>Hello <span>world</span></b>, how are you?</p>
 
--------------------------------------------------------------------------------

 

说明:
只克隆所有b元素自身(并选中这些克隆的副本),然后将它们前置到所有段落中。

HTML 代码:
<b>Hello <span>world</span></b><p>, how are you?</p>
 
jQuery 代码:
$("b").clone(false).prependTo("p");
 
结果:
<b>Hello <span>world</span></b><p><b></b>, how are you?</p>

 

2.6 empty()
删除匹配的元素集合中所有的子节点。

Removes all child nodes from the set of matched elements.

返回值
jQuery

示例
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
 
jQuery 代码:
$("p").empty()
 
结果:
[ <p></p> ]

 

2.7 insertAfter(expr)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。

Insert all of the matched elements after another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).after(B), in that instead of inserting B after A, you're inserting A after B.

返回值
jQuery

参数
expr (String): 用于匹配元素的jQuery表达式
示例
说明:
与 $("#foo").after("p")相同

HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
 
jQuery 代码:
$("p").insertAfter("#foo");
 
结果:
<div id="foo">Hello</div><p>I would like to say: </p>

 

2.8 insertBefore(expr)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

Insert all of the matched elements before another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).before(B), in that instead of inserting B before A, you're inserting A before B.

返回值
jQuery

参数
expr (String): 用于匹配元素的jQuery表达式
示例
说明:
与 $("#foo").before("p")相同

HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
 
jQuery 代码:
$("p").insertBefore("#foo");
 
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

 

2.9 prepend(content)
向每个匹配的元素内部前置内容。 这是向所有匹配元素内部的开始处插入内容的最佳方式。

Prepend content to the inside of every matched element. This operation is the best way to insert elements inside, at the beginning, of all matched elements.

返回值
jQuery

参数
content (<Content>): 要插入到目标元素内部前端的内容
示例
说明:
向所有段落中前置一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>
 
jQuery 代码:
$("p").prepend("<b>Hello</b>");
 
结果:
<p><b>Hello</b>I would like to say: </p>
 
--------------------------------------------------------------------------------

 

说明:
向所有段落中前置一个元素。

HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
 
jQuery 代码:
$("p").prepend( $("#foo")[0] );
 
结果:
<p><b id="foo">Hello</b>I would like to say: </p>
 
--------------------------------------------------------------------------------

 

说明:
向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<p>I would like to say: </p><b>Hello</b>
 
jQuery 代码:
$("p").prepend( $("b") );
 
结果:
<p><b>Hello</b>I would like to say: </p>

 

2.10 prependTo(expr)
把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

Prepend all of the matched elements to another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).prepend(B), in that instead of prepending B to A, you're prepending A to B.

返回值
jQuery

参数
expr (String): 用于匹配元素的jQuery表达式
示例
说明:
把所有段落前置到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
 
jQuery 代码:
$("p").prependTo("#foo");
 
结果:
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>

 

2.11 remove(expr)
从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。 可以通过一个可选的表达式对要删除的元素进行筛选。

Removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Can be filtered with an optional expressions.

返回值
jQuery

参数
expr (String): (可选)用于筛选元素的jQuery表达式
示例
HTML 代码:
<p>Hello</p> how are <p>you?</p>
 
jQuery 代码:
$("p").remove();
 
结果:
how are
 
--------------------------------------------------------------------------------

 

HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
 
jQuery 代码:
$("p").remove(".hello");
 
结果:
how are <p>you?</p>

 

2.12 wrap(html)
把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。 当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包装完成之后再行添加。

Wrap all matched elements with a structure of other elements. This wrapping process is most useful for injecting additional stucture into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure - it is that element that will en-wrap everything else. This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.

返回值
jQuery

参数
html (String): HTML标记代码字符串,用于动态生成元素并包装目标元素
示例
HTML 代码:
<p>Test Paragraph.</p>
 
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
 
结果:
<div class='wrap'><p>Test Paragraph.</p></div>

 

2.13 wrap(elem)
把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。 当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包装完成之后再行添加。

Wrap all matched elements with a structure of other elements. This wrapping process is most useful for injecting additional stucture into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided and finding the deepest ancestor element within its structure - it is that element that will en-wrap everything else. This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.

返回值
jQuery

参数
elem (Element): 用于包装目标元素的DOM元素
示例
HTML 代码:
<p>Test Paragraph.</p><div id="content"></div>
 
jQuery 代码:
$("p").wrap( document.getElementById('content') );
 
结果:
<div id="content"><p>Test Paragraph.</p></div>

 

 

3. Traversing

3.1 add(expr)
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

Adds the elements matched by the expression to the jQuery object. This can be used to concatenate the result sets of two expressions.

返回值
jQuery

参数
expr (String): 用于匹配相加结果元素的表达式
示例
HTML 代码:
<p>Hello</p><p><span>Hello Again</span></p>
 
jQuery 代码:
$("p").add("span")
 
结果:
[ <p>Hello</p>, <p><span>Hello Again</span></p>, <span>Hello Again</span> ]

 

3.2 add(html)
向匹配的元素集合中添加更多动态创建的元素。

Adds more elements, created on the fly, to the set of matched elements.

返回值
jQuery

参数
html (String): 动态创建元素的HTML代码字符串
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").add("<span>Again</span>")
 
结果:
[ <p>Hello</p>, <span>Again</span> ]

 

3.3 add(elements)
把一个或多个DOM元素添加到匹配的元素集合中。 这个函数用于把一个DOM元素集合添加到一个jQuery对象中。

Adds one or more Elements to the set of matched elements. This is used to add a set of Elements to a jQuery object.

返回值
jQuery

参数
elements (Element|Array<Element>): 要添加的一个或多个DOM元素
示例
HTML 代码:
<p>Hello</p><p><span id="a">Hello Again</span></p>
 
jQuery 代码:
$("p").add( document.getElementById("a") )
 
结果:
[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]
 
--------------------------------------------------------------------------------

 

HTML 代码:
<p>Hello</p><p><span id="a">Hello Again</span><span id="b">And Again</span></p>
 
jQuery 代码:
$("p").add([document.getElementById("a"), document.getElementById("b")])
 
结果:
[ <p>Hello</p>, <p><span id="a">Hello Again</span><span id="b">And Again</span></p>, <span id="a">Hello Again</span>, <span id="b">And Again</span> ]

 

3.4 children(expr)
取得一个包含匹配的元素集合中每一个元素的所有唯一子元素的元素集合。 可以用可选的表达式进行筛选。

Get a set of elements containing all of the unique children of each of the matched set of elements. Can be filtered with an optional expressions.

返回值
jQuery

参数
expr (String): (可选) 用于筛选子元素的表达式
示例
说明:
找到每个div的所有子元素。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
 
jQuery 代码:
$("div").children()
 
结果:
[ <span>Hello Again</span> ]
 
--------------------------------------------------------------------------------

 

说明:
找到每个div的所有子元素中带有类名为selected的元素。

HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
 
jQuery 代码:
$("div").children(".selected")
 
结果:
[ <p class="selected">Hello Again</p> ]

 

3.5 contains(str)
把元素集合筛选为包含指定文本(区分大小写)的元素。

Filter the set of elements to those that contain the specified text.

返回值
jQuery

参数
str (String): 包含在元素中的文本
示例
HTML 代码:
<p>This is just a test.</p><p>So is this</p>
 
jQuery 代码:
$("p").contains("test")
 
结果:
[ <p>This is just a test.</p> ]

 

3.6 end()
结束最近的“破坏性”操作,把匹配的元素列表回复到前一个状态。在调用end函数后,匹配的元素列表会回复到上一个操作之前的匹配元素列表状态。 如果前面的操作(对元素列表的状态)没有破坏性,则什么也不改变。

End the most recent 'destructive' operation, reverting the list of matched elements back to its previous state. After an end operation, the list of matched elements will revert to the last state of matched elements. If there was no destructive operation before, an empty set is returned.

返回值
jQuery

示例
说明:
选择所有段落,并在它们中查找span元素,然后恢回复到选择所有段落的状态。

HTML 代码:
<p><span>Hello</span>, how are you?</p>
 
jQuery 代码:
$("p").find("span").end();
 
结果:
[ <p>...</p> ]

 

3.7 filter(expression)
从所有匹配的元素集合中删除那些与指定的表达式(可以是多个)不匹配的元素(即返回与指定表达式匹配的元素集合)。这个方法用于缩小匹配的范围。 使用表达式字符串数组可以实现一次完成多重筛选的效果。

Removes all elements from the set of matched elements that do not match the specified expression(s). This method is used to narrow down the results of a search. Provide a String array of expressions to apply multiple filters at once.

返回值
jQuery

参数
expression (String|Array<String>): 要搜索的表达式(或表达式数组)
示例
说明:
选择所有段落并删除那些类名不是selected的元素。

HTML 代码:
<p class="selected">Hello</p><p>How are you?</p>
 
jQuery 代码:
$("p").filter(".selected")
 
结果:
[ <p class="selected">Hello</p> ]
 
--------------------------------------------------------------------------------

 

说明:
选择所有段落并删除那些类名不是selected的元素,但不删除第一个元素。

HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
 
jQuery 代码:
$("p").filter([".selected", ":first"])
 
结果:
[ <p>Hello</p>, <p class="selected">And Again</p> ]

 

3.8 filter(filter)
从匹配的元素集合中删除那些不符合指定的筛选条件的元素(即返回与指定表达式匹配的元素集合)。这个方法用于缩小搜索的范围。

Removes all elements from the set of matched elements that do not pass the specified filter. This method is used to narrow down the results of a search.

返回值
jQuery

参数
filter (Function): 作为筛选条件的函数
示例
说明:
删除所有拥有一个ol子元素的元素。

HTML 代码:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
 
jQuery 代码:
$("p").filter(function(index) { return $("ol", this).length == 0; })
 
结果:
[ <p>How are you?</p> ]

 

3.9 find(expr)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择符语法或基本的XPath语法来写。

Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process. All searching is done using a jQuery expression. The expression can be written using CSS 1-3 Selector syntax, or basic XPath.

返回值
jQuery

参数
expr (String): 用于搜索的表达式
示例
说明:
从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:
<p><span>Hello</span>, how are you?</p>
 
jQuery 代码:
$("p").find("span");
 
结果:
[ <span>Hello</span> ]

 

3.10 is(expr)
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合这个表达式,或者表达式是无效的,都返回false。 其中的表达式可以使用filter(String)函数,因此filter()函数原有的规则在这里也适用。

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression. Does return false, if no element fits or the expression is not valid. filter(String) is used internally, therefore all rules that apply there apply here, too.

返回值
Boolean

参数
expr (String): 用于筛选的表达式
示例
说明:
因为input元素的父元素是一个表单元素,所以返回true。

HTML 代码:
<form><input type="checkbox" /></form>
 
jQuery 代码:
$("input[@type='checkbox']").parent().is("form")
 
结果:
true
 
--------------------------------------------------------------------------------

 

说明:
因为input元素的父元素是一个p元素,所以返回false。

HTML 代码:
<form><p><input type="checkbox" /></p></form>
 
jQuery 代码:
$("input[@type='checkbox']").parent().is("form")
 
结果:
false

 

3.11 next(expr)
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素。 可以用一个可选的表达式进行筛选。

Get a set of elements containing the unique next siblings of each of the matched set of elements. It only returns the very next sibling, not all next siblings. Can be filtered with an optional expressions.

返回值
jQuery

参数
expr (String): (可选) 用于筛选后面同辈元素的表达式
示例
说明:
找到每个段落的后面紧邻的同辈元素。

HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
 
jQuery 代码:
$("p").next()
 
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
 
--------------------------------------------------------------------------------

 

说明:
找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
 
jQuery 代码:
$("p").next(".selected")
 
结果:
[ <p class="selected">Hello Again</p> ]

 

3.12 not(el)
从匹配的元素集合中删除指定的元素。这个方法用于从一个jQuery对象中删除一个元素。

Removes the specified Element from the set of matched elements. This method is used to remove a single Element from a jQuery object.

返回值
jQuery

参数
el (Element): 要删除的元素
示例
说明:
从所有的段落集合中删除ID为selected的元素。

HTML 代码:
<p>Hello</p><p id="selected">Hello Again</p>
 
jQuery 代码:
$("p").not( $("#selected")[0] )
 
结果:
[ <p>Hello</p> ]

 

3.13 not(expr)
从匹配的元素集合中删除与指定的表达式匹配的元素。这个函数用于从一个jQuery对象中删除一个或多个元素。

Removes elements matching the specified expression from the set of matched elements. This method is used to remove one or more elements from a jQuery object.

返回值
jQuery

参数
expr (String): 用于匹配要删除元素的表达式
示例
说明:
从所有段落中删除ID值为selected的元素。

HTML 代码:
<p>Hello</p><p id="selected">Hello Again</p>
 
jQuery 代码:
$("p").not("#selected")
 
结果:
[ <p>Hello</p> ]

 

3.14 not(elems)
从匹配的元素集合中删除所有符合条件的元素集合。这个函数用于从jQuery对象中删除一个或多个元素。

Removes any elements inside the array of elements from the set of matched elements. This method is used to remove one or more elements from a jQuery object.

返回值
jQuery

参数
elems (jQuery): 要从匹配的jQuery元素集合中删除的元素集合
示例
说明:
从全部段落的集合中删除所有与“div p.selected”匹配的元素。

HTML 代码:
<div><p>Hello</p><p class="selected">Hello Again</p></div>
 
jQuery 代码:
$("p").not( $("div p.selected") )
 
结果:
[ <p>Hello</p> ]

 

3.15 parent(expr)
取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以通过一个可选的表达式进行筛选。

Get a set of elements containing the unique parents of the matched set of elements. Can be filtered with an optional expressions.

返回值
jQuery

参数
expr (String): (可选) 用于筛选父元素的表达式
示例
说明:
找到每个段落的父元素。

HTML 代码:
<div><p>Hello</p><p>Hello</p></div>
 
jQuery 代码:
$("p").parent()
 
结果:
[ <div><p>Hello</p><p>Hello</p></div> ]
 
--------------------------------------------------------------------------------

 

说明:
找到段落的父元素中每个类名为selected的父元素。

HTML 代码:
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
 
jQuery 代码:
$("p").parent(".selected")
 
结果:
[ <div class="selected"><p>Hello Again</p></div> ]

 

3.16 parents(expr)
取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。 可以通过一个可选的表达式进行筛选。

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). Can be filtered with an optional expressions.

返回值
jQuery

参数
expr (String): (可选) 用于筛选祖先元素的表达式
示例
说明:
找到每个span元素的父元素。

HTML 代码:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
 
jQuery 代码:
$("span").parents()
 
结果:
[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
 
--------------------------------------------------------------------------------

 

说明:
找到每个span元素的父元素中是p元素的元素。

HTML 代码:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
 
jQuery 代码:
$("span").parents("p")
 
结果:
[ <p><span>Hello</span></p> ]


3.17 prev(expr)
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。 这个函数只返回前一个紧邻的同辈元素,而不是前面所有的同辈元素。

Get a set of elements containing the unique previous siblings of each of the matched set of elements. Can be filtered with an optional expressions. It only returns the immediately previous sibling, not all previous siblings.

返回值
jQuery

参数
expr (String): (可选) 用于筛选前一个同辈元素的表达式
示例
说明:
找到每个段落紧邻的前一个同辈元素。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
 
jQuery 代码:
$("p").prev()
 
结果:
[ <div><span>Hello Again</span></div> ]
 
--------------------------------------------------------------------------------

 

说明:
找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
 
jQuery 代码:
$("p").prev(".selected")
 
结果:
[ <p class="selected">Hello Again</p> ]

 

3.18 siblings(expr)
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。 可以用可选的表达式进行筛选。

Get a set of elements containing all of the unique siblings of each of the matched set of elements. Can be filtered with an optional expressions.

返回值
jQuery

参数
expr (String): (可选) 用于筛选同辈元素的表达式
示例
说明:
找到每个div的所有同辈元素。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
 
jQuery 代码:
$("div").siblings()
 
结果:
[ <p>Hello</p>, <p>And Again</p> ]
 
--------------------------------------------------------------------------------

 

说明:
找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
 
jQuery 代码:
$("div").siblings(".selected")
 
结果:
[ <p class="selected">Hello Again</p> ]
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值