JQuery選擇器

Css選擇器找到元素後添加樣式，JQuery選擇器找到元素後添加行爲，其中JQuery選擇器分爲：基本選擇器、層次選擇器、過濾選擇器和表單選擇器

基本選擇器是經過元素id，class和標籤名來獲取dom元素，網頁中每一個id只能使用一次，可是class可使用屢次，用法： $('username'),獲取id=username的元素 $('.left'),獲取全部class=left的元素 $('p'),獲取全部標籤爲<p>的元素 $('*'),選取全部元素 $('div,span,p.testClass'),獲取全部<div>,<span>和class=testClass的<p>標籤元素

層次選擇器能夠經過dom元素間的層次關係來取得特定元素 $('div span')選取<div>裏的全部的<span>元素 $('div > span')選取<div>元素下的元素名是<span>的元素 $('.one + div')選取class爲one的下一個<div>兄弟元素 = $('.one').next('div') $('#two~div') 選取id爲two的元素後面的全部<div>兄弟元素 = $('.two').nextAll('div')

過濾選擇器： 過濾選擇器又包括基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器

基本過濾選擇器： :first $('div:first')選取全部<div>元素中的第一個<div>元素 :last $('div:last')選取全部<div>元素中的最後一個<div>元素 :not(selector) $('input:not(.myClass)')選取class不是myClass的<div>元素 :even $('input:even')選取索引值爲偶數的<input>元素 :odd $('input:even')選取索引值爲奇數的<input>元素 :eq(index) $('input:eq(1)')選取索引值等於1的<input>元素 :gt(index) $('input:gt(1)')選取索引值大於1的<input>元素 :lt(index) $('input:lt(1)')選取索引值小於1的<input>元素 :header $(':header')獲取網頁中全部的<h1><h2><h3>...元素 :animated $('div:animated')獲取正在執行動畫的<div>元素

內容過濾選擇器： :contains(text) $("div:coontains('我')")選取含有文本'我'的<div>元素 :empty $("div:empty")選取不包含子元素（包含文本元素）的<div>空元素 :has(selector) $('div:has(p)')選取含有<p>元素的<div>元素 :parent $('div:parent')選取擁有子元素(包含文本元素)的<div>元素

可見性過濾選擇器： :hidden $(':hidden')選取全部不可見的元素，包含<input type='hidden'/><div style='display:none'/>和<div style="visibility:hidden"/>等元素，若是值選取input元素，可使用$('input:hidden') :visible $('div:visible')選取全部可見元素<div>

屬性過濾選擇器： [attribute] $('div[id]')選取擁有屬性id的元素 [attribute=value] $("div[title='test']")選取屬性title爲test的div元素 [attribute!=value] $("div[title!='test']")選取屬性title不爲test的div元素,注意沒有屬性title的div元素也會被選取 [attribute^=value] $("div[title^='test']")選取屬性title以test開始的div元素 [attribute$=value] $("div[title$='test']")選取屬性title以test結束的div元素 [attribute*=value] $("div[title='test']")選取屬性title含有test的div元素 [seletor1][selector2][selectorN] $("div[id][title=$'test']")選取屬性擁有id且屬性title爲test結束的div元素

表單對象屬性過濾選擇器

:enabled $("#form :enabled")選取id爲form的表單內全部的可用元素 :disabled $("#form :enabled")選取id爲form的表單內全部的不可用元素 :checked $("input:check")選取全部被選中的input元素 :selected $("select:selected")選取全部被選中的選項元素

表單選擇器 :input $(":input") 選取全部的Input、textarea、select和button元素 :test $(":text") 選取全部的單行文本框 :password $(":password")選取全部的密碼框 :radio $(":radio")選取全部的單選框 :checkbox $(":checkbox")選取全部的 複選框 :submit $(":submit")選取全部的 提交按鈕 :image $(":image")選取全部的 圖像按鈕 :reset $(":reset")選取全部的重置按鈕 :button $(":button")選取全部的按鈕 :file $(":file")選取全部的上傳域 :hidden $(":hidden")選取全部的不可見元素