jQuery内容过滤选择器用法示例


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery内容过滤选择器用法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
  //选取含有文本"di"的div元素.
  $('#btn1').click(function(){
    $('div:contains(di)').css("background","#bbffaa");
  })
  //选取不包含子元素(或者文本元素)的div空元素.
  $('#btn2').click(function(){
    $('div:empty').css("background","#bbffaa");
  })
  //选取含有class为mini元素 的div元素.
  $('#btn3').click(function(){
    $('div:has(.mini)').css("background","#bbffaa");
  })
  //选取含有子元素(或者文本元素)的div元素.
  $('#btn4').click(function(){
    $('div:parent').css("background","#bbffaa");
  })
});
</script>
</head>
<body>
<h3>内容过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" > id为one,class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
  <input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>

效果图:

jQuery内容过滤选择器用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jquery 插件学习(六)
Aug 06 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
Vue.js动态组件解析
Sep 09 #Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 #Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 #Javascript
jQuery简单创建节点的方法
Sep 09 #Javascript
javascript 四十条常用技巧大全
Sep 09 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python enumerate内置库用法解析
2020/02/24 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
提高python代码运行效率的一些建议
2020/09/29 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
临床护士自荐信
2014/01/31 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2015年测量员工作总结
2015/05/23 职场文书
初一英语教学反思
2016/02/15 职场文书