前端简单入门第十七讲 jQuery选择器
jQuery中的选择器能够让我们更加精确找到我们要操作的元素。jQuery中的选择器可以细分为多种，有基本选择器、层级选择器、基本过滤选择器、内容选择器、属性选择器、表单选择器以及表单对象属性选择器。下面我分别详细介绍它们。
基本选择器
基本选择器有：
下面举例来说明基本选择器的使用。我已提前准备好一个样式层叠表——style.css，其内容如下：
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
div,span{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
读者要做的事就是导入样式层叠表——style.css。接下来就来看看基本选择器的具体使用，编写【03-jQuery的选择器：基本选择器.html】页面：
<!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.11.3.js" ></script>
<script>
$(function() {
$("#but1").click(function() {
// alert("aaaaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function() {
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function() {
$("div").css("background","#bbffaa");
});
$("#but4").click(function() {
$("*").css("background","#bbffaa");
});
$("#but5").click(function() {
$("#two,span,.mini").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择ID为one的DIV元素" />
<input type="button" id="but2" value="选择样式为mini的DIV元素" />
<input type="button" id="but3" value="选择所有DIV元素" />
<input type="button" id="but4" value="选择页面所有元素" />
<input type="button" id="but5" value="选择ID为two、span的元素，还有样式为mini的元素" />
<hr />
<div id="one">
<div class="mini">
1111
</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>
<div id="four">
<div class="mini">
777
</div>
<div class="mini">
888
</div>
<div class="mini">
999
</div>
<div class="mini">
000
</div>
</div>
<span id="five">
<div class="mini">
1010
</div>
</span>
</body>
</html>
注意，以下jQuery代码必须写在jQuery的入口函数里面。
$("#btn1").click(function(){
});
因为须等dom树绘制完成之后，再去拿到id为btn1的标签。而且以上jQuery代码可写作如下JavaScript代码：
document.getElementById("btn1").onclick=function(){
}
层级选择器
层级选择器有：
给出案例如下：
<!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.11.3.js" ></script>
<script>
$(function() {
// 后代选择器
$("#but1").click(function() {
$("body div").css("background","#bbffaa");
});
// 选择的是body下的第一层DIV元素
$("#but2").click(function() {
$("body > div").css("background","#bbffaa");
});
// 选择的是ID为three的元素的下一个同辈元素
$("#but3").click(function() {
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function() {
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择body下的所有的DIV元素" />
<input type="button" id="but2" value="选择body下的所有的DIV子元素" />
<input type="button" id="but3" value="选择ID为three的DIV元素后的下一个DIV元素" />
<input type="button" id="but4" value="选择ID为two的兄弟元素" />
<hr />
<div id="one">
<div class="mini">
1111
</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>
<div id="four">
<div class="mini">
777
</div>
<div class="mini">
888
</div>
<div class="mini">
999
</div>
<div class="mini">
000
</div>
</div>
<span id="five">
<div class="mini">
1010
</div>
</span>
</body>
</html>
基本过滤选择器
通过查看jQuery API帮助文档可知，基本过滤选择器有：
这儿我只给出常用的基本过滤选择器的使用方式，至于其他的还须读者亲测。
给出案例如下：
<!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.11.3.js" ></script>
<script>
$(function() {
$("#but1").click(function() {
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function() {
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function() {
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function() {
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function() {
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择ID为three的第一个子DIV元素" />
<input type="button" id="but2" value="选择ID为three的最后一个子DIV元素" />
<input type="button" id="but3" value="选择所有DIV元素中的奇数DIV元素" />
<input type="button" id="but4" value="选择所有DIV元素中的偶数DIV元素" />
<input type="button" id="but5" value="选择ID为three的第二个子DIV元素" />
<hr />
<div id="one">
<div class="mini">
1111
</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>
<div id="four">
<div class="mini">
777
</div>
<div class="mini">
888
</div>
<div class="mini">
999
</div>
<div class="mini">
000
</div>
</div>
<span id="five">
<div class="mini">
1010
</div>
</span>
</body>
</html>
内容选择器
通过查看jQuery API帮助文档可知，内容选择器有：
这儿只给出以下这个内容选择器的介绍。
:contains(text)：匹配包含给定文本的元素
给出案例如下：
<!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.11.3.js" ></script>
<script>
$(function() {
$("#but1").click(function() {
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择内容中包含1的DIV元素" />
<hr />
<div id="one">
<div class="mini">
1111
</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>
<div id="four">
<div class="mini">
777
</div>
<div class="mini">
888
</div>
<div class="mini">
999
</div>
<div class="mini">
000
</div>
</div>
<span id="five">
<div class="mini">
1010
</div>
</span>
</body>
</html>
属性选择器
通过查看jQuery API帮助文档可知，属性选择器有：
这儿只给出前两个属性选择器的介绍。
[attribute]：匹配包含给定属性的元素
[attribute=value]：匹配给定的属性是某个特定值的元素
给出案例如下：
<!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.11.3.js" ></script>
<script>
$(function() {
$("#but1").click(function() {
$("div[id]").css("background","#bbffaa");
});
$("#but2").click(function() {
$("div[title='aaa']").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择所有有id属性的DIV元素" />
<input type="button" id="but2" value="选择所有title属性为aaa的DIV元素" />
<hr />
<div id="one">
<div class="mini">
1111
</div>
</div>
<div id="two">
<div class="mini" title="aaa">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini" title="aaa">
555
</div>
<div class="mini">
666
</div>
</div>
<div>
<div class="mini">
777
</div>
<div class="mini">
888
</div>
<div class="mini">
999
</div>
<div class="mini">
000
</div>
</div>
<span id="five">
<div class="mini">
1010
</div>
</span>
</body>
</html>
表单选择器
通过查看jQuery API帮助文档可知，表单选择器有：
这儿只给出前两个表单选择器的介绍，至于其他的读者亲测。
:input：匹配所有input，textarea，select和button元素
:text：匹配所有的单行文本框
给出案例如下：
<!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.11.3.js" ></script>
<script>
$(function() {
$("#but1").click(function() {
$(":input").css("background","#bbffaa");
});
$("#but2").click(function() {
// $(":text").css("background","#bbffaa");
// 以上代码也可写为：
$("input[type='text']").css("background","#bbffaa"); // 属性选择器
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择所有的input元素" />
<input type="button" id="but2" value="选择文本框" />
<hr />
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
表单对象属性选择器
通过查看jQuery API帮助文档可知，表单对象属性选择器有：
在此并不给出案例。