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可见性过滤选择器使用示例
jQuery选择器过滤器全面的总结,老师推荐！
jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素，jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号（:）开头。按照过滤规则的不同，我们通常把jQuery过滤选择器分为：基本过滤、属性...
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：...
主要介绍了jQuery内容过滤选择器用法,实例分析了:contains()、:has()、:empty()、:parent等内容过滤选择器的使用技巧,需要的朋友可以参考下
主要介绍了jQuery内容过滤选择器与子元素过滤选择器用法,结合实例形式分析了jQuery内容过滤选择器与子元素过滤选择器相关功能、原理及使用方法,需要的朋友可以参考下
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器，方便以后查找。
本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单...
主要介绍了jQuery基本过滤选择器用法,结合实例形式分析了jQuery中:first、:last、:not、:even、:odd、:eq、:gt等基本过滤选择器的使用方法,需要的朋友可以参考下
现在我们开始Jquery的选择器之旅哈哈。 下面的选择器分类中， 带有“过滤器”的分类表示是“过滤”选择器， 否则就是“选择”功能的选择器。 jQuery选择器分为如下几类： ［说明］
主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下