jQuery之高階選擇器

2021-10-05 15:04:32 字數 1879 閱讀 8959

二.jquery高階選擇器

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

為什麼要反覆的講選擇器,這個就是jquery的乙個核心點,在之前js的時候,通過複雜的document.getelement(s)byid|bytagname|byclassname等等,這些方式,找頁面的元素物件。同樣,在jquery裡面,我們要操作頁面物件還是需要找物件,找頁面物件,就是通過各類的選擇器來找,簡化我們的業務**量。

$(「各類選擇器」)–>物件

$(「各類選擇器」).操作

$(「div」).css(『屬性』,"值)

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

$("#jia").click(function())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()

總結:

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

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高階選擇器

和css層級選擇器類似,可以通過層級關係獲取對應標籤物件。語法 a b 獲得a元素內部的所有的b元素。後代 a b 獲得a元素下面的所有b子元素。子標籤 a b 獲得a元素同級下乙個b元素。直接後兄弟 a b 獲得a元素之後的所有b元素。一般後兄弟 子代111111 子代222222 子代33333...

JQuery 學習 高階選擇器

第一 群組選擇器 css pdiv strong jquery function divdiv div pp p strong strong strong css div,strong,p jquery function divdiv divppp strong strong strong 後代選擇...

JQuery 學習 高階選擇器

第一,後代選擇器 box p css color red box find p css color red pqpq pqpqpqp p全部紅色 第二,子代選擇器 box p css color blue box children p css color blue pq pqpq pqpq p第三,...