Jquery - 屬性選擇器

時間  2019-12-07
標籤 jquery 屬性 選擇器 欄目 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程