1.基本选择器示例：
我要评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<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>
View Code
2.层级选择器示例（不完整示例，理解层级选择器方法即可）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<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中的第一级的孩子" />
<input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" />
</body>
</html>
View Code
3.基本过滤选择器示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<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中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/>
</body>
</html>
View Code
4.属性选择器示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<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='one']").css("background-color", "red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div" />
<input type="button" id="btn2" value="选择有id属性的值为one的div" />
</body>
</html>
View Code
如对本文有疑问， 点击进行留言回复！！
网友评论