jQuery學習2 選擇器的使用說明

2024-05-06 14:11:37

字體：大中小

來源：轉載

供稿：網友

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 分別匹配奇數和偶數元素
其他就不一一舉例了，如有需要可到相關網站查找。

上一篇：javascript 函數速查表

下一篇：JavaScript Event學習第四章傳統的事件注冊模型