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 相关文章推荐
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
javascript中this的用法实践分析
Jul 29 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 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上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
python中as用法实例分析
2015/04/30 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python有序字典简单实现方法示例
2017/09/28 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
Python实现归一化算法详情
2022/03/18 Python
讨论nginx location 顺序问题
2022/05/30 Servers