jQuery的選擇器
一拱雏、基本選擇器
id選擇器：$(“#id名稱”);
元素選擇器：$(“元素名稱”);
類選擇器：$(“.類名”);
通配符：*
多個(gè)選擇器共用(并集)
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本選擇器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
$("#btn3").click(function(){
$("div").css("background-color","pink");
});
$("#btn4").click(function(){
$("*").css("background-color","pink");
});
$("#btn5").click(function(){
$("#two,.mini").css("background-color","pink");
});
});
</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>
二、層級(jí)選擇器
ancestor descendant: 在給定的祖先元素下匹配所有的后代元素(兒子耻煤、孫子、重孫子)
parent > child : 在給定的父元素下匹配所有的子元素(兒子)
prev + next: 匹配所有緊接在 prev 元素后的 next 元素(緊挨著的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級(jí)選擇器</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});
$("#btn2").click(function(){
$("body>div").css("background-color","gold");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","gold");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="選擇body中的所有的div元素"/>
<input type="button" id="btn2" value="選擇body中的第一級(jí)的孩子"/>
<input type="button" id="btn3" value="選擇id為two的元素的下一個(gè)元素"/>
<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>
三褪迟、基本過(guò)濾選擇器
$('li').first() 等價(jià)于：$(“l(fā)i:first”)
基本過(guò)濾選擇器.png
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級(jí)選擇器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<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>
</head>
<body>
<input type="button" id="btn1" value="body中的第一個(gè)div元素"/>
<input type="button" id="btn2" value="body中的最后一個(gè)div元素"/>
<input type="button" id="btn3" value="選擇body中的奇數(shù)的div"/>
<input type="button" id="btn4" value="選擇body中的偶數(shù)的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>
四、屬性選擇器
屬性選擇器.png
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
});
$("#btn2").click(function(){
$("div[id='two']").css("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>
五答憔、表單選擇器
表單選擇器.png
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單選擇器</title>
</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>