使用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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 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安全开发库中文详细介绍
2015/03/22 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
详解vue-cli3多环境打包配置
2019/03/28 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
Python实现批量修改文件名实例
2015/07/08 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
介绍一下#error预处理
2015/09/25 面试题
学生学习总结的自我评价
2013/10/22 职场文书
教师网络培训心得体会
2016/01/09 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python