jQuery學習筆記(一) jQuery選擇器

　　jQuery中的選擇器繼承了CSS的選擇器。

　　利用jQuery選擇器，能夠很是便捷和快速地找出特定的DOM元素，而後爲它們添加相應的行爲，而無需擔憂瀏覽器是否支持這一選擇器。學會使用選擇器是學習jQuery的基礎，jQuery的行爲規則都必須在獲取到元素後才能生效。

　　jQuery選擇器主要分如下幾類：

　　　　1 基本選擇器

　　　2 層次選擇器

　　　3 過濾選擇器

　　　　3.1 基本過濾選擇器

　　　　　　3.2 內容過濾選擇器

　　　　　　3.3 可見性過濾選擇器

　　　　　　3.4 屬性過濾選擇器

　　　　　　3.5 子元素過濾選擇器

　　　　　　3.6 表單對象屬性過濾選擇器 

　　4 表單選擇器

　1 基本選擇器

　　　 　　基本選擇器是jQuery中最經常使用的選擇器，也是最簡單的選擇器，它經過id，class，和標籤名等來查找DOM元素。

選擇器	描述	示例
#id	根據id匹配一個元素	$("#test")　　選取id爲test的元素
.class	根據類名匹配元素	$(".test")　　 選取全部class爲test的元素
element	根據元素名匹配元素	$("p")　　　　選取全部的<p>元素
*	匹配全部元素	$("*")　　　　選取全部元素
selector1, selector2, selectorN	將每個選擇器匹配到的元素合併後一塊兒返回	$("div,span,p.test")　　選取全部<div>，<span>，和class爲test的<p>標籤的一組元素

 

　　2 層次選擇器

　　　 　　若是想經過DOM元素之間的層次關係來獲取特定元素，例如後代元素、子元素、相鄰元素和同輩元素等，那麼層次選擇器是一個很是好的選擇。

選擇器	描述	示例
$("div span")	選取div 元素裏的全部span（後代）元素	$("div span")　　　 選取<div>裏的全部的<span>元素
$("parent > child")	選取parent元素下的child（子）元素	$("div > span")　　 選取<div>元素下元素名是<span>的子元素
$("prev + next")	選取緊接在prev元素後的next元素	$("#one + p")　　　選取id爲one元素後的下一個<p>同輩元素
$("prev + siblings")	選取prev元素以後的全部siblings元素	$("#two~p")　　　  選取id爲two元素後的全部<p>同輩元素

　　

　　3 過濾選擇器

　　　過濾選擇器主要是經過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的僞類選擇器語法相同，即選擇器都以（:）開頭。　　

　　　3.1 基本過濾選擇器　

選擇器	描述	示例
:first	選取第1個元素	$("div:first")　　　 選取全部<div>元素中第1個<div>元素
:last	選取最後一個元素	$("div:last")　　 　選取全部<div>元素中最後一個<div>元素
:not(selector)	去除全部與給定選擇器匹配的元素	$("input:not(.myclass)")　　選取class不是myclass的<input>元素
:even	選取索引是偶數的全部元素，索引從0開始	$("input:even")　　　  選取索引是偶數的<input>元素
:odd	選取索引是奇數的全部元素，索引從0開始	$("input:odd")　　　    選取索引是奇數的<input>元素
:eq(index)	選取索引等於index的元素，（index從0開始）	$("input:eq(1)")　　　 選取索引等於1的<input>元素
:gt(index)	選取索引大於index的元素，（index從0開始）	$("input:gt(1)")　　　 選取索引大於1的<input>元素（大於1，而不包括1）
:lt(index)	選取索引小於index的元素，（index從0開始）	$("input:lt(1)")　　　  選取索引小於1的<input>元素（小於1，而不包括1）
:header	選取全部h1,h2,h3一類的標題元素	$(":header")　　　　　選取網頁中全部的<h1>，<h2>，<h3>......
:animated	選取當前正在執行動畫的全部元素	$("div:animated")　　 選取正在執行動畫的<div>元素
:focus	選取當前得到焦點的元素	$(":focus")　　　　　　選取當前得到焦點的元素

 

