jquery 属性选择器

jquery 属性选择器

href也是属性经常用到

a:has(img)[href$=".gif"]//a中包含img,href以.gif结尾的。

[name|=”value”]  包含 :单独的 value , 或者是 “-” 相连的

<a href=”example.html” hreflang=”en”>Some text</a>

<a href=”example.html” hreflang=”en-UK”>Some other text</a>

<a href=”example.html” hreflang=”english”>will not be outlined</a>

$(‘a[hreflang|=”en”]’).css(‘border’,’3px dotted green’);

第一第二个才是。
————————————-

[name*=”value”]

<input name=”man-news” />

<input name=”milkman” />
<input name=”letterman2″ />
<input name=”newmilk” />
<script>$(‘input[name*=”man”]’).val(‘has man in it!’);</script>

前面3个input包含了man的。//所有包含man的都选择。

—————————————–
[name~=”value”]

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<input name=”man-news” />

<input name=”milk man” />
<input name=”letterman2″ />
<input name=”newmilk” />
<script>$(‘input[name~=”man”]’).val(‘mr. man is in it!’);</script>

</body>
</html>

用空格分隔的元素。第二个。

—————————————–
[attribute$=”value”]

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<input name=”newsletter” />

<input name=”milkman” />
<input name=”jobletter” />
<script>$(‘input[name$=”letter”]’).val(‘a letter’);</script>

</body>
</html>

以name为letter结尾的。也是用的最多的。

——————————————

[attribute=”value”] 完全匹配

—————————————-
[attribute!=”value”] 和上面相反
————————————

[attribute^=”value”]

<input name=”newsletter” />

<input name=”milkman” />
<input name=”newsboy” />
<script>$(‘input[name^=”news”]’).val(‘news here!’);</script>

=左边,自己理解。