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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
理解javascript异步编程
Jan 27 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 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编程与应用
2006/10/09 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php上传文件问题汇总
2015/01/30 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
Vuex的初探与实战小结
2018/11/26 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
python协程用法实例分析
2015/06/04 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python中class的定义及使用教程
2019/09/18 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
财政局个人年终总结
2015/03/03 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
七年级作文之雪景
2019/11/18 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技