javaEE003.04 jQuery：过滤选择器1：基本过滤选择器：

最新推荐文章于 2022-12-15 16:10:34 发布

EP小良_007

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量165

点赞数

文章标签：过滤选择器基本过滤选择器 jQuery js

本文链接：https://blog.csdn.net/qq_41753340/article/details/110428197

版权

文章目录

前言
一、过滤选择器是什么（这里先讲基本过滤选择器）
二、使用步骤
总结:过滤选择器

前言

前面我们讲了选择器分为

基本选择器
层次选择器
过滤选择器

其中
* 基本选择器

  	标签选择器：$("p")

  	类选择器:$(".class名")

  	ID选择器$("#id名")

  	全局选择器：$("*")

  	并集选择器：$("#id名,.class名，p")
  * 层次选择器

  	后代选择器：$("E F")

  	子代选择器：$("E>F")

  	相邻选择器：$("E+F")

  	同辈选择器：$("E~F")

这篇文章详细讲解过滤选择器

一、过滤选择器是什么（这里先讲基本过滤选择器）

$(“li:first”)
如上，因为叫过滤选择器，肯定会有过滤的效果，因此需要有一个: 号，如果不加:(冒号)会怎么样？肯定不行
在这里插入图片描述
$(“li:first”)这个意思就是获取第一个元素
$(“li:last”)
如下：换一种方式详细理解

注意：程序里面的偶数是0 、2、4 、6 、8……这样从0开始数
生活中的偶数不包括0，是从1开始数即：2、4 、6、8……
在这里插入图片描述

二、使用步骤

模板代码放最后面了
在这里插入图片描述

模板效果如下
在这里插入图片描述

1、选择第一个div

2、选择class不为one的所有div元素

3、选择索引值等于3 的 div 元素

注意，由于程序和我们人不一样，程序没有一个整体的认知，所以是这样识别是第几个div的
从上往下，这样：
在这里插入图片描述

4、选择当前正在执行动画的所有元素

5、含有子元素的 div元素

总结:过滤选择器

	* 过滤选择器
		* 基本过滤选择器
			$(":first")第一个
			$(":last")最后一个
			$(":eq()")匹配下标
			$(":gt()") 大于
			$(":lt()") 小于
			$(":not()") 取反
			$(":odd") 奇数
			$(":even") 偶数
			$(":header") 标题标签
			$(":animated") 动画
			$(":focus") 获取焦点
			（下面的下一篇文章讲）
		* 内容过滤选择器
			$(":parent")
			$(":empty")
		* 可见性过滤选择器
			$(":hidden")
			$(":visible")
		* 属性过滤选择器
			$("[属性名]")
			$("[属性名!^$*=属性值][属性2]")
		* 子元素过滤选择器
			$("：first-child")
		* 表单过滤选择器
			$(":input")
			$(":text|password|radio|checkbox|reset|submit|button|file|hidden")
		* 表单对象属性过滤选择器
			$(":enabled")
			$(":disabled")
			$(":checked") 匹配选中的
			$(":selected")

模板的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器其他练习</title>
		<style type="text/css">
			div, span, p {
			    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;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				function anmateIt(){
					$("#mover").slideToggle(1000, anmateIt);
				}
				anmateIt();
			});
			
			$(function(){
				//1.选择第一个 div 元素
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});
				//2.选择class不为 one 的所有 div 元素
				$("#btn2").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});
				//3.选择索引值为等于 3 的 div 元素
				$("#btn3").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});
				//4.选择当前正在执行动画的所有元素
				$("#btn4").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//5.选择含有子元素的div元素
				$("#btn5").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
				//6.选择所有不可见的 div 元素
				$("#btn6").click(function(){
					$("div:hidden").show("normal").css("background", "#bbffaa");
				});
				//7.选取 属性title值等于'test'的div元素
				$("#btn7").click(function() {
					$("div[title='test']").css("background", "#bbffaa");
				});
				//8.选取每个class为one的div父元素下的第一个子元素
				$("#btn8").click(function(){
					$("div.one :first-child").css("background","#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn2" />	
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn3" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn4" />
		<input type="button" value="选择含有子元素的div元素" id="btn5" />
		<input type="button" value="选择所有不可见的 div 元素" id="btn6" />
		<input type="button" value="选取 属性title值等于'test'的div元素." id="btn7" />
		<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn8"/>
		
		
		<h3>选择器练习.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>