jQuery 之过滤选择器

最新推荐文章于 2024-09-15 19:46:31 发布
最新推荐文章于 2024-09-15 19:46:31 发布
阅读量86 收藏
点赞数
分类专栏： jQuery 文章标签： jquery 过滤选择器 java html ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang583740618/article/details/88341017
版权
[align=center][size=medium][color=red][b]1.3:过滤选择器：[/b][/color][/size][/align]
[color=olive][b]说明：过滤选择器根据某类过滤规则进行元素匹配，书写是都是以冒号
(:)开头，简单过滤选择器是过滤选择器中使用最为广的一种[/b][/color]

[size=small][color=olive][b] 1.3.1：简单过滤选择器：
过滤器 功能 返回值
first()或:first 获取第一个元素，返回单个元素；
last()或:last 获取最后一个元素，返回单个元素；
:not(selector)获取给定选择器外的元素，返回元素集合；
:even 获取所有索引为啊偶数的元素，0开始，返回元素集合；
:odd 奇数
:eq(index) 获取指定索引的元素，从0开始，返回单个元素；
:gt(index) 获取大于指定索引的元素，返回元素集合；
:lt(index) 小于
:header 获取所有标题类型元素h1 h2 h3 h4 h5
:animated 获得正在执行动画效果的元素，元素集合；[/b][/color][/size]

[size=medium][color=red][b]案例如下：[/b][/color][/size] 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>
				<title>过滤选择器测试</title>
				<style type="text/css">
		* {
			font-size: 14px;
			text-align: center;
		}

		table {
			border-collapse: collapse;
			width: 60%;
			position: relative;
		}

		table tr td {
			border: solid red 1px;
			text-align: center;
			line-height: 24px;
		}

		.y {
			font-size: 14px;
			background-color: purple;
		}
		</style>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->


				<script type="text/javascript">

		//程序入口
		$(document).ready(function() {
			test();
		});

		function test() {

			//$("#tab tr td:first").css("background","red");	//获取表格的第一个td元素
			$("#tab tr td").first().css("background", "red"); //同上
			//$("#tab tr td:last").css("background","blue");	//获取表格最后一个td元素
			$("#tab tr td").last().css("background", "yellow"); //同上
			$("#tab tr:even").css("background", "blue"); //获取当前id下的所有偶数行
			$("#tab tr:odd").css("background", "purple"); //获取所有的奇数行
			$("#tab tr td:eq(5)").css("background", "black"); //索引为5的td元素
			$("#tab tr td:gt(9)").css("background", "green"); //所有索引大于指定值的td元素
			$("#tab tr td:lt(3)").css("background", "purple"); //所有索引小于指定指的td元素；
			$('#tab tr td:not("#xx")').css("background", "red"); //获取除指定元素之外的所有元素
			//$("#tab").animate({left:"500px",1000});				//获取动态元素
			$("#tab tr").slideToggle("slow"); //给ID=TAB下的tr元素添加动态效果

		}
		</script>
			</head>
			<body>
				<h3>
					过滤选择器测试
				</h3>
				<table id="tab">
					<tr>
						<td>
							编号
						</td>
						<td>
							姓名
						</td>
						<td>
							军衔
						</td>
					</tr>
					<tr>
						<td id="xx">
							001
						</td>
						<td>
							小成
						</td>
						<td>
							少校
						</td>
					</tr>
					<tr>
						<td>
							002
						</td>
						<td>
							小明
						</td>
						<td>
							中尉
						</td>
					</tr>
					<tr>
						<td>
							003
						</td>
						<td>
							小赵
						</td>
						<td>
							团长
						</td>
					</tr>
				</table>

			</body>
		</html>


[size=small][color=red][b]1.3.2：内容过滤选择器：[/b][/color][/size]
[size=small][color=olive][b]说明：内容过滤选择器根据元素中的"文字内容或所包含的子元素特征"获取元素，
其文字内容可以 模糊或绝对匹配进行元素定位；
选择器 功能 返回值
:contains(test)，获取包含给定文本的元素，返回元素集合；
:empty，获取所有不包含子元素或者文本的空元素，返回元素集合；
:has(selector)，获取含有选择器所匹配的元素的元素，返回元素集合；
:parent，获取含有子元素或者文本的元素；[/b][/color][/size]