　　3.2 內容過濾選擇器

選擇器	描述	示例
:contains(text)	選取含有文本內容爲"text"的元素	$("div:contains('我')")　　選取含有文本內容爲"我"的<div>元素
:empty	選取不包含子元素或者文本的空元素	$("div:empty")　　　　　選取不包含子元素或者文本元素的<div>空元素
:has(selector)	選取含有選擇器所匹配的元素的元素	$("div:has(p)")　　　　　選取含有<p>元素的<div>元素
:parent	選取含有子元素或者文本的元素	$("div:parent")　　　　   選取擁有子元素（包括文本元素）的<div>元素

 

　　3.3 可見性過濾選擇器

選擇器	描述	示例
:hidden	選取全部不可見的元素	$(":hidden")　　       選取全部不可見的元素
:visible	選取全部可見的元素	$("div:visible")　　    選取全部可見的<div>元素

 

　　3.4 屬性過濾選擇器

選擇器	描述	示例
[attribute]	選取擁有此屬性的元素	$("div[id]")　　選取擁有屬性id 的元素
[attribute=value]	選取屬性的值爲value元素	$("div[title=test]")　　選取屬性title爲"test"的<div>元素
[attribute!=value]	選取屬性的值不等於value元素	$("div[title!=test]")　　選取屬性title不等於"test"的<div>元素（沒有屬性title的<div>元素也會被選取）
[attribute^=value]	選取屬性的值以value開始的元素	$("div[title^=test]")　　選取屬性title以"test"開始的<div>元素
[attribute$=value]	選取屬性的值以value結束的元素	$("div[title$=test]")　　選取屬性title以"test"結束的<div>元素
[attribute*=value]	選取屬性的值含有value的元素	$("div[title*=test]")　　選取屬性title含有"test"結束的<div>元素
[attribute][attribute2][arrtibuteN]	用屬性選擇合併成一個複合屬性選擇器，知足多個條件。每選擇一次，縮小一次範圍。	$("div[id][title$='test']")　　選取擁有屬性id, 而且屬性title以」test「結束的<div>元素

 

　　3.5 子元素過濾選擇器　

選擇器	描述	示例
:nth-child(index/even/odd/equation)	選取每一個父元素下的第index個子元素或者奇偶數（index從1算起）	:eq(index)只匹配一個元素（index從0算起），而:nth-child將爲每個父元素匹配子元素（index從1算起） :nth-child(even)    選取每一個父元素下的索引值是偶數的元素 :nth-child(odd)    選取每一個父元素下的索引值是奇數的元素
:first-child	選取每一個父元素的第1個子元素	:first只返回單個元素，而:first-child選擇符將爲每一個父元素匹配第一個子元素。 例如 $("ul li:first-child")   　選取每一個<ul>中第1個<li>元素
:last-child	選取每一個父元素的最後一個子元素	:last只返回單個元素，而:last-child選擇符將爲每一個父元素匹配第一個子元素。 例如 $("ul li:last-child")   　選取每一個<ul>中最後一個<li>元素
:only-child	若是某個元素是它父元素中惟一的子元素，那麼將會被匹配。若是父元素中含有其餘元素，則不會被匹配。	$("ui li:only-child")　　在<ul>中選取是惟一子元素的<li>元素

 

　　3.6 表單對象屬性過濾選擇器 

選擇器	描述	示例
:enabled	選取全部可用的元素	$("#form1 :enabled")　　選取id 爲」form1「的表單內的全部可用元素
:disabled	選取全部不可用的元素	$("#form1 :disabled")　　選取id 爲」form1「的表單內的全部不可用元素
:checked	選取全部被選中的元素（單選框，複選框）	$("input:checked")　　　　選取全部被選中的<input>元素
:selected	選取全部被選中的選項元素（下拉列表）	$("select option:selected")　　選取全部被選中的選項元素

 

　　4 表單選擇器

　　　　　　利用表單選擇器，能方便地獲取表單的某個或某類型的元素。

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

 

　  jQuery中文網：http://www.jquery123.com/