jQuery學(xué)習(xí)2 選擇器的使用說(shuō)明
更新時(shí)間：2010年02月07日 10:08:55 作者：
利用選擇器，選擇要被操作的html中的元素。
1.利用CSS的基本選擇器：
a：匹配所有鏈接<a>元素。
#*：匹配id為*的元素
.*：匹配CSS類為*的元素
a#*id.*class:匹配id為*id，并擁有CSS類為*class的鏈接元素。
以上是CSS中的寫法，在jQuery中用$("")包起來(lái)，如:jQuery("p a.Class")
利用子選擇器、容器選擇器和特性選擇器，以下面的為例：
<ul class="myList">
<li><a href=http://jquery.com>jQuery supports</a>
<ul>
<li><a href="css1">CSS1</a></li>
<li><a href="css2">CSS2</a></li>
<li><a href="css3">CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
如果要選擇第一個(gè)列表<li>中的所有鏈接做操作就應(yīng)利用子選擇器：ul.myList > li >a 而不能像這樣ul.myList li a 因?yàn)樗羞@些鏈接<a>都是列表<li>元素的后代節(jié)點(diǎn).
子選擇器:父節(jié)點(diǎn)與直接子節(jié)點(diǎn)以右尖括號(hào)(>)隔開。
特性選擇器：將符合特定內(nèi)容的元素包起來(lái)。比如選擇包含以http://開頭的href值的鏈接：a[href^=http://]
input[type=text]：匹配type特性為text的所有<input>元素
div[title=^my]:匹配title特性值以my開頭的所有<div>元素。
通過(guò)位置選擇
a：first：選擇器匹配頁(yè)面上的第一個(gè)<a>元素
p：odd，p：even 分別匹配奇數(shù)和偶數(shù)元素
其他就不一一舉例了，如有需要可到相關(guān)網(wǎng)站查找。
a：匹配所有鏈接<a>元素。
#*：匹配id為*的元素
.*：匹配CSS類為*的元素
a#*id.*class:匹配id為*id，并擁有CSS類為*class的鏈接元素。
以上是CSS中的寫法，在jQuery中用$("")包起來(lái)，如:jQuery("p a.Class")
利用子選擇器、容器選擇器和特性選擇器，以下面的為例：
復(fù)制代碼 代碼如下:
<ul class="myList">
<li><a href=http://jquery.com>jQuery supports</a>
<ul>
<li><a href="css1">CSS1</a></li>
<li><a href="css2">CSS2</a></li>
<li><a href="css3">CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
如果要選擇第一個(gè)列表<li>中的所有鏈接做操作就應(yīng)利用子選擇器：ul.myList > li >a 而不能像這樣ul.myList li a 因?yàn)樗羞@些鏈接<a>都是列表<li>元素的后代節(jié)點(diǎn).
子選擇器:父節(jié)點(diǎn)與直接子節(jié)點(diǎn)以右尖括號(hào)(>)隔開。
特性選擇器：將符合特定內(nèi)容的元素包起來(lái)。比如選擇包含以http://開頭的href值的鏈接：a[href^=http://]
input[type=text]：匹配type特性為text的所有<input>元素
div[title=^my]:匹配title特性值以my開頭的所有<div>元素。
通過(guò)位置選擇
a：first：選擇器匹配頁(yè)面上的第一個(gè)<a>元素
p：odd，p：even 分別匹配奇數(shù)和偶數(shù)元素
其他就不一一舉例了，如有需要可到相關(guān)網(wǎng)站查找。
相關(guān)文章
詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過(guò)jQuery示例代碼演示outerWidth()函數(shù)的具體用法，介紹的非常詳細(xì)，有需要的朋友可以借鑒2015-07-07
這篇文章主要介紹了jQuery.one() 函數(shù)的用法，文中通過(guò)示例代碼幫助大家更好的學(xué)習(xí)，感興趣的朋友可以參考一下2020-06-06
jQuery晃動(dòng)層特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery晃動(dòng)層特效實(shí)現(xiàn)方法,實(shí)例分析了animate方法與css樣式的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
解決JQuery的ajax函數(shù)執(zhí)行失敗alert函數(shù)彈框一閃而過(guò)問(wèn)題
這篇文章主要介紹了解決JQuery的ajax函數(shù)執(zhí)行失敗alert函數(shù)彈框一閃而過(guò)問(wèn)題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
jquery 實(shí)現(xiàn)窗口的最大化不論什么情況
無(wú)論瀏覽器處于什么樣的設(shè)置，都要讓這個(gè)彈出的窗口最大化，那么怎么辦呢？下面為大家介紹下讓瀏覽器窗口從默認(rèn)大小變成我們自己的設(shè)置2013-09-09
jQuery.prototype.init選擇器構(gòu)造函數(shù)源碼思路分析
jQuery的核心思想可以簡(jiǎn)單概括為“查詢和操作dom”，今天主要是分析一下jQuery.prototype.init選擇器構(gòu)造函數(shù)，處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下，或許本文所提供的知識(shí)對(duì)你學(xué)習(xí)有所幫助2013-02-02
jquery跨域請(qǐng)求示例分享(jquery發(fā)送ajax請(qǐng)求)
這篇文章主要介紹了jquery跨域請(qǐng)求示例(jquery發(fā)送ajax請(qǐng)求),需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)無(wú)限往下滾動(dòng)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)無(wú)限往下滾動(dòng)效果代碼,涉及jQuery基于ajax交互操作數(shù)據(jù)庫(kù)數(shù)據(jù)及頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-04-04
jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
需要通過(guò)服務(wù)器端設(shè)置響應(yīng)頭、正確響應(yīng)options請(qǐng)求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實(shí)現(xiàn)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制氣泡圖的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03