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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python动态参数用法实例分析
2015/05/25 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python numpy元素的区间查找方法
2018/11/14 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python创建n行m列数组示例
2019/12/02 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python龙贝格法求积分实例
2020/02/29 Python
python3 xpath和requests应用详解
2020/03/06 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers