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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
原生JS实现层叠轮播图
May 17 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vue实现新闻展示页的步骤详解
Apr 11 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php实现微信发红包
2015/12/05 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
AngularJS语法详解
2015/01/23 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
Python实现截屏的函数
2015/07/26 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python实现双色球随机选号
2020/01/01 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python 绘制正态曲线的示例
2020/09/24 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
贪污检举信范文
2015/03/02 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Python实现自动玩连连看的脚本分享
2022/04/04 Python