jquery selector 基礎

http://www.cnblogs.com/zwl12549/archive/2008/08/09/1264163.html#commentform

Jquery的這套選擇符是比較帥氣的，借用了XPath2.0和CSS1-3中的語法，並且兼容了多個瀏覽器，讓原本非常複雜的DOM，一下子變得簡單起來了，手中最新的版本是1.2.2b，下面的所有例子，也是根據此版本提供的例子。

測試HTML代碼：

<divid="father">
   <divid="first">I am first</div>
   <divid="second"class="red">I am second</div>
   <divid="third"style="display:none">I am third</div>
</div>
<pclass="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);
//顯示4

層級選擇符：

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

alert($('#father .red').html());
//顯示I am second

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

alert($('#father > .red').html());
//顯示I am second

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

alert($('#father + .red').html());
//顯示I am forth

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

alert($('#first ~ #third').html());
//顯示I am third

基礎過濾符：

:first：匹配多個對象中的第一個對象
:last：匹配多個對象中的最後一個對象

alert($('.red:first').html());
//顯示I am second
alert($('div:last').html());
//顯示I am third

:not(selector)：匹配去除了not後面選擇符中內容的項

alert($('.red:not(#second)').html());
//顯示I am forth

:even：匹配所有對象中的第偶數個
:odd：匹配所有對象中的第奇數個

alert($('div:even').length);
//顯示2
alert($('div:odd').length);
//顯示2

:eq(index)：匹配某一下表的單獨某元素

alert($('div:eq(2)').html());
//顯示I am second

:gt(index)：匹配大於某一下標的所有元素
:lt(index)：匹配小於某一下標的所有元素

alert($('div:gt(1)').length);
//顯示2
alert($('div:lt(2)').length);
//顯示2

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

alert($(':header').length);
//顯示1

:animated：匹配所有有動畫效果的元素

functionanimateIt()
{
   $("#second").slideToggle("slow",animateIt);
}
animateIt();
alert($(':animated').html());
//顯示I am second

文本過濾符：

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

alert($('div:contains("first")').length);
//顯示2

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

alert($(':header:empty').length);
//顯示1

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

alert($('div:has("#third")').attr('id'));
//顯示father

:parent：匹配所有的父對象，父對象包含那些只含有文本的對象

alert($('div:parent').length);
//顯示4

可見性過濾符：

:hidden：匹配所有隱藏對象，或者input中的hidden類型
:visible：匹配所有可見的對象

alert($('div:hidden').length);
//顯示1
alert($('div:visible').length);
//顯示3

屬性過濾符：

[attribute]：匹配擁有某一屬性的所有對象
[attribute=value]：匹配擁有某一屬性和值的對象
[attribute!=value]：匹配擁有某一屬性，且不是某一值的對象
[attribute^=value]：匹配擁有某一屬性，且以某一值開頭的對象
[attribute$=value]：匹配擁有某一屬性，且以某一值結尾的對象
[attribute*=value]：匹配擁有某一屬性，且包含某一值的對象

alert($('div[class]').html());
//顯示I am second
alert($('div[class=red]').html());
//顯示I am second
alert($('div[id!=father]').length);
//顯示3
alert($('div[id^=f]').length);
//顯示2
alert($('div[id$=d]').length);
//顯示2
alert($('div[id*=ir]').length);
//顯示2

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

alert($('div[id=second][class^=r]').length);
//顯示I am second

子過濾符：

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

alert($('#father div:nth-child(1)').html());
//顯示I am first
alert($('#father div:nth-child(even)').length);
//顯示1
alert($('#father div:nth-child(odd)').length);
//顯示2
alert($('#father div:nth-child(3n)').length);
//顯示1，其實是每3個一匹配

:first-child：匹配第一個子元素
:last-child：匹配最後一個子元素
這兩個匹配符也可以對多個父對象的所有子元素進行匹配操作

alert($('#father div:first-child').html());
//顯示I am first
alert($('#father div:last-child').html());
//顯示I am third

:only-child：如果一個父元素只有一個子元素，就匹配這個子元素

alert($('div:only-child').length);
//顯示0