属性选择器

最新推荐文章于 2024-10-11 16:46:33 发布

烧了回忆取暖

最新推荐文章于 2024-10-11 16:46:33 发布

阅读量451

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/kanuoyuan/article/details/37900121

版权

jQuery 专栏收录该内容

28 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<script type="text/javascript" src="class library/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
	$('#btn').click(function(){
		$('a[name="nav"]').addClass('pink'); //匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可
	});
});
/*[attribute] 
[attribute=value] 
[attribute!=value] 
[attribute^=value] 
[attribute$=value] 
[attribute*=value] 
[attrSel1][attrSel2][attrSelN] */
</script>
<style>
.pink{ background:red;}
</style>
</head>

<body>
<input type="button" value="属性选择器" id="btn"/><br>
<a href="#" name="nav" title="属性选择器"  cssrain="mycssrain">aaaaa</a>
<!--
把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: 
$("mix[@attr]"):选取所有该mix且具有attr属性的节点 
$("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 
$("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 
$("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 
$("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 
匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可
-->



</body>
</html>