使用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 相关文章推荐
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 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
php实现encode64编码类实例
2015/03/24 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
vue实现信息管理系统
2020/05/30 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python中列表的含义及用法
2020/05/26 Python
Python识别处理照片中的条形码
2020/11/16 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
大学生两会学习心得体会
2014/03/10 职场文书
岗位廉政承诺书
2014/03/27 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年消防工作总结
2014/11/21 职场文书
2015年母亲节寄语
2015/03/23 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书