Jquery - 属性选择器

<html>
<head>
<title>jQuery attribute selector example</title>
 
<script type="text/javascript" src="jquery-1.3.2.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 - &lt;a rel="nofollow" href="http://www.google.com" lang="en-US"&gt;</a>
</div>

<div>
	<a href="http://www.yahoo.com" lang="en">Yahoo - &lt;a href="http://www.yahoo.com" lang="en" &gt;</a>
</div>

<div>
	<a href="http://www.abc-yahoo.com" lang="-en">Yahoo - &lt;a href="http://www.abc-yahoo.com" lang="-en"&gt;</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>



你可能感兴趣的:(Jquery - 属性选择器)