jquery Attribute 选择器即属性选择器

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>

效果:


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值