jQuery 之过滤选择器
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>