[b][color=red][size=medium]案例如下：[/size][/color][/b] 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>
				<title>内容过滤选择器测试</title>
				<link rel="stylesheet" href="js/css.css" type="text/css"></link>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->
				<script type="text/javascript">

		//程序入口
		$(document).ready(function() {
			test();
		});

		//测试
		function test() {

			//$("#tab tr td:contains('尉')").addClass("y");	//获取id=tab 下的 td 元素中文本值包含'尉'的素有元素
			//注意：此时包含td下面的所有子元素中文字含有指定值的
			//$("#tab tr td span:contains('尉')").css("background-color","blue");	//获取对应位置下的span中包含指定值的元素
			//$("#tab tr td:empty").html("原来我为空");	//获取不包含子元素或文本为空的td元素，并添加内容
			//$("#tab tr:has('#xx')").css("background-color","green");	//获取含有td 元素中 id=xx 的tr元素
			//$("#tab tr td:has(span)").css("background-color","green");	//获取含有span子元素的td元素
			//$("#tab tr td:parent").html("我下面有子元素或文本");	//获取所有含有子元素或者文本的td元素
			$("#tab tr td").parent().css("background-color", "green"); //获取td的父元素
		}
		</script>
			</head>
			<body>
				<h3>
					内容过滤选择器测试
				</h3>
				<table id="tab">
					<tr>
						<td id="xx">
							编号
						</td>
						<td>
							姓名
						</td>
						<td>
							军衔
						</td>
					</tr>
					<tr>
						<td>
							001
						</td>
						<td>
							小成
						</td>
						<td>
							少校
						</td>
					</tr>
					<tr>
						<td>
							002
						</td>
						<td>
							小明
						</td>
						<td>
							中尉
						</td>
					</tr>
					<tr>
						<td>
							003
						</td>
						<td>
							小赵
						</td>
						<td>
							上尉
						</td>
					</tr>
					<tr>
						<td>
							004
						</td>
						<td>
						</td>
						<td>
							<span><p>
									上尉
								</p>
							</span>
						</td>
					</tr>
				</table>

			</body>
		</html>


[size=medium][color=red][b] 1.3.3：可见性过滤选择器：[/b][/color][/size]
[size=small][color=olive][b] 说明:可见性过滤选择器根据元素是否可见的特性获得元素：
:hidden，获取所有不可见元素，或者type为hidden的元素；
:visible，获取所有可见性元素；[/b][/color][/size] 

  案例如下：
	   //测试
		function test() {

			$("h3:visible").css("background-color","red");	//获取可见的h3元素，并添加样式
			$("#tab:hidden").show("slow");	//获取不可见id=tab的元素，并显示
		}


[size=medium][color=red][b] 1.3.4:属性过滤选择器：[/b][/color][/size]
[size=small][color=olive][b]说明:内容选择器是根据元素的文字内容或所包含的子元素特征获得元素，其文字内容
属性过滤选择器是根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以
"[" 开始 "]"结束：
[attribute]，获取包含给定属性的元素，返回元素集合；
[attribute=value]，获取包含给定属性是给定值的元素，返回元素集合；
[attribute!=value]，获取包含给定属性不是给定值的元素，返回元素集合；
[attribute^=value],获取包含给定属性值开始是给定的元素，返回元素集合；
[attribute$=value]，获取包含给定属性值结尾是给定的元素，返回元素集合；
[attribure*=value]，获取包含给定属性包含某些值的元素，返回元素集合；
[selector1][selector2]，获取包含给定属性的复合属性元素，返回元素集合；[/b][/color][/size]

