jQuery可见性过滤选择器用法示例


Posted in Javascript onSeptember 09, 2016

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--  引入jQuery -->
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('#reset').click(function(){
    window.location.reload();
  })
  //给id为mover的元素添加动画.
  function animateIt() {
    $("#mover").slideToggle("slow", animateIt);
  }
  animateIt();
  //选取所有不可见的元素.包括<input type="hidden"/>.
  $('#btn_hidden').click(function(){
    alert( "不可见的元素有:"+$('body :hidden').length +"个!\n"+
    "其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
    "其中文本隐藏域有:"+$('input:hidden').length+"个!");
    $('div:hidden').show(3000).css("background","#bbffaa");
  })
  //选取所有可见的元素.
  $('#btn_visible').click(function(){
    $('div:visible').css("background","#FF6500");
  })
});
//]]>
</script>
</head>
<body>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<br/>
<br/>
<input type="button" value="选取所有可见的div元素." id="btn_visible"/>
<br/>
<input type="button" value="选取所有不可见的元素.包括<input type='hidden'/>和<div style='display:none;'>." id="btn_hidden"/>
<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 相关文章推荐
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
javascript比较语义化版本号的实现代码
Sep 09 #Javascript
js防阻塞加载的实现方法
Sep 09 #Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 #Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 #Javascript
Vuejs第十三篇之组件——杂项
Sep 09 #Javascript
jQuery属性选择器用法示例
Sep 09 #Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 #Javascript
You might like
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php头像上传预览实例代码
2017/05/02 PHP
javascript Excel操作知识点
2009/04/24 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
git进行版本控制心得详谈
2017/12/10 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python 多进程、多线程效率对比
2020/11/19 Python
python 对xml解析的示例
2021/02/27 Python
生物科学专业个人求职信范文
2013/12/07 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
公司委托书范本5篇
2014/09/20 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
旅游投诉信范文
2015/07/02 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
MySQL约束超详解
2021/09/04 MySQL