jQuery 選擇器

選擇器允許您對元素組或單個元素進行操作。

jQuery 選擇器

在前面的章節中，我們展示了一些有關如何選取HTML 元素的實例。

關鍵點是學習jQuery 選擇器是如何準確地選取您希望應用效果的元素。

jQuery 元素選擇器和屬性選擇器允許您通過標籤名、屬性名或內容對HTML 元素進行選擇。

選擇器允許您對HTML 元素組或單個元素進行操作。

在HTML DOM 術語中：

選擇器允許您對DOM 元素組或單個DOM 節點進行操作。

jQuery 元素選擇器

jQuery 使用CSS 選擇器來選取HTML 元素。

$("p") 選取<p> 元素。

$("p.intro") 選取所有class="intro" 的<p> 元素。

$("p#demo") 選取所有id="demo" 的<p> 元素。

jQuery 屬性選擇器

jQuery 使用XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有href 屬性的元素。

$("[href='#']") 選取所有帶有href 值等於"#" 的元素。

$("[href!='#']") 選取所有帶有href 值不等於"#" 的元素。

$("[href$='.jpg']") 選取所有href 值以".jpg" 結尾的元素。

jQuery CSS 選擇器

jQuery CSS 選擇器可用於改變HTML 元素的CSS 屬性。

下面的例子把所有p 元素的背景顏色更改為紅色：

實例

$("p").css("background-color","red");

親自試一試

更多的選擇器實例

語法	描述
$(this)	當前HTML 元素
$("p")	所有<p> 元素
$("p.intro")	所有class="intro" 的<p> 元素
$(".intro")	所有class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每個<ul> 的第一個<li> 元素
$("[href$='.jpg']")	所有帶有以".jpg" 結尾的屬性值的href 屬性
$("div#intro .head")	id="intro" 的<div> 元素中的所有class="head" 的元素

如需完整的參考手冊，請訪問我們的jQuery選擇器參考手冊。

資料來源: http://www.w3school.com.cn/jquery/jquery_selectors.asp

Javascript

2015年3月9日星期一