使用jQuery内容过滤选择器选择元素实例讲解


Posted in Javascript onApril 18, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 
jQuery选择器详解 
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 
--> 
<title></title> 
<!-- 使用jQuery内容过滤选择器选择元素:在页面中,根据需要创建四个<div>标记,并在其中的<div>中新建一个<span>标记,其余<div>标记中输入内容(或为空),通过内容过滤器获取指定的元素,并显示在页面中。--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center} 
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none} 
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee} 
</style> 
<script type="text/javascript"> 
$(function () { //显示包含给定文本的元素 
$("div:contains('A')").css('display','block'); 
}) 
$(function(){ //显示所有不包含子元素或者文本的空元素 
$('div:empty').css('display','block'); 
}) 
$(function () { //显示含有选择器所匹配的元素 
$('div:has(span)').css('display', 'block'); 
}) 
$(function () { //显示含有子元素或者文本的元素 
$('div:parent').css('display', 'block'); 
}) 
</script> 
<!-- 注:在:contains(text)内容过滤选择器中,如果是查找字母,则有大小写的区别--> 
</head> 
<body> 
<div>ABCD</div> 
<div><span></span></div> 
<div>EFAH</div> 
<div></div> 
</body> 
</html>
Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
jQuery随机切换图片的小例子
Apr 18 #Javascript
JS 各种网页尺寸判断实例方法
Apr 18 #Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 #Javascript
JS隐藏参数post传值实例
Apr 18 #Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 #Javascript
JS打开新窗口的2种方式
Apr 18 #Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
javascript实现表单验证
2016/01/29 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
js实现筛选功能
2020/11/24 Javascript
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
班队活动设计方案
2014/01/30 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android