jQuery：DOM部分之Traversing 的使用

也就是DOM元素的遍历

函数：add(expr)

功能：添加匹配表达式

返回：jQuery对象

参数：expr (String): An expression whose matched elements are added 

例子：

jQuery Code

$("p").add("span")

Before

(HTML) <p>Hello</p><span>Hello Again</span>

Result:

(jQuery object matching 2 elements) [ <p>Hello</p>, <span>Hello Again</span> ]

函数：add(html)

功能：给匹配元素添加html内容

返回：jQuery对象

参数：html (String): A string of HTML to create on the fly. 

例子：

jQuery Code

$("p").add("<span>Again</span>")

Before

<p>Hello</p>

Result:

[ <p>Hello</p>, <span>Again</span> ]

函数：add(elements)

功能：给匹配元素添加dom元素

返回：jQuery对象

参数：dom元素或数组

例子：

jQuery Code

$("p").add( document.getElementById("a") )

Before

<p>Hello</p><p><span id="a">Hello Again</span></p>

Result:

[ <p>Hello</p>, <span id="a">Hello Again</span> ]



jQuery Code

$("p").add( document.forms[0].elements )

Before

<p>Hello</p><p><form><input/><button/></form>

Result:

[ <p>Hello</p>, <input/>, <button/> ]

函数：children(expr)

功能：查找子节点

返回：jQuery对象

参数：查找表达式

例子：

jQuery Code

$("div").children()

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Result:

[ <span>Hello Again</span> ]



jQuery Code

$("div").children(".selected")

Before

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

Result:

[ <p class="selected">Hello Again</p> ]

函数：contains(str)

功能：查找匹配元素中包含str字符的节点

返回：jQuery对象

参数：要查找的string

例子：

jQuery Code

$("p").contains("test")

Before

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>This is just a test.</p> ]
  

函数：end()

功能：返回到最开始的匹配元素

返回：jQuery对象

参数：

例子：

jQuery Code

$("p").find("span").end();

Before

<p><span>Hello</span>, how are you?</p>

Result:

[ <p></p> ]

函数：filter(expression)

功能：返回满足过滤条件表达式的元素

返回：jQuery对象

参数：expression (String): Expression(s) to search with. 

例子：

Selects all paragraphs and removes those without a class "selected".

jQuery Code

$("p").filter(".selected")

Before

<p class="selected">Hello</p><p>How are you?</p>

Result:

[ <p class="selected">Hello</p> ]



Selects all paragraphs and removes those without class "selected" and being the first one.

jQuery Code

$("p").filter(".selected, :first")

Before

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

Result:

[ <p>Hello</p>, <p class="selected">And Again</p> ]

函数：filter(filter)

功能：返回满足过滤函数的元素

返回：jQuery对象

参数：

例子：

Remove all elements that have a child ol element



jQuery Code

$("p").filter(function(index) {

  return $("ol", this).length == 0;

})

Before

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

Result:

[ <p>How are you?</p> ]

函数:find(expr)

功能：

例子：

Starts with all paragraphs and searches for descendant span elements, same as $("p span") 



jQuery Code

$("p").find("span");

Before

<p><span>Hello</span>, how are you?</p>

Result:

[ <span>Hello</span>

函数：is(expr)

功能：判断当前元素是否符合expr表达式

例子：

Returns true, because the parent of the input is a form element



jQuery Code

$("input[@type='checkbox']").parent().is("form")

Before

<form><input type="checkbox" /></form>

Result:

true



Returns false, because the parent of the input is a p element



jQuery Code

$("input[@type='checkbox']").parent().is("form")

Before

<form><p><input type="checkbox" /></p></form>

Result:

false

[code]函数：next(expr) 
功能：返回匹配元素之后的兄弟节点 
返回：jQuery对象 
参数：expr (String): (optional) An expression to filter the next Elements with  
例子： 
Find the very next sibling of each paragraph. 

jQuery Code 
$("p").next() 
Before 
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> 
Result: 
[ <p>Hello Ag