jQuery之高級選擇器

二.jQuery高級選擇器

針對上次課有點復雜的選擇器，或之前沒有接觸過的選擇器。

為什么要反復的講選擇器，這個就是jQuery的一個核心點，在之前js的時候，通過復雜的document.getElement(s)ById|ByTagName|ByClassName等等，這些方式，找頁面的元素對象。同樣，在jQuery里面，我們要操作頁面對象還是需要找對象，找頁面對象，就是通過各類的選擇器來找，簡化我們的業務代碼量。

$(“各類選擇器”)–>對象

$(“各類選擇器”).操作

$(“div”).css(‘屬性’,"值)

$("#result").val(result)

$("#jia").click(function(){undefined

//在這里我們可以若干操作的代碼

1

})

2.1基本過濾選擇器

基本過濾選擇器

符號 說明 用法

:eq(index) index是從0開始的下一個數字,選擇序號為index的元素.(選擇第一個匹配的元素) $(“li:eq(1)”).css(“background”,“red”)

:gt(index) index是從0開始的一個數字,選擇序號大于index的元素 $(“li:gt(2)”).css(“background”,“red”)

:lt(index) index是從0開始的一個數字,選擇序號小于index的元素 $(“li:lt(2)”).css(“background”,“red”)

:odd 選擇所有序號為奇數行的元素 $(“li:odd”).css(“background”,“red”)

:even 選擇所有序號為偶數行的元素 $(“li:even”).css(“background”,“red”)

:first 選擇匹配第一個元素 $(“li:first”).css(“background”,“red”)

:Iast 選擇匹配的最后一個元素 $(“li:last”).css(“background”,“red”)

2.2.屬性選擇器

針對頁面元素來說，元素的屬性是什么？？？

,這個里面src,title,是屬性。

熱賣寶

href class就是a標簽的屬性。

在jquery里面，基本選擇器[屬性選擇器]

屬性選擇器

符號 說明 用法

$(“a[href]”) 選擇所有包含href屬性的元素 $(“a[href]”).css(“background”,“red”)

$(“a[href=‘luffy’]”) 選擇href屬性值為luffy的所有a標簽 $(“a[href=‘luffy’]”).css(“background”,“red”)

$(“a[href!=‘baidu’]”) 選擇href屬性不等于baidu的所有元素(包括沒有href的元素) $(“a[href!=‘baidu’]”).css(“background”,“red”)

$(“a[href^=‘web’]”) 選擇所有以web開頭的元素 $(“a[href^=‘web’]”).css(“background”,“red”)

( " a [ h r e f ("a[href ("a[href=‘cn’]") 選擇所有以cn結尾的元素 ( " a [ h r e f ("a[href ("a[href=‘cn’]").css(“background”,“red”)

$(“a[href*=‘i’]”) 選擇所有包含i這個字符的元素,可以是中英文 $(“a[href*=‘i’]”).css(“background”,“red”)

$(function(){ //標簽名[屬性名] 查找所有含有id屬性的該標簽名的元素 $('li[id]').css('color','red'); //匹配給定的屬性是what值得元素 $('li[class=what]').css('font-size','30px'); //[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素 $('li[class!=what]').css('font-size','50px'); //匹配給定的屬性是以某些值開始的元素 $('input[name^=username]').css('background','gray'); //匹配給定的屬性是以某些值結尾的元素 $('input[name$=222]').css('background','greenyellow'); //匹配給定的屬性是以包含某些值的元素 $('button[class*=btn]').css('background','red') })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

2.3.篩選選擇器

篩選選擇器(通過方法調用)

符號 說明 用法

find(selector) 查找指定元素的所有后代元素(包括子子孫孫) $("#i_wrap").find(“li”).css(“color”,“red”); 選擇id為i_wrap的所有后代元素li

children() 查找指定元素的直接子元素(親兒子元素) $("#i_wrap").children(“ul”).css(“color”,“red”); 選擇id為i_wrap的所有子代元素ul

siblings() 查找所有兄弟元素(不包括自己) $("#i_liItem").siblings().css(“color”,“red”); 選擇id為i_liItem的所有兄弟元素

parent() 查找父元素(親的) $("#i_liItem").parent(“ul”).css(“color”,“red”); 選擇id為i_liItem的父元素

eq(index) 查找指定元素的第index個元素,index是索引號,從0開始 $(“li”).eq(2).css(“color”,“red”); 選擇所有li元素中的第二個

first()

last()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

總結：

不用大家記憶，按照老師提供的筆記或幫助文檔，練習一下即可。

2.5.表單選擇器 Forms

名稱 說明 解釋

:input 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素: $(":input")

:text 匹配所有的文本框 查找所有文本框: $(":text")

:password 匹配所有密碼框 查找所有密碼框: $(":password")

:radio 匹配所有單選按鈕 查找所有單選按鈕

:checkbox 匹配所有復選框 查找所有復選框: $(":checkbox")

:submit 匹配所有提交按鈕 查找所有提交按鈕: $(":submit")

:image 匹配所有圖像域 匹配所有圖像域: $(":image")

:reset 匹配所有重置按鈕 查找所有重置按鈕: $(":reset")

:button 匹配所有按鈕 查找所有按鈕: $(":button")

:file 匹配所有文件域 查找所有文件域: $(":file")

表單屬性過濾器

語法 描述 示例

:enabled 匹配所有可用元素 $(" #userform :enabled" )匹配form內部除編號輸入框外的所有元素

:disabled 匹配所有不可用元素 $(" #userform :disabled" )匹配編號輸入框

:checked 匹配所有被選中元素（復選框、單項按鈕、select 中的option） $(" #userform :checked" )匹配“性別”中的“男”選項和“愛好”中的“編程”選項

:selected 匹配所有選中的option 元素 $(" #userform :selected" ) 匹配“家鄉”中的“北京”選項

jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。