jQuery選擇器
jQuery選擇器
一、基本分類
jQuery選擇器大致可以分為兩類,基本選擇器和過濾選擇器,總體結構體系如下:
二、基本選擇器
2.1 CSS選擇器
CSS選擇器(鏈接:http://www.cnblogs.com/qinwang913/p/3443766.html)
2.1.1 標簽選擇器
2.1.2 ID選擇器
2.1.3 類選擇器
例: $(".t").css("border","2px solid blue");
2.1.4 通用選擇器
2.1.5 群組選擇器
例: $("div,span,p.styleClass").css("border","2px solid blue");
2.2 層級選擇器
在HTML方檔中,每個元素總是處在DOM節點樹上的某個位置,文檔層次結構中元素之間總是存在著某種層級關系。
2.2.1 子元素選擇器
2.2.2 后代選擇器
2.2.3 緊鄰同輩選擇器
2.2.4 相鄰同輩選擇器
2.3 表單域選擇器
表單域指網頁中的input,textareaselect,button元素。jQuery 表單域選擇器專門用于從文檔中選擇表單域。
2.3.1 :input選擇器
用于選擇所有input,textareaselect,button元素。
2.3.2 :text選擇器
用于選擇所有單行文本框(<input type="text"/>)。
2.3.3 :password選擇器
用于選擇所有密碼框(<input type="password"/>)。
2.3.4 :radio選擇器
用于選擇所有單選按鈕(<input type="radio"/>)。
2.3.5 :chckbox選擇器
用于選擇所有復選框(<input type="chckbox"/>)。
2.3.6 :file選擇器
用于選擇所有文件域(<input type="file"/>。
2.3.7 :image選擇器
用于選擇所有圖像域(<input type="image"/>)。
2.3.8 :hidden選擇器
用于選擇所有不可見元素(<input type="hidden"/>)。
2.3.9 :button選擇器
用于選擇所有按鈕(<input type="button"/>和<button>···</button>)。
2.3.10 :submit選擇器
用于選擇所有提交按鈕(<input type="submit"/>和<button>···</button>)。
2.3.11 :reset選擇器
用于選擇所有重置按鈕(<input type="reset"/>)。。
三、過濾選擇器
過濾選擇器可以使用元素的索引值,內容,屬性,子元素位置,表單域屬性以及可見性作為篩選條件獲取相關元素。
3.1簡單過濾選擇器
根據索引值對元素進行篩選,類似于CSS的偽類選擇器,以冒號(:)開頭;并且要和另一選擇器一起使用。
3.1.1 :first選擇器
例: $("td:first").css("border","2px solid blue");
3.1.2 :last選擇器
3.1.3 :odd選擇器
3.1.4 :even選擇器
3.1.5 :eq()選擇器
3.1.6 :gt()選擇器
3.1.7 :lt()選擇器
3.1.8 :not選擇器
3.1.9 :header選擇器
3.1.10 :animated選擇器
3.2內容過濾選擇器
3.2.1:contains()選擇器
3.2.2: has()選擇器
3.2.3 :empty選擇器
3.2.4 :parent選擇器
用于選擇包含子元素或者文本的所有空元素,與:empty選擇器作用相反。
3.3簡單過濾選擇器
在HTML文檔中,元素的開始標記中通常包含多個屬性,根據各種屬性對由選擇器查詢到的元素進行過濾。
語法格式:“選擇器[屬性過濾選擇器]”,可根據是否包含指定屬性或根據屬性值從查詢到的元素進行篩選。
3.3.1 包含屬性選擇器
3.3.2 屬性等于選擇器
3.3.3 屬性包含選擇器
3.3.4 屬性包含單詞選擇器
3.3.5 屬性不等于選擇器
用于選擇不包含給定屬性,或者包含指定屬性但該屬性不等于某個值的所有元素。
3.3.6 屬性開始選擇器
3.3.7 屬性結尾選擇器
3.3.8 復合屬性選擇器
3.4子元素過濾選擇器
子元素過濾選擇器必須與某個選擇器一起使用,得到一個父元素數組,然后再按照子元素過濾選擇器指定的索引值或規則進一步篩選出部分子元素。
3.4.1 :first-child選擇器
3.4.2 :last-child選擇器
3.4.3 :nth-child選擇器
3.4.4 :only-child選擇器
3.5表單過濾選擇器
3.5.1:checked選擇器
選擇器可指定要查找的元素類型,可以是input(單選按鈕和復選框),:radio(單選按扭) :checkbox(復選框)
3.5.2:enabled選擇器
3.5.3:disabled選擇器
3.5.4:selected選擇器
3.6可見性過濾選擇器
如果某元素及其父元素在文檔中占用空間,則認為該元素為可見;反之,則此元素不可見。
3.6.1:hidden選擇器
3.6.1:visible選擇器
四、總結
至此,關于CSS選擇器和jQuery選擇器的知識小結終于結束了,很釋然,很快樂,給自己的知識作個整理,也將這些分享給每個需要的人,大家一起加油努力。