1、基本选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
演示源码:
<!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(){
//选择为one的元素 并改变背景颜色
$("#btn1").click(function(){
$("#one").css("background-color","#FFE0E9");
});
//选择样式为mini的元素 并改变背景颜色
$("#btn2").click(function(){
$(".mini").css("background-color","#FFE0E9");
});
//选择所有的div元素 并改变背景颜色
$("#btn3").click(function(){
$("div").css("background-color","#FFE0E9");
});
//选择所有元素 并改变背景颜色
$("#btn4").click(function(){
$("*").css("background-color","#FFE0E9");
});
//选择id为two并且样式为mini的元素 并改变背景颜色
$("#btn5").click(function(){
$("#two,.mini").css("background-color","#FFE0E9");
});
});
</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>
效果:
2、
层级选择器:
ancestor descendant :在给定的祖先元素下匹配所有的后代元素
parent > child : 在给定的父元素下匹配所有的子元素
prev + next : 匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings : 匹配 prev 元素之后的所有 siblings 元素
案例源码:
<!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(){
//选择body中的所有的div元素
$("#btn1").click(function(){
$("body div").css("background-color","#FFE0E9");
});
//选择body中的第一级的孩子div
$("#btn2").click(function(){
$("body>div").css("background-color","#FFE0E9");
});
//选择id为two的元素的下一个元素
$("#btn3").click(function(){
$("#two div").css("background-color","#FFE0E9");
});
//选择id为one的所有的兄弟元素
$("#btn4").click(function(){
$("#one~div").css("background-color","#FFE0E9");
});
});
</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="选择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>
效果演示:
3、基本选择器
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 |