案例如下： 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>
				<title>属性过滤选择器测试</title>
				<link rel="stylesheet" href="js/css.css" type="text/css"></link>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->
				<script type="text/javascript">

		//程序入口
		$(document).ready(function() {
			test();
		});

		//测试
		function test() {

			//$("#tab tr td[id=xx]").css("background-color","#FF99CC");	//获取td中id=xx的所有元素
			//$("[id*=x]").css("background-color","#00FFFF");	//获取所有属性id值中包含 'x' 的元素；
			//$("div[id^=x]").css("background-color","#F0FFFF");	//获取属性id以x开头的所有div元素；
			//$("div[id$=x]").css("background-color","#8A2BE2");	//获取所有属性id以x结尾的div元素
			//$("[name*=user]").css("background-color","#FFE4C4");	//获取所有name属性中包含user的元素
			$("[name*=user][id=xx]").css("background-color","#FFE4C4");	//获取属性name以user开头，并且属性id=xx的所有元素；

		}
		</script>
			</head>
			<body>
				<h3>
					属性过滤选择器测试
				</h3>
				<table id="tab"">
					<tr>
						<td id="xx">
							编号
						</td>
						<td>
							<input type="text" name="username" id="xx"/>
						</td>
						<td id="x7">
							军衔
						</td>
					</tr>
				</table>
				<div id="x1">id=x1</div>
				<div id="1x2">id=1x2</div>
				<div id="xxx">dddd</div>

			</body>
		</html>


[size=medium][color=red][b] 1.3.5：子元素过滤选择器：[/b][/color][/size]
[size=small][color=olive][b]说明：在页面的开发过程中，常常突出指定某行的需求，jQuery中可以通过
子元素过滤选择器轻松获得所有付元素中指定的某个元素：
:nth-child(eq|even|odd|index)，获取每个父元素下的特定位置元素，索引从1开始；
:first-child,获取每个父元素下的第一个元素，返回元素集合；
:last-child,获取每个父元素下的最后一个元素；集合;
:only-child，获取每个父元素下的仅有一个元素；集合；[/b][/color][/size]

[size=medium][color=red][b]案例如下：[/b][/color][/size] 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>
				<title>子元素过滤选择器测试</title>
				<link rel="stylesheet" href="js/css.css" type="text/css"></link>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->
				<script type="text/javascript">

		//程序入口
		$(document).ready(function() {
			test();
		});

		//测试
		function test() {

			//$("#tab tr:nth-child(even)").css("background-color","red");	//索引从1开始，tr为tab的子元素，对tr进行过滤
			//$("#tab tr td:nth-child(odd)").css("background-color","green");	//获取tr这父元素下为为奇数列的td，索引从1开始；
			//$("#tab tr td:first-child").css("background-color","#FFCC33");	//获取tr下的第一个td元素；
			//$("#tab tr:last-child").css("background-color","#FFCC33");	//获取tab下的最后一个tr元素；
			$("#tab tr td p:only-child").css("background-color","red");	//获取td下只有一个元素的p元素；
		}
		</script>
			</head>
			<body>
				<h3>
					子元素过滤选择器测试
				</h3>
				<table id="tab"">
					<tr>
						<th>
							编号
						</th>
						<th>
							姓名
						</th>
						<th>
							军衔
						</th>
					</tr>
					<tr>
						<td id="xx">
							编号
						</td>
						<td>
							<p>d</p>
						</td>
						<td id="x7">
							上校
						</td>
					</tr>
				</table>
			</body>
		</html>


[size=medium][color=red][b]1.3.6：表单对象属性过滤选择器：[/b][/color][/size]
[size=small][color=olive][b]说明：表单对象属性过滤选择器通过表单中的某对象属性特征获得该类元素；
:enable，获取表单中属性可用的元素；
:disable,获取表单中属性不可用的元素；
:chekced,获取表单中所有被选中的元素；
:selected,获取表单中所有被选中的option的元素；

