使用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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
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
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
python字符串连接方法分析
2016/04/12 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python中线程和进程有何区别
2020/06/17 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python try...finally...的实现方法
2020/11/25 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
爱情检讨书大全
2014/01/21 职场文书
大学旷课检讨书
2014/01/28 职场文书
科学发展观演讲稿
2014/09/11 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书