jQuery類css選擇器程式碼詳解
阿新 • • 發佈：2018-12-26
jQuery選擇器分類有哪些？
1) 類css選擇器 1.1) 基本選擇器 ID選擇器、標籤選擇器、類選擇器 並集選擇器、交集選擇器、全域性選擇器 1.2) 層次選擇器 後代選擇器：使用空格作為分隔符 子選擇器：使用>作為分隔符 相鄰元素選擇器：使用+作為分隔符 同輩元素選擇器：使用~作為分隔符 1.3) 屬性選擇器 [attribute]：指定屬性名的選擇器 [attribute=value]：指定屬性名的值等於value的值的選擇器 [attribute!=value]：屬性名的值不等於value [attribute^=value]：屬性名的值以value開頭 [attribute$=value]：屬性名的值以value結尾 [attribute*=value]：屬性名的值包含value [attribute1][attribute2][attributeN]：複合屬性選擇器，要求同時滿足多個
jQuery基本選擇器示例:
<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("#box").css("background-color","yellow");//ID選擇器 jQuery層次選擇器示例:
<style type="text/css">
* {margin:0; padding:0; line-height:30px;}
body {margin:10px;}
#menu {border:2px solid #03C; padding:10px;}
a {text-decoration:none; margin-right:5px;}
span {font-weight:bold; padding:3px;}
h2 {margin:10px 0;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("#menu span").css("background-color","yellow");//後代選擇器
//$("#menu>span").css("background-color","yellow");//子選擇器
//$("h2+dl").css("background-color","yellow");//相鄰元素選擇器
$("h2~dl").css("background-color","yellow");//同輩元素選擇器
});
});
</script>
</head>
<body>
<div id="menu">
<h2>全部旅遊產品分類</h2>
<dl>
<dt>北京周邊旅遊<span>特價</span></dt>
<dd><a href="#">按天數</a> <a href="#">海邊旅遊</a> <a href="#">草原</a></dd>
</dl>
<dl>
<dt>景點門票</dt>
<dd><a href="#">名勝</a> <a href="#">暑期</a> <a href="#">樂園</a></dd>
<dd><a href="#">山水</a> <a href="#">雙休</a></dd>
</dl>
<span>更多分類</span>
</div>
</body>jQuery屬性選擇器示例:
<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("h2[title]").css("background-color","yellow");//設定h2元素有title屬性的背景色
//$("[class=odds]").css("background-color","yellow");//設定class=odds的背景色
//$("[id!=box]").css("background-color","yellow");//設定id!=odds的背景色
//$("[title^=h]").css("background-color","yellow");//設定title屬性值以h開頭的背景色
//$("[title$=p]").css("background-color","yellow");//設定title屬性值以p結尾的背景色
//$("[title*=s]").css("background-color","yellow");//設定title屬性值包含s的背景色
$("li[class][title*=y]").css("background-color","yellow");//設定包含class屬性且title屬性值包含y的li元素的背景色
});
});
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">動畫列表</h2>
<ul>
<li class="odds" title="kn_jp">名偵探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">銀魂</li>
<li class="evens" title="hm_da">黑貓警長</li>
<li class="odds" title="xl_ds">仙履奇緣</li>
</ul>
</div>
</body>