JQuery中的基本过滤选择器
first：获取第一个元素语法：$(" li:first")选取所有<li>元素中的第一个<li>元素
·
1.first：获取第一个元素
语法：$(" li:first" )选取所有<li>元素中的第一个<li>元素
2.last：获取最后一个的元素
语法：$(" li:last" )选取所有<li>元素中的最后一个<li>元素
3.even：获得索引下标为偶数的元素
语法：$(" li:even" )选取索引是偶数的所有<li>元素
4.odd：获得索引下标为基数的元素
语法：$(" li:odd" )选取索引是奇数的所有<li>元素
5.eq(index)：选取索引等于index的元素（index从0开始）
语法：$("li:eq(1)" )选取索引等于1的<li>元素
6.gt(index)：选取索引大于index的元素（index从0开始）
语法：$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
7.lt(index)：选取索引小于index的元素（index从0开始）
语法：$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
接下来让我们来写几个例子看下效果
1.first：获取第一个元素
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:first").css("background","red");//获取第一个元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
2.last：获取最后一个的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:last").css("background","blueviolet");//获取最后一个的元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
3.even：获得索引下标为偶数的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:even").css("background","aqua");//获得索引下标为偶数的元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
4.odd：获得索引下标为基数的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:odd").css("background","burlywood");//获得索引下标为基数的元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
5.eq(index)：选取索引等于index的元素（index从0开始）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:eq(3)").css("background","darkgrey");//获得索引等于3的元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
6.gt(index)：选取索引大于index的元素（index从0开始）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:gt(2)").css("background","chartreuse");//获得索引大于2的所有元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
7.lt(index)：选取索引小于index的元素（index从0开始）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("li:lt(3)").css("background", "deepskyblue");//获得索引小于3的所有元素
});
</script>
</head>
<body>
<ul>
<li>奥特曼</li>
<li>葫芦娃</li>
<li>铁壁阿童木</li>
<li>舒克和贝塔</li>
<li>魔神坛斗士</li>
<li>灌篮高手</li>
<li>犬夜叉</li>
<li>美少女战士</li>
</ul>
</body>
</html>效果图如下：
看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它
加油！
共同努力！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)