Jquery 選擇器 詳解

2022-02-19 15:29:48 字數 4413 閱讀 8685

一、基本選擇器

1 $("#div1").html("hello world 1"); //

根據id匹配元素(a)

2 $(".c1").html("hello world 2"); //

根據yclass匹配元素(b)

3 $("span").html("hello world 3"); //

根據元素名稱匹配 (c)

4 $("span,div.c1").html("hello world 4"); //

匹配頁面所有的span 和class=c1的div(b c)

5 $("*").html("hello world 5"); //

匹配頁面所有元素,也包含body

二、層級選擇器

1 $("body span").html("hello world 1"); //

選取body中所有的span(a b d)

2 $("body>span").html("hello world 2"); //

選取body元素的子span元素(a b)

3 $("span.c1+div").html("hello world 3"); //

選取class為c1的span的下乙個div元素,注意是同級元素

4 $("span.c1").next().html("hello world 3"); //

跟上行效果相同 (c)

5 $("span.c1~div").html("hello world 4"); //

選取class為c1的span的後面的所有div

6 $("span.c1").nextall().html("hello world 4"); //

跟上行效果相同(c e)

三、基本過濾選擇器

1 $("div:first").html("hello world 1"); //

選取所有div中的第乙個div

2 $("span:last").html("hello world 2"); //

選取所有span中的最後乙個

3 $("span:not(.c1)").html("hello world 3"); //

選取除class為c1的span外的所有span

4 $("span:even").html("hello world 4"); //

選取索引為偶數的span,索引從0開始

5 $("span:odd").html("hello world 5"); //

選取索引為奇數的span,索引從0開始

6 $("span:eq(2)").html("hello world 6"); //

選取指定索引的span,索引從0開始

7 $("span:gt(0)").html("hello world 7"); //

選取大於指定索引的span,不包含指定索引

8 $("span:lt(2)").html("hello world 8"); //

選取小於指定索引的span,不包含指定索引

9 $(":header").html("hello world 9"); //

選取頁面中所有的標題元素 h1 h2 h3...

四、內容過濾選擇器

1 $("span:contains(aa)").html("hello world 1"); //

選取內容包含aa的span元素

2 $("span:empty").html("hello world 2"); //

選取空的span元素

3 $("div:has(span)").html("hello world 3"); //

選取包含span的div元素

4 $("span:parent").html("hello world 4"); //

選取包含子元素的span元素,包含文字

五、屬性過濾選擇器

1 $("span[id]").html("hello world 1"); //

選取有屬性id的span元素

2 $("span[id=span2]").html("hello world 2"); //

選取屬性id等於span2的span元素

3 $("span[id!=span2]").html("hello world 3"); //

選取屬性id不等於為span2的span元素

4 $("span[id^=span]").html("hello world 4"); //

選取屬性id以span開始的span元素

5 $("span[id$=2]").html("hello world 5"); //

選取屬性id以2結尾的span元素

6 $("span[id*=an]").html("hello world 6"); //

選取屬性id包含an的span元素

7 $("span[id*=an][class$=2]").html("hello world 6"); //

選取屬性id包含an並且class以結尾的span元素

六、子元素過濾選擇器

1 $("div.c1 :nth-child(1)").html("hello world 1"); //

選取class等於c1的div的指定索引子元素

2 $("div.c1 :nth-child(even)").html("hello world 2"); //

選取class等於c1的div的偶數子元素

3 $("div.c1 :nth-child(odd)").html("hello world 3"); //

選取class等於c1的div的奇數子元素

4 $("div.c1 :first-child").html("hello world 4"); //

選取class等於c1的div的第乙個子元素

5 $("div.c1 :last-child").html("hello world 5"); //

選取class等於c1的div的最後乙個子元素

6 $("div.c1 :only-child").html("hello world 6"); //

選取class等於c1的div只有乙個子元素的子元素

七、表單物件屬性過濾選擇器

1 $("#form1 input:enabled").val("hello world 1"); //

選取form表單中沒有禁用的文字框

2 $("#form1 input:disabled").val("hello world 2"); //

選取form表單中沒有禁用的文字框

3 $("#form1 input:checked").attr("checked",false); //

選取form表單中選的核取方塊

4 $("select option[selected]").each(function () );

八、選擇器要注意的地方

1

<

body

>

2<

div

id="div#1"

>aaaaaaaaaaa

div>

3<

div

class

="c[1]"

>bbbbbbbbb

div>

4<

div

class

="c1"

>

5<

div

name

="div"

>ccccccccc

div>

6<

div

name

="div"

>ddddddddd

div>

7<

div

name

="div"

>eeeeeeeee

div>

8<

div

class

="c1"

name

="div"

>fffffffff

div>

9div

>

10<

div

class

="c1"

name

="div"

>gggggggg

div>

11<

div

class

="c1"

name

="div"

>hhhhhhhh

div>

12body

>

1314

$(function () );

view code

Jquery 選擇器 詳解

一 基本選擇器 1 div1 html hello world 1 根據id匹配元素 a 2 c1 html hello world 2 根據yclass匹配元素 b 3 span html hello world 3 根據元素名稱匹配 c 4 span,div.c1 html hello worl...

JQuery選擇器詳解

id class 復合選擇器 div p span 層級選擇器 div下的p元素中的span元素 div p 父子選擇器 div下的所有p元素 div p 相鄰元素選擇器 div後面的p元素 僅乙個p div p 兄弟選擇器 div後面的所有p元素 同級別 p last 類選擇器 加 過濾選擇器 第...

jQuery選擇器詳解

根據所獲取頁面中元素的不同,可以將jquery選擇器分為4大類 基本選擇器 層次選擇器 過濾選擇器 表單選擇器。其中,過濾選擇器有可以分為6種 簡單過濾選擇器 內容過濾選擇器 可見性過濾選擇器 屬性過濾選擇器器 子元素過濾選擇器 表單物件屬性過濾選擇器。1 基本選擇器 id class 元素標籤 s...