Jquery基本選擇器與層次選擇器
阿新 • • 發佈：2019-01-09
一、什麼是jquery選擇器？
就是允許通過標籤名、屬性或內容對DOM元素進行快速、準確的選擇，而不必擔心瀏覽器的相容性，通過jQuery選擇器對頁面元素的景區呃呃呃定位，才能完成元素屬性和行為的處理。
二、下面是一個使用jQuery選擇器實現隔行變色的例項
<html>
<head></head>
<meta/>
<style type="text/css">
body{font-size:12px;text-align:center;}
#tbStu{width:260px;border 三、jquery選擇器的分類：
1、基本選擇器：
是由Id、Class、元素名、多個選擇符組成。
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text;charset=utf-8"/>
<style type="text/css">
body{font-size:12px;text-align:center}
.BigDiv{width:300px;height:100px}
.BigDiv div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}
.div2{background-color:#eee}
</style>
<script src="jquery-3.1.1.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
//匹配ID元素
$(function(){
$("#div1").css("display","block");
});
//元素名匹配元素
$(function(){
$("div span").css("display","block");
});
//類匹配元素
$(function(){
$(".BigDiv .div2").css("display","block");
});
//合併匹配元素
$(function(){
$("#divOne,span").css("display","block");
});
</script>
</head>
<body>
<div class="BigDiv">
<div id="div1">ID</div>
<div class="div2">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>2、層次選擇器：
通過DOM元素間的層次關係獲取元素，其主要的層次關係包括後代、父子、相鄰、兄弟關係，通過其中某類關係可以方便快捷地定位元素。
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text;charset=utf-8"/>
<style type="text/css">
body{font-size:12px;text-align:center}
div,span {float:left;border:solid 1px #ccc;margin:8px;display:none}
.div1{width:65px;height:65px;}
.span1{width:45px;height:45px;background-color:#eee}
.span2{width:25px;height:25px;background-color:#dd}
</style>
<script src="jquery-3.1.1.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
//匹配後代所有元素(祖先與後代)
/*$(function(){
$("#divMid").css("display","block");
$("div span").css("display","block");
});*/
//匹配子元素(父子關係)
/*$(function(){
$("#divMid").css("display","block");
$("div>span").css("display","block");
});*/
//匹配後面的元素(相鄰關係)
/*$(function(){
//$("#divMid+div").css("display","block");
$("#divMid").next().css("display","block");
});*/
//匹配後面所有元素
/*$(function(){
//$("#divMid~div").css("display","block");
$("#divMid").nextAll().css("display","block");
});*/
//匹配所有相鄰元素
$(function(){
$("#divMid").siblings("div").css("display","block");
});
//注意：siblings方法與選擇器pre~siblings區別在於，前者獲取所有的相鄰元素，不分前後，而後者只取後面的全部元素，不能獲取前面的全部元素
</script>
</head>
<body>
<div class="div1">Left</div>
<div class="div1" id="divMid">
<span class="span1" id="SpanA">
<span class="span2" id="spanB"></span>
</span>
</div>
<div class="div1">Right-1</div>
<div class="div1">Right_2</div>
</body>
</html>