屬性過濾選擇器,子元素過濾選擇器

2021-06-19 16:28:40 字數 1553 閱讀 4811

1.獲取p的文字

段1段2

方法一:

$("p").each(function(index,domele));

});

jquery.函式名()//是jquery的全域性函式、

方法二:

var $p=$("p");

$.each($p,function(index,domele));

});2.隔行變色

$("table:eq(0) tr:even").css("background","red");//包括子子孫孫,包括table的tr,以及tr的td

$("table:eq(0) >tr:even").css("background","red");//只包括子即是table的tr元素

3.屬性過濾選擇器:是通過元素的屬性來獲取相應的元素

(1)[attribute]

用法:$("div[id]")

(2)[attribute=value]

$("input[name='newsletter'"].attr("checked",true)

(3)[attribute!=value]

(4)[attribute^=value] 返回以value值開始的元素

(5)[attribute$=value]匹配屬性值以value結尾的

(6)[attribute*=value]匹配包含value值的元素

(7)[attribute1][attribute2][attribute]復合屬性選擇器

4.屬性選擇器例子:

設定有屬性title,並且屬性值不是test的div背景色為紅色

$("div[title][title!=test]").css("background","red");

設定title屬性以te開頭的div的背景色

$("div[title^='te']").css("background","red);

設定有id屬性,並且含有'es'的div元素的背景色

$("div[id][*='es']").css("background","red");

5.子元素過濾選擇器

(1):nth-child(index/even/odd/equation)匹配父元素下第n個子或奇偶元素,從1開始的

(2):first-child

(3):last-child

(4):only-child 只有乙個子元素時匹配

6.子元素過濾選擇器例項

每個class為one的div父元素下的第2個子元素

$("div[class='one'] > : nth-child(2)")

每個class為one的div元素下的第1個元素

$("div[class='one']  > :first-child")

每個class為one的div元素下的最後乙個元素

$("div[class='one']  > :last-child")

如果class為one的div元素下僅只有乙個元素,那麼選擇這個子元素

$("div[class='one']  > :only-child")

子元素過濾選擇器

選擇器 描述返回 示例 nth child index even odd equation 選取每個父元素下的第index個子元素或者奇偶元素 index從1算起 集合元素 eq index 只匹配乙個元素,而 nth child將為每乙個父元素匹配子元素,並且 nth child index 的i...

屬性過濾選擇器

1 attribute 具有attribute屬性 2 attribute value 具有attribute屬性,且屬性值為value 3 attribute value 具有attribute,且屬性值不為value 4 attribute value 具有 attribute,且屬性值以val...

jQuery子屬性過濾選擇器

1.first child選擇器 用於選擇其父級的第乙個子元素的所有元素,格式 如下 selector first child 如 如下 ul first child css text decoration underline css color blue 2.last child選擇器 用於選擇其...