jquery Attribute 选择器即属性选择器

最新推荐文章于 2024-04-29 13:37:01 发布

eternity668

最新推荐文章于 2024-04-29 13:37:01 发布

阅读量916

点赞数

分类专栏： jquery 文章标签： jquery翻译

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

Jquery Attribute 选择器

在jquery中，属性选择器是被包裹在[]中，以下是所支持的属性选择器。

1 有属性[a]

选择有a 属性的所有元素。

例如：

$(‘a[rel]’)—选择含有属性rel的的所有a标签。

2 属性值等于 [A=”B”]

选择属性A的值等于确定值B的所有元素。

例如：

$(‘a[rel=”nofollow”]’)— 选择含有属性rel 的值为nofollow的所有<a>标签。

3 属性值不等于[A!=”B”]

选择不含属性A或属性A的值不等于B的所有元素。

例如：

$(‘a[rel!=”nofollow”]’) —选择不含属性rel 或属性rel的值不等nofollow的所有a元素。

4 属性值以特定的B开头 [A^=”B”]

选择含属性A的值以B开头的所有元素

例如：

$(‘a[rel^=”nof”]’)— 选择含属性rel 的值以nof 开头的所有a标签。

5 属性以B结尾 [A$=”B”]

选择含属性A的值以B结尾的所有元素。

例如：

$(‘a[rel$=”low”]’) —选择含属性rel 的值以low结尾的所有a标签。

6 属性值包含B [A*=”B”]

选择含属性A，其值包含B的所有a标签。

例如：

$(‘a[rel*=”yahoo.com”]’)—选择含属性rel，其值包含yahoo.com字符串的所有a标签

7 属性值前缀包含 [A|=”B”]

选择含元素A，其值等于B 或者是B-开头的字符串的所有a标签

例如：

$(‘a[lang|=”en”]’)—选择含属性lang 其值等于en或是以en-开头的字符串的所有a标签

8 属性值包含以空格分隔 [A~=”B”]

选择含属性A，其中的一个值等于以空格分隔后的B的a标签。

例如：

$(‘div[class~=”JQuery”]’)—选择含属性class，以空格分隔的一个值等于JQuery的所有div标签。

例如，HelloJQuery将会被匹配，而Hello –Jquery与HelloJQuery则会被匹配。

以下是完整的实例：

<html>
<head>
<title>jQuery attribute selector example</title>
 
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
 
<style type="text/css">
	div, a{
		padding:16px;
	}
 
	#msg{
		padding:8px;
		hright:100px;
	}
</style>
</head>
 
<body>
 
<h1>jQuery attribute selector example</h1>
 
<div id="msg"></div>
 
<div>
    <a rel="nofollow" href="http://www.google.com" lang="en-US">
    Google - <a rel="nofollow" href="http://www.google.com" lang="en-US">
    </a>
</div>
 
<div>
    <a href="http://www.yahoo.com" lang="en">
     Yahoo - <a href="http://www.yahoo.com" lang="en" >
    </a>
</div>
 
<div>
    <a href="http://www.abc-yahoo.com" lang="-en">
     Yahoo - <a href="http://www.abc-yahoo.com" lang="-en">
    </a>
</div>
 
<div class="Hello-jQuery">
	class = "Hello-jQuery"
</div>
 
<div class="Hello jQuery">
	class = "Hello jQuery"
</div>
 
<div class="HellojQuery">
	class = "HellojQuery"
</div>
 
<br/><br/>
<button>a[rel]</button>
<button>a[rel="nofollow"]</button>
<button>a[rel!="nofollow"]</button>
<button>a[rel^="nof"]</button>
<button>a[rel$="low"]</button>
 
<button>a[href*="yahoo.com"]</button>
<button>a[lang|="en"]</button>
<button>div[class~="jQuery"]</button>
 
<button id="reset">Reset It</button>
 
<script type="text/javascript">
    $("button").click(function () {
 
	  var str = $(this).text();	
	  $('a').css("border", "0px solid #000000");
	  $(str).css("border", "1px solid #ff0000");
	  $('#msg').html("<h4>Attribute Selector : " + str + "</h4>");
    });
 
	$("#reset").click(function () {
      location.reload();
    });
 
</script>
 
</body>
</html>

效果：

eternity668

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery Attribute 选择器即属性选择器

Jquery Attribute 选择器在jquery中，属性选择器是被包裹在[]中，以下是所支持的属性选择器。 1 有属性[a]选择有a 属性的所有元素。例如：$(‘a[rel]’)—选择含有属性rel的的所有a标签。 2 属性值等于 [A=”B”]选择属性A的值等于确定值B的所有元素。例如：$(‘a[rel=”nofollow”]’)—
复制链接

扫一扫

专栏目录