DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 在jQuery中 常用的選擇器介紹
在jQuery中 常用的選擇器介紹
編輯:JQuery特效代碼     

層次選擇器:

$('div p');//選取div下的所有的p元素

$('div>p').css('border','1px solid red');//只選取div下的直接子元素

//相鄰的元素

$('div ~ p).css('border','1px solid red');與$('div').nextAll('p')等價;//表示div後面的

所有p兄弟元素

$('div ~ *').css('border','1px solid red');//表示div後面的所有兄弟元素

$('div +p').css('border','1px solid red');與$('div').next('p')等價//這種寫法表示div後

只找緊挨著的第一個兄弟元素,並且該元素是p。

獲得兄弟元素的方法:

next(); //當前元素之後的緊鄰著的第一個兄弟元素(下一個)

nextAll();//當前元素之後的所有兄弟元素

prev();//當前元素之前的緊鄰著的兄弟元素(上一個)

prevAll();//當前元素之前的所有兄弟元素

siblings();//當前元素的所有兄弟元素

基本過濾選擇器:

$('p:first')與$('p').first()是等價的。獲取所有p元素中的第一個P元素

$('p:last')與$('p').last()

$('p:eq(2)')在所有的p元素中找到索引為2的元素

$('p:even')選取所有奇數的p標簽

$('p:odd')選取所有偶數的p標簽

$('p:not(.tst)').css();選取所有的不應用.tst這種樣式的p元素not後面寫一個選擇器名稱

$('p:gt(1)')選取所有索引值大於1的p元素

$('p:lt(3)')選取所有索引值小於3的p元素。

$(':header')選取頁面上所有的h1-h6的元素。(如果這樣寫的話,中間絕對不能有空格。)


屬性過濾選擇器:

$("div[id]")選取有id屬性的<div>

$("div[title=test]")選取title屬性為“test”的<div>,jQuery中沒有對getElementsByName

進行封裝,用$("input[name=abc]")

$("div[title!=test]")選取title屬性不為“test”的<div>

還可以選擇開頭【name^=值】、結束【 name$=值】、包含【 name*=值】等,條件還

可以復合。【[屬性1=a][屬性2=b]…】(*)

表單對象屬性選擇器(過濾器):

$("#form1 :enabled")選取id為form1的表單內所有啟用的元素

$("#form1 :disabled")選取id為form1的表單內所有禁用的元素

$(“input:checked”)選取所有選中的元素(Radio、CheckBox),這個中間不能加空格.

$("select :selected")選取所有選中的選項元素(下拉列表)


表單濾選擇器:

$('#form1:enabled');//這個表示能夠啟用的且id為form1的標簽

$('#form1 :enabled');//這個表示能夠啟用的且id為form1下的所有啟用的元素。

$('input:checked')

$('input:disabled')

$ ('select:selected')

$(“:input")選取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一樣,

$("input")只獲得<input>

$(":text")選取所有單行文本框,等價於

$("input[type=text]"),$(‘input[type=text]'),$(‘:text');

$(“:password”)選取所有密碼框。


內容過濾選擇器:

:contains(text):過濾出包含給定文本的元素。

:empty包含沒有子元素的或者是內容為空的元素。

:has(selecttor)

:parent 獲得有子元素的元素。


可見性過濾器:

:hidden

選取所有不可見元素包括:(如果直接寫:hidden則會包含head\title\script\style….)

1.表單元素type=“hidden”

2.設置css的display:none

3.高度和寬度明確設置為0的元素。

4.父元素時隱藏的,所以子元素也是隱藏的

visibility: hidden 與opacity為0不算,因為還占位所以不認為是hidden.(與之前版本

jQuery不太一樣,1.3.2之前)

:visible

選取所有可見元素

子元素過濾選擇器:

first-child 與first的區別:first只能選取第一個,而first-child,則能選取每個子元素的第一個元素。

last-child:

only-child:匹配當前父元素中只有一個子元素的元素。

nth-child:對比eq()來理解,eq()值匹配一個,nth-child()為每個父元素都要匹配一個子元素。

nth-child(index),index從1開始

nth-child(even)

nth-child(odd)

nth-child(3n),選取3的倍數的元素

nth-child(3n+1)滿足3的倍數+1的元素


注意:

1.通過jQuery選擇器選擇的對象本身就是一個jQuery對象,選擇器具有隱式迭代 的作用,例如:

$('p').click(function(){

alert(this.innerText);

});

是為所有的p都注釋了click事件。

2.無論選擇器選擇了幾個元素返回的一個元素都是一個集合對象,如果沒有找到相應的元素,則這個集合對象的length值為0,如果選擇到了元素,這個length的元素就是選擇的元素的索引值。所以也根據這個屬性來判斷元素是否存在。例如:

Iif($('#div').length>0)//判斷元素是否存在

3.在事件中this還是表示當前觸發事件的元素的對象,但是這裡的this是dom對象而不是jQuery對象。如果需要執行jQuery中的方法或屬性時,應該把this轉換為jQuery對象

轉換方式為:$(this);

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved