jQuery 之过滤选择器
[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>jQuery 之过滤选择器相关推荐
- jq查找字段忽略html标签,jquery内容过滤选择器有哪些？
jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text).:empty .:has(seletor) .:paren ...
- jQuery基本过滤选择器
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
- jquery可见性过滤选择器
jquery可见性过滤选择器 可见性过滤选择器是根据元素的可见性状态来选择相应的元素. 在锋利的jquery一书中的介绍如下:
- jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
- jquery可见性过滤选择器:hidden、:visible
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery可见性过滤选择器 jquery可见性过滤选择器,包括:hidden.:visible,具体功能如代码中注释. 代码如 ...
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本过滤选择器 jquery基本过滤选择器,包括:first.:last.:not(.myclass).:even, ...
- jQuery之过滤选择器
过滤选择器 1.基本选择器 2.内容选择器 3.可见性选择器 4.子元素过滤器 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似于CSS3(http://t.mb5u.com/css3/ ...
- jQuery前端开发学习指南(11)——jQuery属性过滤选择器
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 属性过滤选择器概述 属性过滤选择器用于根据元素的属性来匹配元素. [attribute] 匹配 ...
- jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
- jquery基本过滤选择器（jquery筛选选择器）
这些选择器里面除了first和last还有eq方法返回的是元素对象,其余的返回都是元素集合 :gt(index) 用法: $("li:gt(0)") 意思:获取索引大于0,但不包括 ...
最新文章
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
- 计算机网络最佳路由,优化计算机网络路由的策略
- GitHub Pages和每个项目绑定自定义域名（支持多个和顶级域名）
- uniapp /deep/设置uni-app组件样式时 h5生效 小程序失效问题解决
- 双 11 模块 79.34% 的代码是怎样智能生成的？
- lnmp 修改mysql密码_Lnmp下修改mysql根密码
- python读取枚举_在python中枚举(enumerate in python)
- lg函数c语言表达式,lgammal - [ C语言中文开发手册 ] - 在线原生手册 - php中文网
- ElasticSearch启动报错curl: (7) Failed connect to 172.19.128.56:9200； 拒绝连接---ElasticSearch工作笔记029
- 一些常用的JavaScript总结
- PreparedStatement类详解以及案例
- vue多级菜单的实现
- 金边富贵竹的养护方法
- 【周赛总结】第196场周赛——全一子矩阵，交换k次的最小整数
- Matlab 绘制双纵轴图
- 腾讯云DNS 域名服务器(nameservers)修改
- 如何选择企业即时通讯软件
- Javascript 16进制转有符号的10进制整数
- 第二章：阿里云ECS服务器（G5）安装配置docker
- 设银行1年期定期存款年利率c语言,4.计算定期存款本利之和设银行定期存款的年......
热门文章
- [!] The `Paopao [Debug]` target overrides the `PODS_ROOT` build setting defined in `Pods/Target Supp
- 计算机硬件知识的意义,认识计算机硬件教案
- C语言库函数：memcmp/strcmp和strncmp的区别
- TCP/IP详解（全面）
- Android 检查权限总是 PERMISSION_GRANTED
- 王道——数据结构 第一章 思维拓展
- 集万千优点于一身的Haproxy集群，你还不了解？
- Typecho中handsome主题如何增加侧边导航栏
- 海外：国外最受欢迎的5个电子邮件服务网站
- html如何在背景的基础上添加文字,如何创建背景图片并在其上添加文字