JQ的幾種選擇器
阿新 • • 發佈：2018-12-26
1.基本選擇器
2.層級選擇器<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本選擇器</title> <link rel="stylesheet" href="../jq/style.css"> <script type="text/javascript" src="../jq/jquery-1.8.3.js"></script> <script> $(function(){ $("#btn1").click(function(){ $("#one").css("background-color","red"); }); $("#btn2").click(function(){ $(".mini").css("background-color","red"); }); $("#btn3").click(function(){ $("div").css("background-color","red"); }); $("#btn4").click(function(){ $("*").css("background-color","red"); }); $("#btn5").click(function(){ $("#two,.mini").css("background-color","red"); }); }); </script> </head> <body> <input type="button" id="btn1" value="選擇為one的元素"/> <input type="button" id="btn2" value="選擇樣式為mini的元素"/> <input type="button" id="btn3" value="選擇所有的div元素"/> <input type="button" id="btn4" value="選擇所有元素"/> <input type="button" id="btn5" value="選擇id為two並且樣式為mini的元素"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>
A B:獲得A元素內部的所有B元素（祖孫後代）
A>B:獲得A元素下面的所有B子元素（父子）
A+B:獲得A元素同級下一個B元素（兄弟）
A~B:獲得A元素同級所有B元素（兄弟）
3.基本過濾選擇器<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>層級選擇器</title> <link rel="stylesheet" href="../jq/style.css" type="text/css"/> <script type="text/javascript" src="../jq/jquery-1.8.3.js"></script> <script> $(function(){ $("#btn1").click(function(){ $("body div").css("background-color","blue"); }); $("#btn2").click(function(){ $("body>div").css("background-color","blue"); }); $("#btn3").click(function(){ $("#two+div").css("background-color","blue"); }); $("#btn4").click(function(){ $("#one~div").css("background-color","blue"); }); }); </script> </head> <body> <input type="button" id="btn1" value="選擇body中的所有的div元素"/> <input type="button" id="btn2" value="選擇body中的第一級的孩子"/> <input type="button" id="btn3" value="選擇id為two的元素的下一個元素"/> <input type="button" id="btn4" value="選擇id為one的所有的兄弟元素"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>
:first 第一個
:last 最後一個
:not() 刪除指定內容
:even 偶數
:odd 奇數
:eq 指定第幾個
:gt 大於
:lt 小於
:header 獲得標題
:animated 獲得動畫的
:focus 獲得焦點
4.屬性選擇器<script> $(function(){ $("#btn1").click(function(){ $("body div:first").css("background-color","red"); }); $("#btn2").click(function(){ $("body div:last").css("background-color","red"); }); $("#btn3").click(function(){ $("body div:odd").css("background-color","red"); }); $("#btn4").click(function(){ $("body div:even").css("background-color","red"); }); }); </script>
[屬性名]，[屬性名=值]，[屬性名！=值]
[屬性名^=值] 獲得屬性名以值開頭元素
[屬性名$=值] 獲得屬性名以值結尾元素
[屬性名*=值] 獲得屬性名含有值 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級選擇器</title>
<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").cass("background-color","blue");
});
$("#btn2").click(function(){
$("div[id='two']").cass("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="選擇有id屬性的div"/>
<input type="button" id="btn2" value="選擇有id屬性的值為two的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
5.表單屬性選擇器
:enabled 可用
:disabled 不可用
:checked 選中
:selected 選擇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單選擇器</title>
<link rel="stylesheet" href="../jq/style.css" type="text/css"/>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","blue");
});
$("#btn2").click(function(){
$(":text").css("background-color","green");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="選擇所有input元素" />
<input type="button" id="btn2" value="選擇文字框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>
</html>