二.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第三,...