版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
基本过滤选择器概述
很多时候，我们需要将匹配到的元素再进行过滤；故，会用到过滤选择器。首先，我们来学习基本过滤选择器。
首元素选择器
:first
获得选择的元素中的第一个元素
尾元素选择器
:last
获得选择的元素中的最后一个元素
非元素选择器
:not(selector)
获取不包括指定内容的元素
偶数选择器
:even
获取索引值为偶数的元素，索引从 0 开始计数
奇数选择器
:odd
获取索引值为奇数的元素，索引从 0 开始计数
等于索引选择器
:eq(index)
获取指定索引的元素
大于索引选择器
:gt(index)
获取大于指定索引的元素
小于索引选择器
:lt(index)
获取小于指定索引的元素
标题选择器
:header
获得标题(h1~h6)元素
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器4</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,span {
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .inner {
width: 130px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function () {
$("div:first").css("backgroundColor","red");
});
$("#secondButton").click(function () {
$("div:last").css("backgroundColor","red");
});
$("#thirdButton").click(function () {
$("div:not(.one)").css("backgroundColor","red");
});
$("#fourthButton").click(function () {
$("div:even").css("backgroundColor","red");
});
$("#fifthButton").click(function () {
$("div:odd").css("backgroundColor","red");
});
$("#sixthButton").click(function () {
$("div:gt(2)").css("backgroundColor","red");
});
$("#seventhButton").click(function () {
$("div:eq(2)").css("backgroundColor","red");
});
$("#eighthButton").click(function () {
$("div:lt(2)").css("backgroundColor","red");
});
$("#ninthButton").click(function () {
$(":header").css("backgroundColor","yellow");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="设置第一个div元素元素背景色为红色" id="firstButton" />
<br />
<input type="button" value="设置最后一个div元素元素背景色为红色" id="secondButton" />
<br />
<input type="button" value="设置class不为one的所有div元素的背景色为红色" id="thirdButton" />
<br />
<input type="button" value="设置索引值为偶数的div元素的背景色为红色" id="fourthButton" />
<br />
<input type="button" value="设置索引值为奇数的div元素的背景色为红色" id="fifthButton" />
<br />
<input type="button" value="设置索引值为大于2的div元素的背景色为红色" id="sixthButton" />
<br />
<input type="button" value="设置索引值为等于2的div元素的背景色为红色" id="seventhButton" />
<br />
<input type="button" value="设置索引值为小于2的div元素的背景色为红色" id="eighthButton" />
<br />
<input type="button" value="设置所有的标题元素(h1-h6)的背景色为黄色" id="ninthButton" />
<br /><br />
<div id="one" title="title1">
id为one的div
</div>
<div id="two" title="title2">
id为two的div
<div class="inner">class为inner的div</div>
</div>
<div class="one" title="title3">
class为one的div
<div class="inner" title="title4">class为inner的div</div>
<div class="inner" title="title5">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
</div>
</body>
</html>