jQuery選擇器

xiemuran發表於2021-12-25

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

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" 的元素


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69997780/viewspace-2849380/,如需轉載,請註明出處,否則將追究法律責任。

相關文章