jQuery學(xué)習(xí)2 選擇器的使用說明
更新時(shí)間：2010年02月07日 10:08:55 作者：
利用選擇器，選擇要被操作的html中的元素。
1.利用CSS的基本選擇器：
a：匹配所有鏈接<a>元素。
#*：匹配id為*的元素
.*：匹配CSS類為*的元素
a#*id.*class:匹配id為*id，并擁有CSS類為*class的鏈接元素。
以上是CSS中的寫法，在jQuery中用$("")包起來，如: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)容的元素包起來。比如選擇包含以http://開頭的href值的鏈接：a[href^=http://]
input[type=text]：匹配type特性為text的所有<input>元素
div[title=^my]:匹配title特性值以my開頭的所有<div>元素。
通過位置選擇
a：first：選擇器匹配頁面上的第一個(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中用$("")包起來，如: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)容的元素包起來。比如選擇包含以http://開頭的href值的鏈接：a[href^=http://]
input[type=text]：匹配type特性為text的所有<input>元素
div[title=^my]:匹配title特性值以my開頭的所有<div>元素。
通過位置選擇
a：first：選擇器匹配頁面上的第一個(gè)<a>元素
p：odd，p：even 分別匹配奇數(shù)和偶數(shù)元素
其他就不一一舉例了，如有需要可到相關(guān)網(wǎng)站查找。
相關(guān)文章
這篇文章主要介紹了JQuery擴(kuò)展對(duì)象方法操作,結(jié)合實(shí)例形式簡單分析了jQuery使用$.fn.extend方法擴(kuò)展對(duì)象方法的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
本篇文章主要給大家講述了jQuery圖片查看插件Magnify開發(fā)的詳細(xì)分析，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
基于jquery的拖動(dòng)布局插件，需要的朋友可以參考下。2011-11-11
使用jQuery簡單實(shí)現(xiàn)模擬瀏覽器搜索功能
這篇文章主要介紹了使用jQuery簡單實(shí)現(xiàn)模擬瀏覽器搜索功能,需要的朋友可以參考下2014-12-12
jq實(shí)現(xiàn)左側(cè)顯示圖片右側(cè)文字滑動(dòng)切換效果
這篇文章是基于jq技術(shù)實(shí)現(xiàn)左側(cè)顯示圖片右側(cè)文字滑動(dòng)切換效果的相關(guān)資料，有需要的小伙伴可以來參考下2015-08-08
jQuery組件easyui基本布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家分享一篇淺談ajax請(qǐng)求不同頁面的微信JSSDK問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了jQuery中DOM操作原則,結(jié)合實(shí)例形式分析了jQuery針對(duì)dom元素操作的四種常見原則,需要的朋友可以參考下2019-08-08
深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對(duì)jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來實(shí)現(xiàn)一個(gè)客戶分類列表的管理，如何利用Ajax和Json技術(shù)讓用戶操作起來覺得更輕松，感興趣的小伙伴們可以參考一下2015-10-10