提示：默认的为可见的；
案例如下：[/b][/color][/size] 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>
				<title>表单对象属性过滤选择器测试</title>
				<link rel="stylesheet" href="js/css.css" type="text/css"></link>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->
				<script type="text/javascript">

		//程序入口
		$(document).ready(function() {
			test();
		});

		//测试
		function test() {
			//$("#tab input:disabled").css("background-color","red");	//获取tab 下 input元素为不可用的所有元素
			//$("input:enabled").css("background-color","green");	//获取所有可用的input标签元素

			//用事件测试复选框状态该判断
			var s = "";
			$("#mybtn").click(function(){
				$("#tab input[name='love']:checked").each(function(){	//循环读取选中的值
					s+=$(this).val()+'、';
				});
				var t = $("#myselector").val();		//获取id为myselector的select 元素下选中的对应的option中属性value的值
			});

		}
		</script>
			</head>
			<body>
				<h3>
					表单对象属性过滤选择器测试
				</h3>
				<table id="tab"">
					<tr>
						<td>
							姓名：
						</td>
						<td>
							<input type="text" disabled="disabled" name="username" />
						</td>
					</tr>
					<tr>
						<td>
							密码：
						</td>
						<td>
							<input type="password" disabled="disabled" />
						</td>
					</tr>
					<tr>
						<td>
							爱好：
						</td>
						<td>
							<input type="checkbox" name="love" value="0"/>睡觉  
							<input type="checkbox" name="love" value="1"/>上网  
							<input type="checkbox" name="love" value="2"/>吃饭  
							<input type="checkbox" name="love" value="3"/>散步  
							<input type="checkbox" name="love" value="4"/>代码  
						</td>
					</tr>
					<tr>
						<td>
							军衔：：
						</td>
						<td>
							<select name="myselector" id="myselector">
								<option value="0">少校</option>
								<option value="1">中尉</option>
								<option value="2">上尉</option>
								<option value="3">司令</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							备注：
						</td>
						<td>
							<textarea rows="5" cols="15" name="content"></textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2"><input type="button" id="mybtn" value="提交"/></td>
					</tr>
				</table>
			</body>
		</html>
