JQuery-第02章 選擇器

1、jQuery基礎(chǔ)教程第二章 jQuery選擇器 什么是選擇器 jQuery選擇器的優(yōu)勢 jQuery選擇器分類 選擇器中的注意事項(xiàng) 案例研究 選擇器的擴(kuò)展1、什么是選擇器 使用特定的規(guī)則找到符合該規(guī)則的元素 jQuery：允許您對元素組或單個(gè)元素進(jìn)行操作 HTML：允許您對 DOM 元素組或單個(gè)DOM 節(jié)點(diǎn)進(jìn)行操作。CSS選擇器 標(biāo)簽選擇器：以文檔元素作為選擇符 ID選擇器：以文檔元素的唯一標(biāo)識符ID作為選擇符 類選擇器：以文檔元素的class作為選擇符 群組選擇器：多個(gè)選擇符應(yīng)用相同的樣式規(guī)則 后代選擇器：元素E的任意后代元素F 通配選擇符：以文檔的所有元素作為選擇符CSS選擇器選擇器選擇器

2、語法語法描述描述示例示例標(biāo)簽選擇器E CSS規(guī)則 以文檔元素作為選擇符tdwidth:12px;ID選擇器#ID CSS規(guī)則 以文檔元素的唯一標(biāo)識符ID作為選擇符#notewidth:12px;類選擇器.className CSS 規(guī)則 以文檔元素的class作為選擇符div.notefont-size:9px;群組選擇器E1,E2,E3 CSS規(guī)則 多個(gè)選擇符應(yīng)用相同的樣式規(guī)則td,div,afont-size:9px;后代選擇器E F CSS規(guī)則 元素E的任意后代元素F#links acolor:red;通配選擇符* CSS規(guī)則以文檔的所有元素作為選擇符*font-size:9px;jQu

