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

 

 

函数：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 Again</p>, <div><span>And Again</span></div> ]

Find the very next sibling of each paragraph that has a class "selected".

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

 

 

函数：not(el)，not(expr)，not(elems)
功能：匹配元素中排除符合参赛条件的元素
返回：jQuery对象
参数：元素或元素数组，表达式
例子：
Removes the element with the ID "selected" from the set of all paragraphs.

jQuery Code
$("p").not( $("#selected")[0] )
Before
<p>Hello</p><p id="selected">Hello Again</p>
Result:
[ <p>Hello</p> ]

Removes all elements that match "div p.selected" from the total set of all paragraphs.

jQuery Code
$("p").not( $("div p.selected") )
Before
<div><p>Hello</p><p class="selected">Hello Again</p></div>
Result:
[ <p>Hello</p> ]

 

 

函数：parent(expr)，parents(expr)
返回：父节点，所有父节点
参数：查找表达式
返回：jQuery对象
例子：
Find the parent element of each paragraph.

jQuery Code
$("p").parent()
Before
<div><p>Hello</p><p>Hello</p></div>
Result:
[ <div><p>Hello</p><p>Hello</p></div> ]

Find the parent element of each paragraph with a class "selected".

jQuery Code
$("p").parent(".selected")
Before
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
Result:
[ <div class="selected"><p>Hello Again</p></div> ]

Find all parent elements of each span.

jQuery Code
$("span").parents()
Before
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
Result:
[ <body></body>, <div></div>, <p><span>Hello</span></p> ]

Find all parent elements of each span that is a paragraph.

jQuery Code
$("span").parents("p")
Before
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
Result:
[ <p><span>Hello</span></p> ]

 

 

函数：prev(expr)
功能：与next(expr)相反，返回所有匹配元素前面的兄弟节点
返回：jQuery对象
参数：expr (String): (optional) An expression to filter the previous Elements with 
例子:
Find the very previous sibling of each paragraph.

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

Find the very previous sibling of each paragraph that has a class "selected".

jQuery Code
$("p").prev(".selected")
Before
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
Result:
[ <div><span>Hello</span></div> ]

 

 

函数：siblings(expr)
功能：next(expr)和prev(expr)的合集
参数：同上
返回：jQuery对象
例子：
Find all siblings of each div.

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

Find all siblings with a class "selected" of each div.

jQuery Code
$("div").siblings(".selected")
Before
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
Result:
[ <p class="selected">Hello Again</p> ]