jQuery 選擇器超詳細

2021-08-20 22:31:52 字數 3944 閱讀 3383

一.基本選擇器

1.   $(「#demo」) ： 選擇 id為demo的第乙個元素 

$("#demo").css('background','black");   //有多個只選擇第乙個
2.  $(「.item」): 選擇所有class為item的元素 

$(


".item").css('background','black")
3.  $(『div』) : 選擇所有標籤為div的元素 

$(


'div') .css('background','black")
4.  $(「*」) :選擇所有的元素，配合其他選擇器來使用 

$(


"*").css('background','black")
5.  $(『.item,div』) :選擇多個指定的選擇器，這裡是指item和div元素 

$(


'.item,div') .css('background','black")
6.  $(「li#aa」) : 交集選擇器 

$(


"li#aa") .css('background','black")
二.層級選擇器

層級選擇器是選擇了選擇符後面的那個元素，比如，div > p ,是選擇 > 後面的 p 元素

1.  空格: 後代選擇器,選擇所有的後代 

$(


"div span")
2.  > : 子代選擇器，選擇所有的子代元素 

$(


"div>span")
3.  + :緊鄰選擇器，選擇該元素的緊鄰選擇器 

$(


"div+span")
4.  ~ :兄弟選擇器，選擇該元素後面的兄弟元素 

$(


"div~span")
三.過濾選擇器

過濾選擇器主要是以冒號開頭：

a.基本過濾選擇器

1.   :eq(index)

index 是從0開始的乙個數字 ，選擇序號為index的元素 

$("li:eq(2)").css('background',"red")    


//選中li 第三個元素設定背景顏色，選中第乙個匹配元素
2.  :last

選擇匹配最後乙個元素 

$("li:last").css('background',"red")    


// 選擇li中最後乙個元素
3.  :first

選擇匹配第乙個元素 

$("li:first").css('background',"red")     


// 選擇li中第乙個元素
4.  :even / :odd

odd選擇所有的序號為奇數的元素 

$("li:odd").css('background',"red")     


//選中li奇數元素設定背景顏色
5.  :it(index)/:gt(index)

index是從0開始的乙個數字 ，選擇序號大於index 

$("li:gt(2)").css('background',"red")      // 選中li 大於第三個元素設定背景顏色
b.內容過濾選擇器

c.可見性過濾選擇器

d.屬性過濾選擇器 $(「a」)

1.  $(「a[attribute]」) : 選出屬性為attribute的a元素 

$(


'a[href]').css("color","red");
2.  $(「a[attribute = value] 「) : 選出屬性attribute為value值的a元素 

$(


'a[href=「value」]').css("color","red");
3.  $(「a[attribute！=value]」) :選出所有屬性值不為value的a元素，包括沒有該屬性的a元素 

$(


'a[href!=「value」]').css("color","red"); 


// 注意： $(


'a').css("color","red") 沒有href的a元素也會被選中
4.  $(「a[attribute^=value] 「):選中以value開頭的a元素

// 選中href值以http開頭的a元素5.  $(「a[attribute=value] 「): 選中以value結尾的a元素。

（在attribute後面有美元符號，因為編輯原因無法顯示 ） 

$(


'a[href$=「cn」]').css("color","red"); 


//選中href值以cn結尾的a元素
6.  $(「a[attribute*=value]」) ：選中包含value的a元素 ，value可以是中英文 

$(


'a[href*=「i」]').css("color","red") 選中href值包含i的a元素
$(「a[attribute][attribute] 「) ：滿足這兩個屬性的a元素被選出來 

$('a[href][title]).css("color","red")；


//選中有href和title屬性的a元素
e.子元素過濾選擇器

f.表單物件屬性選擇器

四.篩選選擇器（方法）

1.   .parent(expr)：選擇父元素,可以篩選 

$("span").parent().css("font-size","40px")  


篩選： $("span").parent(.selected).css("font-size","40px")
2.  .children(): 選擇子元素 

$("span").children().css("font-size","40px")
3.  .siblings(): 選擇兄弟元素,除了它自己其餘的兄弟元素 

$("span").siblings().css("font-size","40px")
4.  .eq(index) :選擇第index個

與：eq很相似，但.eq()是方法 

$(


"span").eq(1).css("font-size","40px") // 選擇第乙個span元素
5.  .find():查詢元素 

$("div").find("#one").css('color',"red")     //查詢div下面的id為one的元素
6.  .first():選擇第乙個元素 

$("span").first().css("font-size","40px")

jQuery常用選擇器總結 超詳細

語法 描述備註 選取所有html元素 this 選取當前html元素 p.intro 選取class為intro的元素 p.first 選取第乙個元素 ul li first 選取第乙個元素的第乙個元素 ul li first child 選取每乙個元素的第乙個元素 href 選取帶有href屬性的...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前，有必要了解一下css 層疊樣式表 技術。css是一項出色的技術，它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構，只需通過新增不同的css規則，就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一，實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分，它必須被兩個反斜槓轉義 引數 id,用於搜尋的，通過元素的 id 屬性中給定的值。示例 查...