選擇器概念

jQuery選擇器是通過標簽、屬性或者內容對HTML內容進行選擇，選擇器運行對HTML元素組或者單個元素進行操作。

jQuery選擇器使用$符號，等同于jquery，例如： $(“li”) = jquery(“li”)

同樣等同于javascript中的：document.getElemmentsByTagName/id/class語句；

1 元素選擇器

$(“P”);? //選擇P元素，注意P為大寫；

$(“ #container”); //選擇id=”container”的元素；

$(“ .articles”);?? //選擇class=”articles”的元素；

$(“.promo”, ”#france”);?? //id與class混合選擇，用 “,”分隔開；

2 屬性選擇器

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

$(“[href]”)? 選擇所有帶有href屬性的元素；

$(“href=’#’”) 選取所有帶有href值等于“#”的元素；

$(“href!=’#’”) 選取所有帶有href值不等于“#”的元素；

$(“href$=’.jpg’”)選取所有href值以”.jpg”結尾的元素；

3 CSS選擇器

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

?$(“P”).css(“background-color”,”red”);

4 其他選擇器語法

$(this)??????????? 當前HTML元素

???? $(“P”)??????????? 所有<P>元素

???? $(“p.intro”)??????? 所有class=”intro”的<P>元素

???? $(“.intro”)???????? 所有class=”intro”的元素

???? $(“ul li:first”)?????? 每個<ul>的第一個<li>元素

???? $(“[href$=’.jpg’]”)?? 所有帶有以“.jpg”結尾的屬性值的href元素

???? $(“div#intro.head”)? id=”intro”的<div>元素中的所有class=”head”的元素

?

???? 選擇指定元素下的所有子元素

???? $(“#destinations li”);? //選中id為destinations下所有的li子元素；

?

? ? 選擇直屬子元素

??? $(“#destionations > li”);? //使用“>”符號選擇直屬子元素，與不加“>”符號的區別為//只為#destionations下一個層次的子元素，不包括子子元素；

?

? ?? 偽選擇器

? ? first（第一個）???? last（最后一個）???? odd（奇數個）?? even（偶數個）

??? 偽選擇器的語法為在子元素名稱后面加“：”號，加參數；

??? $(“#destionations li:frist”);

??? $(“#destionations li:last”);

??? $(“#destionations li:odd”);

??? $(“#destionations li:even”);

?

轉載于:https://www.cnblogs.com/LWWTT/p/11093988.html

總結

以上是生活随笔為你收集整理的jQuery选择器种类整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。