DOM（选择器，属性，筛选，文档处理） JQUERY

xuxiannian

DOM（选择器，属性，筛选，文档处理）
 
选择器（基本，层级，简单，内容，可见性，属性，子元素，表单及表单对象属性）
基本
#id
根据给定的ID匹配一个元素。返回值为Element
id(String)用于搜索的，通过元素的 id 属性中给定的值
示例　查找ID为"myDiv"的元素。
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
代码:$("#myDiv");
结果:<div id="myDiv">id="myDiv"</div>
 
element
根据给定的元素名匹配所有元素。返回值为Array<Element>
element (String) : 一个用于搜索的元素。指向DOM的标签名。
示例　查找一个 DIV 元素。
<div>DIV1</div><div>DIV2</div><span>SPAN</span>
代码:$("div");
结果:<div>DIV1</div><div>DIV2</div>
 
.class
根据给定的类匹配元素。返回值Array<Element>
class (String) : 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
示例　查找所有类是"myClass"的元素.
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
代码:$(".myClass");
结果:<div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>
 
*
匹配所有元素，多用于结合上下文来搜索。返回值Array<Element>
示例　找到每一个元素
<div>DIV</div><span>SPAN</span><p>P</p>
代码:$("*")
结果:<div>DIV</div><span>SPAN</span><p>P</p>
 
selector1,selectorN
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。返回值Array<Element>
参数
selector1 (Selector) : 一个有效的选择器
selector2 (Selector) : 另一个有效的选择器
selectorN (Selector) : (可选) 任意多个有效选择器
示例　找到匹配任意一个类的元素。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
代码:$("div,span,p.myClass")
结果:<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>
 
层级
ancestor descendant
在给定的祖先元素下匹配所有的后代元素。返回值Array<Element>
ancestor(Selector):任何有效选择器
descendant(Selector):用以匹配元素的选择器，并且它是第一个选择器的后代元素
示例　找到表单中所有的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset>
</form>
<input name="none" />
代码:$("form input")
结果: <input name="name" />, <input name="newsletter" />

parent>child
在给定的父元素下匹配所有的子元素。返回值Array<Element>
parent (Selector) : 任何有效选择器
child (Selector) : 用以匹配元素的选择器，并且它是第一个选择器的子元素
示例　匹配表单中所有的子级input元素。
代码:$("form > input")
结果:<input name="name" />
 
prev+next
匹配所有紧接在prev元素后的next元素
返回值Array<Element>
prev (Selector) : 任何有效选择器
next (Selector) :一个有效选择器并且紧接着第一个选择器
示例　匹配所有跟在 label 后面的 input 元素
代码:$("label + input")
结果:<input name="name" />, <input name="newsletter" />
 
prev~siblings
匹配prev元素之后的所有siblings元素　返回值Array<Element>
prev (Selector) : 任何有效选择器
siblings (Selector) : 一个选择器，并且它作为第一个选择器的同辈
示例　找到所有与表单同辈的 input 元素
代码:$("form ~ input")
结果:<input name="none" />
 
简单
<table>
<tr><td>Header1</td></tr><tr><td>Value1</td></tr><tr><td>Value 2</td></tr>
</table>
 
:first：匹配找到的第一个元素
代码:$("tr:first") 结果:<tr><td>Header 1</td></tr>

:last：匹配找到的最后一个元素
代码:$("tr:last") 结果:<tr><td>Value 2</td></tr>
 
:not(selector)：去除所有与给定选择器匹配的元素
<input name="apple" />
<input name="flower" checked="checked" />
代码:$("input:not(:checked)") 结果:<input name="apple" />
 
:even：匹配所有索引值为偶数的元素，从0开始计数
代码:$("tr:even") 结果:<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>
 
:odd：配所有索引值为奇数的元素，从 0 开始计数
代码:$("tr:odd") 结果:<tr><td>Value 1</td></tr>
 
:eq(index)：匹配一个给定索引值的元素
代码:$("tr:eq(1)") 结果:<tr><td>Value 1</td></tr>
 
:gt(index)：匹配所有大于给定索引值的元素
代码:$("tr:gt(0)") 结果:<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>

:lt(index)：匹配所有小于给定索引值的元素
代码:$("tr:lt(2)") 结果:<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>

:header：匹配如 h1, h2, h3之类的标题元素
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
代码:$(":header").css("background", "#EEE");
结果:<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>
 
:animated：匹配所有没有在执行动画效果中的元素
<button id="run">Run</button><div></div>
代码:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+20" }, 1000);
});
 
内容
:contains(text)：匹配包含给定文本的元素
text (String) : 一个用以查找的字符串
示例　查找所有包含 "John" 的 div 元素
<div>JohnResig</div><div>George Martin</div><div>MalcomJohn Sinclair</div><div>J. Ohn
代码:$("div:contains('John')")
结果:<div>John Resig</div>, <div>Malcom John Sinclair</div>
 
:empty：匹配所有不包含子元素或者文本的空元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
代码:$("td:empty")
结果:<td></td>, <td></td>
 
:has(selector)：匹配含有选择器所匹配的元素的元素
selector (Selector) : 一个用于筛选的选择器
示例　给所有包含p元素的div元素添加一个 text 类
<div><p>Hello</p></div><div>Hello again!</div>
代码:$("div:has(p)").addClass("test");
结果: <div class="test"><p>Hello</p></div>
 
:parent：匹配含有子元素或者文本的元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
代码:$("td:parent")
结果: <td>Value 1</td>, <td>Value 1</td>

可见性
:hidden：匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
代码:$("tr:hidden")
结果:<tr style="display:none"><td>Value 1</td></tr>
 
:visible：匹配所有的可见元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
代码:$("tr:visible")
结果: <tr><td>Value 2</td></tr>
 
属性
[attribute]：匹配包含给定属性的元素
<div><p>Hello!</p></div>
<div id="test2"></div>
代码:$("div[id]")
结果:<div id="test2"></div>

[attribute=value]：匹配给定的属性是某个特定值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
代码:$("input[name='newsletter']").attr("checked", true);
结果:<inputtype="checkbox" name="newsletter" value="Hot Fuzz" checked="true"/>, <input type="checkbox" name="newsletter" value="Cold Fusion"checked="true" />
 
[attribute!=value]：匹配给定的属性是不包含某个特定值的元素
 
[attribute^=value]：匹配给定的属性是以某些值开始的元素
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
代码:$("input[name^='news']")
结果:<input name="newsletter" />, <input name="newsboy" />

[attribute$=value]：匹配给定的属性是以某些值结尾的元素
 
[attribut*=value]：匹配给定的属性是以包含某些值的元素
 
[selector1][selector2][selectorN]：复合属性选择器，需要同时满足多个条件时使用
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
代码:$("input[id][name$='man']")
结果: <input id="letterman" name="new-letterman" />