首先了解一下css選擇器，css即層疊樣式表他將網頁結構和表現樣式完全分離出來，利用css選擇器可以輕鬆在不改變html結構的前提下改變樣式。他是利用獲取目標元素後施加樣式，有三種方式：行間樣式表、內部樣式表、外部樣式表。
選擇器語法
描述示例
標籤選擇器
e以標籤作為選擇符
tdid選擇器
#id以文件元素的唯一id作為選擇符
#info
類選擇器
e.classname
.classname
以文件元素的class作為選擇器符
div.info
.info
群組選擇器
e1,e2,e3
多個選擇符共用同樣的樣式
div,p,a
後台選擇器
e f元素e的後代元素f作為選擇符
#links a
萬用字元選擇器
*以文件的所有元素作為選擇符
* 如果是內部樣式表則將其放在html中的
jquery選擇器完全繼承了css的風格，通過選擇器輕鬆獲取到dom元素後，然後為其新增行為。
function click()
click me
$("#cl").click(function());
上面是分別利用js和jquery完成的事件，可以看到jquery可以有效的將js**和html分離開來，只需要為標籤新增id屬性。css選擇器找到元素後是為其新增樣式，而jquery是為其新增行為，並且jquery操作css比單純css功能更加強大。
js獲取頁面元素，如果元素不存在則會報錯，所以要對其進行檢驗。而jquery中獲取物件後，即使該元素不存在也不會抱錯，使用js判斷元素是否存在：
jquery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器
選擇器描述
返回示例
#id根據指定的id匹配元素
單個元素
$("#info")獲取id為info的元素
.class
根據指定的類名匹配元素
集合元素
$(".info")獲取class屬性為info的元素
element
根據指定標籤匹配元素
集合元素
$("p")選取所有p標籤的元素
＊匹配所有元素
集合元素
$("p")選區所有元素
select1,select2....
匹配每乙個指定的元素
集合元素
$("div,span,p.myclass")選區所有元素、元素、class為myclass的元素
$("#demo").css("background","#ffffff")改變id為demo的背景顏色。
$("p").css("background","#ffffff")改變所有p元素的背景顏色。
$(".demo").css("background","#ffffff")改變所有class為demo的背景顏色。
$("span,div.demo,#demo").css("background","#ffffff")改變所有span元素、div元素中class為demo、id為demo的元素背景顏色。
如果想要通過dom元素間的層次關係獲取元素，可以使用層次選擇器。比如：後代元素、子元素、相鄰元素和同輩元素等。
選擇器描述
返回示例
$("sele1 sele2")
後代元素，獲取sele1元素後的所有sele2元素
集合元素
$("div span")獲取div元素內的span元素
$("parent > child")
子代元素，這個是獲取parent子代元素，上面的那個是獲取其下的所有元素。
集合元素
$("div > span")獲取div元素下的元素
$("selec1 + selec2")
相鄰元素，選取selec1元素後的selec2元素
集合元素
$(".demo + div")選取class屬性為demo的下乙個元素
$("sele1~sele2")
同代元素，選取sele1元素後的所有sele2元素
集合元素
$("#demo~div") 選取id為demo元素後的所有div元素
相鄰元素選擇器和同代元素選擇器有更簡單的替代
$(".demo + div") 相當於 $(".demo").next("div");
$("#demo ~ div")相當於$("#demo").nextall("div");這個只能獲取其後面的所有元素
$("#demo").siblings("div")無論前後都能獲取。
通過特定的過濾規則篩選所需的dom元素。
選擇器描述
返回示例
:first
獲取第乙個元素
單個元素
$("div:first")獲取div元素中的第乙個div元素
:last
獲取最後乙個元素
單個元素
$("div:last")獲取div元素中的最後乙個元素
:not(selector)
去除指定匹配的元素
集合元素
$("div:not(.demo)")選取div中class屬性不是demo的元素
:even
選取索引是偶數的元素，索引從0開始
集合元素
$("input:even")選取input元素中索引是偶數的元素
:odd
選取索引是奇數的元素，索引從0開始
集合元素
$("input:odd")選取input元素中索引是奇數的元素
:eq(index)
選取索引等於index的元素
單個元素
$("input:eq(1)")選取input元素中索引等於1的元素
:gt(index)
索引大於index元素
集合元素
$("div:gt(1)")選取div中索引大於index的元素
:lt(index)
索引小於index元素
集合元素
同上小於
:header
選取所有head元素
集合元素
$(":header")選取頁面中所有標題元素
:animated
選取正在執行動畫的所有元素
集合元素
$("div:animated")選取正在執行動畫的元素
:focus
選取當前聚焦點元素
單個元素
$(":focus")選取當前聚焦點元素
以上是過濾選擇器中基本過濾器，還有內容過濾器：包含指定文字過濾器:contains(text)、文字為空過濾器:empty、含有指定元素的過濾器:has(selector)、擁有子元素過濾器:parent
可見性過濾器：選取所有不可見元素 :hidden ，可見元素:visible。屬性過濾器$("div[id]")選取div中含有id屬性的元素，$("div[title=test]")選取屬性tile為test的div元素，$("div[title!=test]")屬性不為test的元素$("div[title^=test]")屬性值以test開頭,$("div[title$=value]")屬性值以value結尾，$("div[title*=test]")屬性值含有test，$(div[id][title=value])含有屬性id並且含有屬性title屬性值為value的元素。另外後有自元素過濾器ntlochild()、first-child()、last-child()、only-child.
表單屬性過濾器：$("#form1:enabled")id為form1的表單內所有可用元素$("$form2:disabled")id為form2的表單內所有不可用元素,$(input:checked)input元素被選中的元素,$(select option:selected)選單被選中的元素。
選擇器描述
返回示例
:input
選取所有,,元素
集合元素
$(":input")
:text
選取所有單行文字框
集合元素
$(":text")
:password
選取所有密碼框
集合元素
$(":password")
:radio
選取所有單選框
集合元素
$(":radio")
:checkbox
選取所有核取方塊
集合元素
$(":checkbox")
:submit
選取所有提交按鈕
集合元素
$(":submit")
:reset
選取所有重置按鈕
集合元素
$(":reset")
:button
選取所有按鈕
集合元素
$("button")
:file
選取所有上傳域
集合元素
$(":file")
:hidden
選取所有不可見元素
集合元素
$(":hidden")
:image
選取所有影象的按鈕
集合元素
$(":image")
jquery選擇器學習
學習方式,照著列表乙個個敲一遍,記個大概,知道有這麼個選擇器.之後使用的時候查查w3c,就會用了 p 取得p標籤 p1 取得id為p1的元素 p1 取得class p1的元素 href 選擇屬性帶有href的元素 href 選擇href 的元素 href 選擇href 的元素 選擇所有href屬性以...
jquery學習 選擇器
選擇器 basic button html 標籤 test 標籤id test 標籤的class test,test,h1 多選用逗號隔開 全選 等級選中 div code 選擇所有在div下面的所有code元素，不考慮有多少層 li ul 意味著直接子元素 strong em 姐妹選擇器，只會選擇...
JQuery選擇器 選擇器簡介
在開始學習jquery選擇器之前，有必要了解一下css 層疊樣式表 技術。css是一項出色的技術，它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構，只需通過新增不同的css規則，就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...