rjbusiness
关注
专栏目录
jQuery 1.5 xml 遍历所有节点属性
Pipi0714的专栏
02-16 9079
jQuery 1.5 xml 遍历所有节点属性 parseXML
jquery之table：给table动态增加行、清空table
热门推荐
孤天浪雨
07-10 2万+
比如设置table的id为tab var trHTML = "..." $("#tab").append(trHTML);//在table最后面添加一行 $("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行 $("#tab tr:not(:first)").empty(); //清空table（除了第一行以外
JQuery中过滤选择器
you4580的专栏
03-22 384
语法： :header 获得标题（h1~h6）元素，固定写法。语法： :not(selector) 不包括指定内容的元素。语法： :first 获得选择的元素中的第一个元素。语法： :last 获得选择的元素中的最后一个元素。语法： :gt(index) 大于指定索引元素。语法： :lt(index) 小于指定索引元素。语法： :even 偶数，从 0 开始计数。语法： :eq(index) 指定索引元素。语法： :odd 奇数，从 0 开始计数。
jQuery之过滤选择器eq()、odd()、even()
06-15 224
【代码】jQuery之过滤选择器eq()、odd()、even()
jQuery过滤选择器
weixin_68683361的博客
10-11 494
jQuery过滤选择器的使用
JQuery全部过滤选择器详细介绍上
业精于勤，荒于嬉
07-22 851
1、:first 用法: $(“tr:first”) ; 返回值 单个元素的组成的集合2、:last 用法: $(“tr:last”) 返回值 集合元素3、:not(selector)用法: $(“input:not(:checked)”)返回值 集合元素4、:even 用法: $(“tr:even”) 返回值 集合元素5、: odd 用法: $(“tr:odd”) 返回值 集合元素6、:eq(index)用法: $(“tr:eq(0)”) 返回值 集合元素7、:gt(index)用法: $(“tr:gt(
jquery选择器之过滤选择器
qq_28596151的博客
05-16 1369
1、jquery过滤选择器    1.1、:first选择器。    解释：选中匹配到的所有元素的第一个元素    举例：$("div:first")    文档中可能不止一个div元素，$("div")选中文档中所有的div元素，然后在这里面过滤出第一个div元素，返回给调用者，供其使用。    1.2、:last选择器    这个功能和:first选择器功能基本一样，差别是一个返回选中的第一个...
jQuery之属性过滤选择器
那么烦的博客
08-24 378
在HTML文档中，元素的开始标记中通常包含有多个属性(attribute), 在jQuery中，除了直接使用id和class属性作为选择器之外，还可以根据各种属性（如title等）对由选择器 查询到的元素进行过滤，属性过滤选择器包含了在中括号"[]"中，而不是以冒号开头，通常使用"选择器[属性过滤选择器]"语法格式，可以根据是否包含指定属性或者 根据属性值从查询到的元素中进行筛选。
jQuery选择器（二） 过滤选择器及可见性过滤选择器的使用
Jin_Xiang123的博客
01-13 1766
本篇文章主要介绍在 jQuery中过滤选择器及可见性过滤选择器的使用以及部分理论知识 在jQuery中，过滤选择器是用来过滤匹配元素集合的选择器。它们允许您选择特定的元素，如第一个、最后一个、奇数或偶数位置的元素，或者根据它们的属性、内容或其他条件进行选择。过滤选择器可以帮助您更精确地选择需要的元素，从而使操作更方便和高效。//选取所有元素中的最后一个元素3
jQuery内容过滤选择器用法分析
10-24
本文将详细介绍几种常用的jQuery内容过滤选择器，包括:contains()、:has()、:empty()以及:parent。 1. :contains()选择器：这个选择器能够帮助我们选择包含指定文本的所有元素。它非常适合在需要找到包含特定词或...
jQuery选择器之基本过滤选择器用法实例分析
12-02
jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素，jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号（:）开头。按照过滤规则的不同，我们通常把jQuery过滤选择器分为：基本过滤、属性...
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
10-17
内容过滤选择器和子元素过滤选择器是jQuery选择器的两个重要类别，它们允许开发者更精确地定位和操作DOM元素。以下是对这两个类别及其相关选择器的详细解释和实例分析。 一、jQuery内容过滤选择器 1. `:contains...
使用jQuery内容过滤选择器选择元素实例讲解
10-27
内容过滤选择器是jQuery中用于根据元素内部的特定内容来筛选元素的一类选择器。这类选择器能够帮助开发者基于元素的文本内容或者特定的子元素特征来选取页面元素。在本文中，我们将通过实例来讲解如何使用jQuery中的...
Java企业面试题3
最新发布
m0_74972727的博客
09-15 337
1. break和continue的作用(智*图) break：用于完全退出一个循环（如 for, while）或一个 switch 语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。 continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在 for 循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。 2. if分支语句和switch分支语句的异同之处(智*图) 相同点：都是用来根据不同的条件执行不同的代码块。
上传文件到钉盘流程详解
jspyth的博客
09-14 571
本文详解如何通过钉钉的API实现上传文件到钉盘目录，代码通过JAVA实现。
【学习笔记】手写 Tomcat 三
LearnTech_123的博客
09-12 1091
响应动态资源不需要写文件名了，只需要写功能的名称即可。比如登录功能，可以定义名称为 doLogin
Gradle
xiaocaij_icai的博客
09-15 132
");
笔记：Centos Jdk Nginx 安装包安装命令
贰十六的博客
09-12 595
进入到usr中的src，把刚才下载的安装包拉进去。# ./configure 报错。# 将下面填写到配置最下方。# JDK 解压版 配置。# 进入环境变量配置。
jQuery内容过滤选择器详解与应用
内容过滤选择器是jQuery选择器的一种，它们允许开发者根据元素的内容、空状态、子元素存在与否以及是否含有子元素或文本来筛选DOM元素。" 在jQuery中，内容过滤选择器主要包括以下几个： 1. `:contains(text)` - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值