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 showModalDialog参数的使用详解
Jan 07 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
javascript实现简易的计算器
Jan 17 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python通过zabbix api获取主机
2018/09/17 Python
浅析Python的命名空间与作用域
2020/11/25 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
公司财务自我评价分享
2013/12/17 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
体育教师自我鉴定
2014/02/12 职场文书
趣味运动会加油词
2015/07/18 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js