3、ery選擇器 完全繼承CSS的風(fēng)格 可以非常便捷和快速的找出特定的DOM元素 選擇器是jQuery的根基 事件處理、遍歷DOM和Ajax操作都依賴于選擇器 jQuery的行為規(guī)則都必須在獲取到該元素后才能生效 與CSS選擇器寫法相近，但作用效果不同2、jQuery選擇器的優(yōu)勢 簡潔的寫法 $(#id)代替getElementById $(tagName)代替getElementByTagName 支持CSS13的選擇器 支持CSS1,CSS2的全部選擇器 支持CSS3的部分選擇器 獨(dú)有的選擇器 XPath在1.1.3.1版以后廢棄，但可以引入插件后使用 完善的處理機(jī)制 無需判斷選擇器是否存在

4、判斷jQuery對象是否存在應(yīng)使用.length0或者轉(zhuǎn)為DOM對象后判斷3、jQuery選擇器分類基本選擇器通過元素ID，class和標(biāo)簽名等來查找DOM元素層次選擇器通過DOM元素之間的層次關(guān)系來獲取特定元素，如后代元素，子元素，相鄰元素和同輩元素過濾選擇器通過特定的過濾規(guī)則來篩選出所需的DOM元素，規(guī)則與CSS中的偽類選擇器語法相同，即以冒號(:)開頭基本過濾選擇器內(nèi)容過濾選擇器可見性過濾選擇器屬性過濾選擇器子元素過濾選擇器表單對象屬性過濾選擇器表單選擇器為了使用戶能靈活的操作表單，jQuery中專門加入了表單選擇器，通過這個(gè)選擇器能極其方便地獲取到表單的某個(gè)或某類型的元素基本選擇器選擇

5、器選擇器描述描述返回返回示例示例#id根據(jù)給定的id匹配一個(gè)元素單個(gè)元素$(#test)選取id為test的元素.class根據(jù)給定的類名匹配元素集合元素$(.test)選取所有class為test的元素element根據(jù)給定的元素名匹配元素集合元素$(div)選取所有的元素*匹配所有元素集合元素$(*)選取所有的元素selector1,selector2,.,selectorN將每一個(gè)選擇器匹配到的元素合并后一起返回集合元素$(#test,div,p.myClass)選取id為test，所有元素和擁有class為myClass的所有標(biāo)簽元素的一組元素層次選擇器選擇器選擇器描述描述返回返回示例

6、示例$(ancestor descendant)選取ancestor元素(祖先)里所有descendant(后代)元素集合元素$(div span)選取里所有的元素$(parentchild)選取parent元素下的child子元素集合元素$(divspan)選取元素下元素名是的子元素$(prev+next)選取緊接在prev元素后的next元素集合元素$(.one+div)選取class為one的下一個(gè)同輩元素$(prevsiblings)選取prev元素之后的所有siblings元素集合元素$(#twodiv)選取id為two的元素后面的所有同輩元素基本過濾選擇器選擇器選擇器描述描述返回返

7、回示例示例:first選取第一個(gè)元素單個(gè)元素$(div:first)選取所有元素中第一個(gè)元素:last選取最后一個(gè)元素單個(gè)元素$(div:last)選取所有元素中最后一個(gè)元素:not(selector)去除所有給定選擇器匹配的元素集合元素$(div:not(.myClass)選取class不是myClass的元素:even選取索引是偶數(shù)的所有元素,索引從0開始集合元素$(div:even)選取索引是偶數(shù)的元素:odd選取索引是奇數(shù)的所有元素,索引從0開始集合元素$(div:odd)選取索引是奇數(shù)的元素:eq(index)選取索引等于index的元素單個(gè)元素$(div:eq(1)選取索引等于1的

8、元素基本過濾選擇器(續(xù))選擇器選擇器描述描述返回返回示例示例:gt(index)選取索引大于index的元素集合元素$(div:gt(1)選取索引大于1的元素(不包括1):lt(index)選取索引小于index的元素集合元素$(div:gt(1)選取索引小于1的元素(不包括1):header選取所有標(biāo)題元素,如h1,h2等集合元素$(:header)選取所有,.等元素:animated選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素集合元素$(div:animated)選取正在執(zhí)行動(dòng)畫的元素:focus選取當(dāng)前獲取焦點(diǎn)的元素集合元素$(:focus)選取當(dāng)前獲取焦點(diǎn)的元素內(nèi)容過濾選擇器選擇器選擇器描述描述返回

9、返回示例示例:contains(text)選取含有文本內(nèi)容為text的元素集合元素$(div:contains(我)選取含有文本我的元素:empty選取不包含子元素或者文本的空元素集合元素$(div:empty)選取不包含子元素(包括文本元素)的元素:has(selector)選取含有選擇器匹配的元素的元素集合元素$(div:has(p)選取含有元素的元素:parent選取含有子元素或者文本的元素集合元素$(div:parent)選取擁有子元素(包括文本元素)的元素可見性過濾選擇器選擇器選擇器描述描述返回返回示例示例:hidden選取所有不可見的元素集合元素$(:hidden)選取不可見的元素

10、.包括和等元素,如果只想選取元素,可以使用$(input:hidden):visible選取所有可見的元素集合元素$(div:visible)選取所有可見的元素屬性過濾選擇器選擇器選擇器描述描述返回返回示例示例attribute選取擁有此屬性的元素集合元素$(divid)選取擁有id的元素attribute=value選取屬性的值為value的元素集合元素$(divtitle=test)選取屬性title為test的元素attribute!=value選取屬性的值不等于value的元素集合元素$(divtitle!=test)選取屬性title不為test的元素(包含無title屬性的)att

11、ribute=value選取屬性的值以value開始的元素集合元素$(divtitle=test)選取屬性title以test開始的元素attribute$=value選取屬性的值以value結(jié)束的元素集合元素$(divtitle$=test)選取屬性title以test結(jié)束的元素attribute*=value選取屬性的值含有value的元素集合元素$(divtitle*=test)選取屬性title含有test的元素屬性過濾選擇器(續(xù))選擇器選擇器描述描述返回返回示例示例attribute|=value選取屬性等于給定字符串或以該字符串為前綴(該字符串后跟一個(gè)連字符-)的元素集合元素$(d

12、ivtitle|=en)選取屬性title等于en或以en為前綴的元素attribute=value選取屬性用空格分隔的值中包含一個(gè)給定值(value)的元素集合元素$(divtitle=uk)選取屬性title用空格分隔的值中包含字符uk的元素attribute1attribute2.attributeN用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器,滿足多個(gè)條件.每選擇一次,縮小一次范圍集合元素$(dividtitle=test)選取擁有屬性id,并且屬性title為test的元素子元素過濾選擇器選擇器選擇器描述描述返回返回示例示例:nth-child(index/even/odd)選取每個(gè)父元素下

13、的第index個(gè)子元素或者奇偶元素(index從1算起)集合元素:eq(index)值匹配一個(gè)元素,而:nth-child將為每一個(gè)父元素匹配子元素,并且:nth-child(index)的index是從1開始,而:eq(index)的index是從0開始:first-child選取每個(gè)父元素的第一個(gè)子元素集合元素:first只返回單個(gè)元素,而:first-child選擇符將為每個(gè)父元素匹配第一個(gè)子元素.如:$(ul li:first-child);選取每個(gè)中的第一個(gè)元素:last-child選取每個(gè)父元素的最后一個(gè)子元素集合元素:last只返回單個(gè)元素,而:last-child選擇符將為每個(gè)

14、父元素匹配最后一個(gè)子元素.如:$(ul li:last-child);選取每個(gè)中的最后一個(gè)元素:only-child如果某個(gè)元素是它父元素的唯一子元素,那么將會(huì)被匹配,如果父元素中含有其他元素,則不會(huì)被匹配集合元素$(ul li:only-child)在中選取是唯一子元素的元素表單對象屬性過濾選擇器選擇器選擇器描述描述返回返回示例示例:enabled選取所有可用的元素集合元素$(#form1:enabled)選取id為form1的表單內(nèi)所有可用元素:disabled選取所有不可用的元素集合元素$(#form2:disabled)選取id為form2的表單內(nèi)所有不可用元素:checked選取所有

15、被選中的元素(包含單選框,復(fù)選框)集合元素$(input:checked)選取所有被選中的元素:selected選取所有被選中的選項(xiàng)元素(下拉列表)集合元素$(select option:selected)選取所有被選中的選項(xiàng)元素表單選擇器選擇器選擇器描述描述返回返回示例示例:input選取所有,和元素集合元素$(:input)選取所有,和元素:text選取所有的單行文本框集合元素$(:text)選取所有單行文本框:password選取所有的密碼框集合元素$(:password)選取所有密碼框:radio選取所有的單選框集合元素$(:radio)選取所有單選框:checked選取所有的多選框集

16、合元素$(:checked)選取所有多選框:submit選取所有的提交按鈕集合元素$(:submit)選取所有提交按鈕:reset選取所有的重置按鈕集合元素$(:reset)選取所有重置按鈕:image選取所有的圖像按鈕集合元素$(:image)選取所有的圖像按鈕:button選取所有的按鈕集合元素$(:button)選取所有的按鈕:file選取所有的上傳域集合元素$(:file)選取所有的上傳域:hidden選取所有不可見元素選取所有不可見元素集合元素集合元素參見可見性過濾選擇器4、選擇器中的注意事項(xiàng) 選擇器中含有.,#,(或等特殊字符 W3C規(guī)定屬性值中不能含有這些特殊字符 真確寫法: $(#id#b) /id=id#b 轉(zhuǎn)義特殊字符# $(#id1)/id=id1 轉(zhuǎn)義特殊字符 $(#id.en)/id=id.en 轉(zhuǎn)義特殊字符. 屬性選擇器的符號問題 j