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 :solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px}
#tbStu tr th{background-color:#eee;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<!-- 匯入Jquery框架 -->
<script src="jquery-3.1.1.min.js" language="javascript" type="text/javascript" ></script>
<script type="text/javascript">
//使用的是傳統的javascript實現的
//window.onload = function(){
/*var oTb = document.getElementById("tbStu");
for(var i=0;i<=oTb.rows.length-1;i++){
alert(i%2);
if(i%2){
oTb.rows[i].className="trOdd";
}
}*/
/*if(document.getElementById("divT")){//檢測網頁上是否存在該Div
var oDiv = document.getElementById("divT");
oDiv.innerHTML = "這是一個檢測頁面";
}*/
//};
//下面是使用jQuery實現的
//$(document).ready(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
//$("#divT").html("這是一個檢測頁面");//不需要檢測網頁上是否存在該Div
//});
</script>
<body>
<table id="tbStu" cellpadding="0px" cellspacing="0">
<tbody>
<tr>
<th>學號</th><th>姓名</th><th>性別</th><th>總分</th>
</tr>
<tr>
<td>1</td><td>張曉明</td><td>男</td><td>67</td>
</tr>
<tr>
<td>2</td><td>張曉</td><td>男</td><td>89</td>
</tr>
<tr>
<td>3</td><td>張明</td><td>男</td><td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
三、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>