使用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 UI的拖拽功能实现方法小结
Mar 14 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 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
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
js同源策略详解
2015/05/21 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python中的startswith和endswith函数使用实例
2014/08/25 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
python 自动批量打开网页的示例
2019/02/21 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
小学生寒假家长评语
2014/04/16 职场文书
活动总结格式
2014/08/30 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers