1. 程式人生 > >10. jQuery-屬性過濾選擇器

10. jQuery-屬性過濾選擇器

<!DOCTYPE html>
<html>
<head>
    <title>屬性過濾選擇器</title>
      <style type="text/css">
           body{font-size:12px;text-align:center}
           div{float:left;border:solid 1px #ccc;margin:8px;
               width:65px;height:65px;display:none}
    </style>
</head>
<body>
    <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">
    	ID 
    	<br/>
    	Title AB
    </div>
    <div title="ABC">Title ABC</div>

<script src="../jquery.min.js"></script>
<script type="text/javascript">
 	$(function(){
 	 	//顯示所有屬性title的值中含有“B”,且屬性id的值是“divAB”的元素
 	 	$("div[id='divAB'][title*='B']").show(3000);

 	 	//顯示所有屬性title的值中含有“B”的元素
 	 	//$("div[title*='B']").show(3000);
 	 	
 	 	//顯示所有屬性title的值以“C”結束的元素
 	 	//$("div[title$='C']").show(3000);
 	 	
 	 	//顯示所有屬性title的值以“A”開始的元素
 	 	//$("div[title^='A']").show(3000);
 	 	
 	 	//顯示所有屬性title的值不是“A”的元素
 	 	//$("div[title!='A']").show(3000);
 	 	
 	 	//顯示所有屬性title的值是“A”的元素
 	 	//$("div[title='A']").show(3000);
 	 	
 	 	//顯示所有含有id屬性的元素
 	 	//$("div[id]").show(3000);
 	})
</script>
</body>
</html>