使用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 相关文章推荐
jQuery函数的等价原生函数代码示例
May 27 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
layui清除radio的选中状态实例
Nov 14 Javascript
微信小程序用canvas画图并分享
Mar 09 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
如何将数据从文本导入到mysql
2006/10/09 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python实现实时监控文件的方法
2016/08/26 Python
Python异常处理操作实例详解
2018/05/10 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
请介绍一下Ant
2016/07/22 面试题
文秘自荐信
2013/10/20 职场文书
大学生军训感想
2014/02/16 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python