jQuery中常用的選擇器

2022-03-28 20:03:27 字數 4048 閱讀 9613

層次選擇器:

$('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[title=test]")選取

title

屬性為「

test」的,

jquery

中沒有對

getelementsbyname        

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

$("div[title!=test]")選取

title

屬性不為「

test

」的還可以選擇開頭【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")

不一樣,     

$("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());

是為所有的p

都注釋了

click

事件。2.

無論選擇器選擇了幾個元素返回的乙個元素都是乙個集合物件,如果沒有找到相應的元素,則這個集合物件的length值為0

,如果選擇到了元素,這個

length

的元素就是選擇的元素的索引值。所以也根據這個屬性來判斷元素是否存在。例如:

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

3.在事件中

this

還是表示當前觸發事件的元素的物件,但是這裡的

this

是dom

物件而不是

jquery

物件。如果需要執行

jquery

中的方法或屬性時,應該把

this

轉換為jquery

物件轉換方式為:$(this);

jQuery中常用的選擇器 (常用的選擇器有哪些)

一 基本選擇器 基本選擇器是jquery中最常用也是最簡單的選擇器,它通過元素的id class和標籤名等來查詢dom元素。1 id選擇器 id 描述 根據給定的id匹配乙個元素,返回單個元素 注 在網頁中,id名稱不能重複 示例 katex parse error expected eof got...

jquery 常用選擇器

myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可以運用多種的選擇方...

jQuery常用選擇器

1.所有的函式大體分為四組 1 dom操作函式 2 事件處理函式 3 動畫函式 4 ajax操作 2.jquery函式的特性 1 幾乎所有的函式都自帶迴圈功能,可以對選中的元素進行遍歷 2 幾乎所有的函式都返回jquery物件本身,可以實現方法的鏈式呼叫 3 jquery物件轉換為dom物件 div...