層次選擇器:
$('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);