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

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>Header 1</td></tr><tr><td>Value 1</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>John Resig</div><div>George Martin</div><div>Malcom John 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);

结果 :<input type="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" />