jquery selector基礎課程實例詳解

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

測試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#($('p##') #.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('#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 secondalert($('p:last') .html
());

#//顯示I am third

:not(selector)：匹配去除了not後面選擇符中內容的項目#alert(#$('.red:not(#second)#'). html
());

//顯示I am forth
:even

：符合所有物件中的第偶數個######:odd###：符合所有物件中的第奇數個###

alert($('p:even').length);
//显示2
alert($('p:odd').length);
//显示2

:eq(index)：匹配某一下表的单独某元素

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

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

alert($('p:gt(1)').length);
//显示2
alert($('p:lt(2)').length);
//显示2

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

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

:animated：匹配所有有动画效果的元素

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

文本过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

alert($('p:contains("first")').length);
//显示2

:empty：匹配所有没有子元素的对象

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

:has(selector)：匹配所有至少含有一个子选择符的对象

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

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

alert($('p:parent').length);
//显示4

可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象

alert($('p:hidden').length);
//显示1
alert($('p:visible').length);
//显示3

属性过滤符：

[attribute]：匹配拥有某一属性的所有对象
[attribute=value]：匹配拥有某一属性和值的对象
[attribute!=value]：匹配拥有某一属性，且不是某一值的对象
[attribute^=value]：匹配拥有某一属性，且以某一值开头的对象
[attribute$=value]：匹配拥有某一属性，且以某一值结尾的对象
[attribute*=value]：匹配拥有某一属性，且包含某一值的对象

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

[selector1][selector2][selectorN]：匹配同时符合多个属性选择符的对象

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

子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征

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

:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

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

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

alert($('p:only-child').length);
//显示0

以上是jquery selector基礎課程實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！