1.3:过滤选择器：
说明：过滤选择器根据某类过滤规则进行元素匹配，书写是都是以冒号
(:)开头，简单过滤选择器是过滤选择器中使用最为广的一种
1.3.1：简单过滤选择器：
过滤器 功能 返回值
first()或:first 获取第一个元素，返回单个元素；
last()或:last 获取最后一个元素，返回单个元素；
:not(selector)获取给定选择器外的元素，返回元素集合；
:even 获取所有索引为啊偶数的元素，0开始，返回元素集合；
dd 奇数
:eq(index) 获取指定索引的元素，从0开始，返回单个元素；
:gt(index) 获取大于指定索引的元素，返回元素集合；
:lt(index) 小于
:header 获取所有标题类型元素h1 h2 h3 h4 h5
:animated 获得正在执行动画效果的元素，元素集合；
案例如下：
<%@ 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>
1.3.2：内容过滤选择器：
说明：内容过滤选择器根据元素中的"文字内容或所包含的子元素特征"获取元素，
其文字内容可以 模糊或绝对匹配进行元素定位；
选择器 功能 返回值
:contains(test)，获取包含给定文本的元素，返回元素集合；
:empty，获取所有不包含子元素或者文本的空元素，返回元素集合；
:has(selector)，获取含有选择器所匹配的元素的元素，返回元素集合；
:parent，获取含有子元素或者文本的元素；
案例如下：
<%@ 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>
1.3.3：可见性过滤选择器：
说明:可见性过滤选择器根据元素是否可见的特性获得元素：
:hidden，获取所有不可见元素，或者type为hidden的元素；
:visible，获取所有可见性元素；
案例如下：
//测试
function test() {
$("h3:visible").css("background-color","red"); //获取可见的h3元素，并添加样式
$("#tab:hidden").show("slow"); //获取不可见id=tab的元素，并显示
}
1.3.4:属性过滤选择器：
说明:内容选择器是根据元素的文字内容或所包含的子元素特征获得元素，其文字内容
属性过滤选择器是根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以
"[" 开始 "]"结束：
[attribute]，获取包含给定属性的元素，返回元素集合；
[attribute=value]，获取包含给定属性是给定值的元素，返回元素集合；
[attribute!=value]，获取包含给定属性不是给定值的元素，返回元素集合；
[attribute^=value],获取包含给定属性值开始是给定的元素，返回元素集合；
[attribute$=value]，获取包含给定属性值结尾是给定的元素，返回元素集合；
[attribure*=value]，获取包含给定属性包含某些值的元素，返回元素集合；
[selector1][selector2]，获取包含给定属性的复合属性元素，返回元素集合；
案例如下：
<%@ 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>
1.3.5：子元素过滤选择器：
说明：在页面的开发过程中，常常突出指定某行的需求，jQuery中可以通过
子元素过滤选择器轻松获得所有付元素中指定的某个元素：
:nth-child(eq|even|odd|index)，获取每个父元素下的特定位置元素，索引从1开始；
:first-child,获取每个父元素下的第一个元素，返回元素集合；
:last-child,获取每个父元素下的最后一个元素；集合;
:only-child，获取每个父元素下的仅有一个元素；集合；
案例如下：
<%@ 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>
1.3.6：表单对象属性过滤选择器：
说明：表单对象属性过滤选择器通过表单中的某对象属性特征获得该类元素；
:enable，获取表单中属性可用的元素；
:disable,获取表单中属性不可用的元素；
:chekced,获取表单中所有被选中的元素；
:selected,获取表单中所有被选中的option的元素；
提示：默认的为可见的；
案例如下：
<%@ 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>
分享到：
相关推荐
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
今天我们将深入探讨一个特定的jQuery功能——可见性过滤选择器。这些选择器允许我们根据元素的可见状态来选取DOM中的节点，从而实现更加精细化的操作。 首先，jQuery提供了两种主要的可见性过滤选择器：`:visible` ...
#### 内容过滤选择器 1. **:first**: 选取第一个元素，等同于`first()`方法。 2. **:last**: 选取最后一个元素，等同于`last()`方法。 3. **:not(selector)**: 选取不匹配selector的所有元素。 4. **:even**: 选取...
jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素，jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号（:）开头。按照过滤规则的不同，我们通常把jQuery过滤选择器分为：基本过滤、属性...
过滤选择器用于进一步筛选已选元素集合，包括基于属性、索引位置、可见性等进行选择。例如： - `$(".myClass:even")` 选择所有偶数索引的`myClass`类元素 - `$(".myClass:gt(2)")` 选择所有索引大于2的`myClass`类...
过滤选择器则帮助我们进一步细化选取结果，例如： 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...
本文将详细介绍几种常用的jQuery内容过滤选择器，包括:contains()、:has()、:empty()以及:parent。 1. :contains()选择器：这个选择器能够帮助我们选择包含指定文本的所有元素。它非常适合在需要找到包含特定词或...
本文将深入探讨jQuery中的四种主要选择器：ID选择器、标签选择器、类选择器和属性选择器。这些选择器是jQuery高效地定位页面元素的基础，让我们逐一了解它们。 首先，ID选择器是通过CSS的`#`符号来指定一个元素的...
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景，熟悉并...
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：...
过滤选择器提供丰富的条件筛选，使选择更具针对性。 1. **基本过滤选择器** - `:first`和`:last`分别选取序列中的第一个和最后一个元素，如`$('span:first')`将首个`<span>`元素变为红色。 - `:not(selector)`...
内容过滤选择器是jQuery中用于根据元素内部的特定内容来筛选元素的一类选择器。这类选择器能够帮助开发者基于元素的文本内容或者特定的子元素特征来选取页面元素。在本文中，我们将通过实例来讲解如何使用jQuery中的...
过滤选择器允许开发者根据不同的条件来过滤已选中的元素集合。这些条件可以是元素的位置、内容或属性等。过滤选择器分为几种类型： 1. **简单过滤选择器** - 用于选择满足简单条件的元素。 - 实例: `$("li:first...
本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法。分享给大家供大家参考，具体如下： jQuery的内容过滤选择器 一、:contains(text) 选择器：:contains(text) 描述：匹配包含给定文本的元素 返回值：元素...
- **基本过滤选择器**：例如`:first`选取第一个元素，`:last`选取最后一个元素，`:not(selector)`排除匹配的元素，`:even`选取偶数索引的元素，`:odd`选取奇数索引的元素，`:eq(index)`选取指定索引的元素，`:gt...
6. **过滤选择器**: 用于从已选集进一步筛选元素，如`:visible`（可见元素）、`:hidden`（隐藏元素）和`:not(selector)`（排除指定选择器匹配的元素）。例如，`$("input[type='text']:visible")`选取所有可见的文本...
本文将深入探讨"JQ内容过滤选择器"这一关键知识点，它是jQuery选择器体系中的一个重要组成部分，用于从DOM树中筛选出符合特定条件的元素。 一、JQ内容过滤选择器概述 内容过滤选择器允许我们根据元素内部的文本或...
jQuery选择器是其核心功能之一，它们用于在HTML文档中找到特定的元素，以便进行进一步的操作。下面是对jQuery选择器的一些详细说明： 1. **基本选择器**：包括`$()`函数内的ID选择器（如`$("#myID")`）、类选择器...