您當前位置：首頁 > web前端 > jquery > jQuery學習2：選擇器的使用

jQuery學習2：選擇器的使用

來源：程序員人生發布時間：2013-11-11 20:09:14 閱讀次數：3014次

利用選擇器，選擇要被操作的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>

如果要選擇第一個列表<li>中的所有鏈接做操作就應利用子選擇器：ul.myList > li >a 而不能像這樣ul.myList li a 因為所有這些鏈接<a>都是列表<li>元素的后代節點.

子選擇器:父節點與直接子節點以右尖括號(>)隔開。

特性選擇器：將符合特定內容的元素包起來。比如選擇包含以http://開頭的href值的鏈接：a[href^=http://]

input[type=text]：匹配type特性為text的所有<input>元素

div[title=^my]:匹配title特性值以my開頭的所有<div>元素。

通過位置選擇

a：first：選擇器匹配頁面上的第一個<a>元素

p：odd，p：even 分別匹配奇數和偶數元素

其他就不一一舉例了，如有需要可到相關網站查找。

作者BLOG：http://www.cnblogs.com/yangzhijia/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生