JQuery屬性選擇器講解

1、1 :headerV1.2概述匹配如 h1, h2, h3之類的標(biāo)題元素示例描述:給頁面內(nèi)所有標(biāo)題加上背景色HTML 代碼:<h1>Header 1</h1><p>Contents 1</p><h2>Header 2</h2><p>Contents 2</p>jQuery 代碼:$(":header").css("background", "#EEE");結(jié)果: <h1 style="background:#EEE;&quo

2、t;>Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> 2 :animatedV1.2概述匹配所有正在執(zhí)行動(dòng)畫效果的元素示例描述:只有對(duì)不在執(zhí)行動(dòng)畫效果的元素執(zhí)行一個(gè)動(dòng)畫特效HTML 代碼:<button id="run">Run</button><div></div>jQuery 代碼:$("#run").click(function() $("div:not(:ani

3、mated)").animate( left: "+=20" , 1000););3 :focus概述觸發(fā)每一個(gè)匹配元素的focus事件。這將觸發(fā)所有綁定的focus函數(shù)，注意，某些對(duì)象不支持focus方法。示例描述:當(dāng)頁面加載后將 id 為 'login' 的元素設(shè)置焦點(diǎn):jQuery 代碼:$("#login:focus");4 :contains(text)概述匹配包含給定文本的元素參數(shù)textStringV1.1.4一個(gè)用以查找的字符串示例描述:查找所有包含 "John" 的 div 元素HTML 代

4、碼:<div>John Resig</div><div>George Martin</div><div>Malcom John Sinclair</div><div>J. OhnjQuery 代碼:$("div:contains('John')")結(jié)果: <div>John Resig</div>, <div>Malcom John Sinclair</div> 5 :emptyV1.0概述匹配所有不包含子元素或者文本的空元素示

5、例描述:查找所有不包含子元素或者文本的空元素HTML 代碼:<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr></table>jQuery 代碼:$("td:empty")結(jié)果: <td></td>, <td></td> 6 返回值:Array<Elem

6、ent(s)>:has(selector)概述匹配含有選擇器所匹配的元素的元素參數(shù)selectorSelectorV1.1.4一個(gè)用于篩選的選擇器示例描述:給所有包含 p 元素的 div 元素添加一個(gè) text 類HTML 代碼:<div><p>Hello</p></div><div>Hello again!</div>jQuery 代碼:$("div:has(p)").addClass("test");結(jié)果: <div class="test">

7、;<p>Hello</p></div> 7 :parentV1.0概述匹配含有子元素或者文本的元素示例描述:查找所有含有子元素或者文本的 td 元素HTML 代碼:<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr></table>jQuery 代碼:$("td:parent&quo

8、t;)結(jié)果: <td>Value 1</td>, <td>Value 2</td> 8 :hiddenV1.0概述匹配所有不可見元素，或者type為hidden的元素示例描述:查找隱藏的 trHTML 代碼:<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery 代碼:$(&q

9、uot;tr:hidden")結(jié)果: <tr style="display:none"><td>Value 1</td></tr> 描述:匹配type為hidden的元素HTML 代碼:<form> <input type="text" name="email" /> <input type="hidden" name="id" /></form>jQuery 代碼:$("inpu

10、t:hidden")結(jié)果: <input type="hidden" name="id" /> 9 :visibleV1.0概述匹配所有的可見元素示例描述:查找所有可見的 tr 元素HTML 代碼:<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery 代碼:$(

11、"tr:visible")結(jié)果: <tr><td>Value 2</td></tr> 10 attribute概述匹配包含給定屬性的元素。注意，在jQuery 1.3中，前導(dǎo)的符號(hào)已經(jīng)被廢除！如果想要兼容最新版本，只需要簡(jiǎn)單去掉符號(hào)即可。參數(shù)attributeStringV1.0屬性名示例描述:查找所有含有 id 屬性的 div 元素HTML 代碼:<div> <p>Hello!</p></div><div id="test2"></div&

12、gt;jQuery 代碼:$("divid")結(jié)果: <div id="test2"></div> 11 attribute=value概述匹配給定的屬性是某個(gè)特定值的元素參數(shù)attributeStringV1.0屬性名value StringV1.0屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含""時(shí)，用以避免沖突。示例描述:查找所有 name 屬性是 newsletter 的 input 元素HTML 代碼:<input type="checkbox" name=&qu

13、ot;newsletter" value="Hot Fuzz" /><input type="checkbox" name="newsletter" value="Cold Fusion" /><input type="checkbox" name="accept" value="Evil Plans" />jQuery 代碼:$("inputname='newsletter'")

14、.attr("checked", true);結(jié)果: <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion12 attribute!=value概述匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。此選擇器等

15、價(jià)于:not(attr=value)<br>要匹配含有特定屬性但不等于特定值的元素，請(qǐng)使用attr:not(attr=value)參數(shù)attributeStringV1.0屬性名value StringV1.0屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含""時(shí)，用以避免沖突。示例描述:查找所有 name 屬性不是 newsletter 的 input 元素HTML 代碼:<input type="checkbox" name="newsletter" value="Hot Fuzz"

16、 /><input type="checkbox" name="newsletter" value="Cold Fusion" /><input type="checkbox" name="accept" value="Evil Plans" />jQuery 代碼:$("inputname!='newsletter'").attr("checked", true);結(jié)果: <inpu

17、t type="checkbox" name="accept" value="Evil Plans" checked="true" /> 13 attribute=value概述匹配給定的屬性是以某些值開始的元素參數(shù)attributeStringV1.0屬性名value StringV1.0屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含""時(shí)，用以避免沖突。示例描述:查找所有 name 以 'news' 開始的 input 元素HTML 代碼:<input

18、 name="newsletter" /><input name="milkman" /><input name="newsboy" />jQuery 代碼:$("inputname='news'")結(jié)果: <input name="newsletter" />, <input name="newsboy" /> 14 attribute$=value概述匹配給定的屬性是以某些值結(jié)尾的元素參數(shù)attribu

19、teStringV1.0屬性名value StringV1.0屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含""時(shí)，用以避免沖突。示例描述:查找所有 name 以 'letter' 結(jié)尾的 input 元素HTML 代碼:<input name="newsletter" /><input name="milkman" /><input name="jobletter" />jQuery 代碼:$("inputname$='letter

20、'")結(jié)果: <input name="newsletter" />, <input name="jobletter" /> 15 attribute*=value概述匹配給定的屬性是以包含某些值的元素參數(shù)attributeStringV1.0屬性名value StringV1.0屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含""時(shí)，用以避免沖突。示例描述:查找所有 name 包含 'man' 的 input 元素HTML 代碼:<input name=&qu

21、ot;man-news" /><input name="milkman" /><input name="letterman2" /><input name="newmilk" />jQuery 代碼:$("inputname*='man'")結(jié)果: <input name="man-news" />, <input name="milkman" />, <input name=&

22、quot;letterman2" /> 16 selector1selector2selectorNV1.0概述復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用。參數(shù)selector1Selector屬性選擇器selector2Selector另一個(gè)屬性選擇器，用以進(jìn)一步縮小范圍selectorNSelector任意多個(gè)屬性選擇器示例描述:找到所有含有 id 屬性，并且它的 name 屬性是以 man 結(jié)尾的HTML 代碼:<input id="man-news" name="man-news" /><input name=&

23、quot;milkman" /><input id="letterman" name="new-letterman" /><input name="newmilk" />jQuery 代碼:$("inputidname$='man'")結(jié)果: <input id="letterman" name="new-letterman" /> 17 :nth-child概述匹配其父元素下的第N個(gè)子或奇偶元素':

24、eq(index)' 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)參數(shù)indexNumberV1.1.4要匹配元素的序號(hào)，從1開始示例描述:在每個(gè) ul 查找第 2 個(gè)liHTML 代碼:<ul> <l

25、i>John</li> <li>Karl</li> <li>Brandon</li></ul><ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li></ul>jQuery 代碼:$("ul li:nth-child(2)")結(jié)果: <li>Karl</li>, <li>Tane</li> 18 :first-childV1.1.4概述匹配第一個(gè)子元素':first' 只匹配一個(gè)元素，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素示例描述:在每個(gè) ul 中查找第一個(gè) liHTML 代碼:<ul> <li>John</li> <li>Karl</li> <li>Brandon</li></ul><ul> <li>Glen</li> <li>Tane</li>