首页 > 其他分享> > jQuery前端开发学习指南(08)——jQuery基本过滤选择器

jQuery前端开发学习指南(08)——jQuery基本过滤选择器

2021-03-23 23:34:06 作者：互联网

版权声明

本文原创作者：谷哥的小弟
作者博客地址：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>

在这里插入图片描述

标签：jQuery,学习指南,function,click,backgroundColor,div,选择器,css
来源： https://blog.csdn.net/lfdfhl/article/details/115150873