jquery selector 基礎

測試HTML代碼：

<div id="father">

   <div id="first">I am first</div>

   <div id="second" class="red">I am second</div>

   <div id="third" style="display:none">I am third</div>

</div>

<p class="red">I am forth</p>

<h4></h4>

基礎：

#id：根據對象的id屬性擷取對象。

alert($('#first').html());

//顯示I am first

element：比對某一HTML标簽的所有對象

alert($('div').length);

//顯示4

.class：根據對象的class屬性擷取對象

alert($('.red').length);

//顯示2

*：擷取所有的對象

alert($('*').length);

//顯示HTML中對象的和，但是不同的浏覽器，結果會有所不同

selector1, selector2, selectorN：擷取多個選擇符的合集，不剔出重複項。

alert($('.red,#second,p').length);

層級選擇符：

ancestor descendant：這個選擇符就是空格，表示先找到第一個選擇符的所有對象，然後在他的子孫節點中找到所有符合第二個選擇符的對象。

alert($('#father .red').html());

//顯示I am second

parent > child：這個選擇符就是大于号，表示先找到第一個選擇符的所有對象，然後在他的子節點（不能是孫節點）中找到所有符合第二個選擇符的對象。

alert($('#father > .red').html());

prev + next：這個選擇符就是加号，表示先找到第一個選擇符的所有對象，然後找和他同級的緊跟着的下一個節點同時符合第二個選擇符的對象。

alert($('#father + .red').html());

//顯示I am forth

prev ~ siblings：這個選擇符就是~号，表示先找到第一個選擇符的所有對象，然後找和他同級的以後所有節點裡面同時符合第二個選擇符的對象。

alert($('#first ~ #third').html());

//顯示I am third

基礎過濾符：

:first：比對多個對象中的第一個對象

:last：比對多個對象中的最後一個對象

alert($('.red:first').html());

alert($('div:last').html());

:not(selector)：比對去除了not後面選擇符中内容的項

alert($('.red:not(#second)').html());

:even：比對所有對象中的第偶數個

:odd：比對所有對象中的第奇數個

alert($('div:even').length);

alert($('div:odd').length);

:eq(index)：比對某一下表的單獨某元素

alert($('div:eq(2)').html());

:gt(index)：比對大于某一下标的所有元素

:lt(index)：比對小于某一下标的所有元素

alert($('div:gt(1)').length);

alert($('div:lt(2)').length);

:header：比對所有的header元素，例如h1,h2,h3,h4,h5,h6

alert($(':header').length);

//顯示1

:animated：比對所有有動畫效果的元素

function animateIt()

{

   $("#second").slideToggle("slow", animateIt);

}

animateIt();

alert($(':animated').html());

文本過濾符：

:contains(text)：比對内部擁有該文本元素的對象，包含間接有用的情況

alert($('div:contains("first")').length);

:empty：比對所有沒有子元素的對象

alert($(':header:empty').length);

:has(selector)：比對所有至少含有一個子選擇符的對象

alert($('div:has("#third")').attr('id'));

//顯示father

:parent：比對所有的父對象，父對象包含那些隻含有文本的對象

alert($('div:parent').length);

可見性過濾符：

:hidden：比對所有隐藏對象，或者input中的hidden類型

:visible：比對所有可見的對象

alert($('div:hidden').length);

alert($('div:visible').length);

//顯示3

屬性過濾符：

[attribute]：比對擁有某一屬性的所有對象

[attribute=value]：比對擁有某一屬性和值的對象

[attribute!=value]：比對擁有某一屬性，且不是某一值的對象

[attribute^=value]：比對擁有某一屬性，且以某一值開頭的對象

[attribute$=value]：比對擁有某一屬性，且以某一值結尾的對象

[attribute*=value]：比對擁有某一屬性，且包含某一值的對象

alert($('div[class]').html());

alert($('div[class=red]').html());

alert($('div[id!=father]').length);

alert($('div[id^=f]').length);

alert($('div[id$=d]').length);

alert($('div[id*=ir]').length);

[selector1][selector2][selectorN]：比對同時符合多個屬性選擇符的對象

alert($('div[id=second][class^=r]').length);

子過濾符：

:nth-child(index/even/odd/equation)：比對子元素中的某一下标/偶數/奇數/等式的對象，:eq(index)隻能比對某單一對象的子元素特征，而這個方法可以比對多個對象的某一子元素共同特征

alert($('#father div:nth-child(1)').html());

alert($('#father div:nth-child(even)').length);

alert($('#father div:nth-child(odd)').length);

alert($('#father div:nth-child(3n)').length);

//顯示1，其實是每3個一比對

:first-child：比對第一個子元素

:last-child：比對最後一個子元素

這兩個比對符也可以對多個父對象的所有子元素進行比對操作

alert($('#father div:first-child').html());

alert($('#father div:last-child').html());

:only-child：如果一個父元素隻有一個子元素，就比對這個子元素

alert($('div:only-child').length);

//顯示0

This entry was posted

本文轉自shenzhoulong  51CTO部落格，原文連結：http://blog.51cto.com/shenzhoulong/384778，如需轉載請自行聯系原作者