Jquery選擇器彙總

2022-05-26 12:00:09 字數 3940 閱讀 4768

一.基本選擇器

1.id選擇器

$("#id").css("background","#fffff");

2.class選擇器,選中class=mini的元素

$(".mini").css("background","#fffff");

3.標籤選擇器,選中div標籤的元素

$("div").css("background","#fffff");

4.所有選擇器,選中所有選擇元素

$("*").css("background","#fffff");

5.並列選擇器,選中id=id和class=mini的兩個元素

$("#id,.mini")("background","#fffff");

二.基本過濾選擇器

1.獲取table下面所有tr中的第乙個子元素

$("table tr:first").css("background","#fffff");

2.獲取table下面所有tr中的最後乙個子元素

$("table tr:last").css("background","#fffff");

3.獲取table下所有的tr索引大於3的子元素

$("table tr:gt(3)").css("background","#fffff");

4.獲取table下所有的tr索引小於3的子元素

$("table tr:lt(3)").css("background","#fffff");

5.獲取table下所有的tr索引等於於3的子元素

$("table tr:eq(3)").css("background","#fffff");

6.獲取table下所有的tr索引等於偶數的子元素

$("table tr:even").css("background","#fffff");

7.獲取table下所有的tr索引等於奇數的子元素

$("table tr:odd").css("background","#fffff");

8.獲取table下所有的tr並且class!=one的所有子元素

$("table tr:not(.one)").css("background","#fffff");

9.獲取標題標籤的元素例如:h1,h2,h3

$(":header").css("background","#fffff");

10.獲取當前正在執行動畫的所有元素

$(":animalted").css("background","#fffff");

11.獲取當前獲取焦點的元素

$(":focus").css("background","#fffff");

三.層次選擇器 siblings  prve  prveall  next nextall  closet

1.獲取body下所有的div元素

$("body div").css("background","#fffff");

2.獲取body下第一代子節點

$("body > div").css("background","#fffff");

3.獲取所有class=one緊挨的第乙個div元素(同輩和子節點,選哪乙個?)

$(".one + div").css("background","#fffff");

4.獲取所有class=one後所有的div兄弟元素(包不包括子節點?)

$(".one ~ div").css("background","#fffff");

四.內容過濾選擇器

1.所有div元素中標籤內文字包含di的所有div元素

$("div:contains(di)").css("background","#fffff");

2.沒有子元素的所有div元素

$("div:empty").css("background","#fffff");

3.class=mini的所有div元素

$("div:has(.mini)").css("background","#fffff");

4.所有包含子元素的div元素

$("div:parent").css("background","#fffff");

五.子元素過濾選擇器

1.獲取class=one的div的 第二個子元素

$("div.one :nth-child(2)").css("background","#fffff");

2.獲取class=one的div的 第乙個子元素

$("div.one :first-child").css("background","#fffff");

3.獲取class=one的div的 最後乙個子元素

$("div.one :last-child").css("background","#fffff");

3.獲取class=one的div的 唯一乙個子元素

$("div.one :only-child").css("background","#fffff");

六.屬性過濾選擇器

1.包含title屬性的所有div元素

$("div[title]").css("background","#fffff");

2.id=one的所有div元素

$("div[id=one]").css("background","#fffff");

3.id!=one的所有div元素

$("div[id!=one]").css("background","#fffff");

4.id以one開頭的所有div元素例如:id=onecall

$("div[id^=one]").css("background","#fffff");

5.id以one結束的所有div元素例如:id=callone

$("div[id$=one]").css("background","#fffff");

6.title中用空格分開的值當中包含uk的所有div元素 例如title='one uk'

$("div[title~=uk]").css("background","#fffff");

7.id屬性中包含one的所有div元素

$("div[id*=one]").css("background","#fffff");

8.id屬性以en為字首(後面以'-'分開)的所有div元素 例如:id='en-uk'

$("div[id|=en]").css("background","#fffff");

9.組合選擇器 包含id屬性且title中包含one的所有div元素

$("div[id][title*=one]").css("background","#fffff");

七.可見性過濾選擇器

1.所有可見的div元素

$("div:visible").css("background","#fffff");

2.所有隱藏的div元素

$("div:hidden").css("background","#fffff");

八.表單選擇器

1.$("form :image")

$("form :button") 和 都可以被選擇

$("form :riado")  

$("form :reset")  

$("form :hidden") 和 

都可以被選擇

$("form :text")  

$("form :file")  

$("form select") 

$("form textera") 

九.表單屬性過濾選擇器

1.所有被選中的input元素

$("input:checked")

2.所有被禁用的input元素

$("input:disabled")

3.所有可用的input元素

$("input:enabled")

4.所有被選中的selected元素

$("select :selected")

jquery選擇器彙總

div id 選擇所有含有id屬性的div元素 input name keleyicom 選擇所有的name屬性等於 keleyicom 的input元素 input name keleyicom 選擇所有的name屬性不等於 keleyicom 的input元素 input name keleyi...

jQuery 選擇器彙總

jquery裡的選擇器有3種 元素選擇器,id選擇器,類選擇器 div 選擇所有 div 元素 test 選擇所有id為test的元素 myclass 選擇class myclass 的所有元素 以這3種選擇器為基礎,運用不同的語法 可以精準的選取物件 p first 選擇第乙個 p 元素 可以理解...

jQuery常用選擇器彙總

一 基本選擇器 aaaaaaaaaaa bbbbbbbbb ccccccccc function 二 層級選擇器 aaaaaaaaa bbbbbbbbb ccccccccc ddddddddd eeeeeeeee function 三 基本過濾選擇器 aaaaaaaaa bbbbbbbbb cccc...