1.介绍

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     div, span, p {

         width: 140px;

         height: 140px;

         margin: 5px;

         background: #aaa;

         border: #000 1px solid;

         float: left;

         font-size: 17px;

         font-family: Verdana;

     }

     div.mini {

         width: 55px;

         height: 55px;

         background-color: #aaa;

         font-size: 12px;

     }

     div.hide {

         display: none;

     }

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(document).ready(function(){

         //选取所有可见的  div 元素

         $("#btn1").click(function(){

             $("div:visible").css("background","#abf");

         })

         //选择所有不可见的 div 元素

         $("#btn2").click(function(){

             //show(time): 可以使不可见的元素变为可见, time 表示时间, 以毫秒为单位

             $("div:hidden").show(6000).css("background","#abf");

         })

         //选择所有不可见的 input 元素,输出里面的value值

         $("#btn3").click(function(){

             alert($("input:hidden").val());

         })

     })

 </script>

 </head>

 <body>

     <input type="button" value="选取所有可见的  div 元素" id="btn1">

     <input type="button" value="选择所有不可见的 div 元素" id="btn2" />

     <input type="button" value="选择所有不可见的 input 元素" id="btn3" />

     <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" value="123456789000" size="8">

     </div>

     <div id="mover">正在执行动画的div元素.</div>

 </body>

 </html>

006 jquery过滤选择器-----------（可见性过滤选择器）的更多相关文章

  1. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. jQuery--内容过滤和可见性过滤

    一.内容过滤 1.内容过滤选择器介绍 :empty 当前元素是否为空(是否有标签体) :contains(text)   标签体是否含有指定的文本 :has(...)                 ...

  3. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. jQuery学习笔记之可见性过滤选择器

    可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素. 显示隐藏的例子: <!DOCTYPE html> <html> <head> <script ...

  5. jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible

    <!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...

  6. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  7. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  8. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  9. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  10. jquery选择器(三)-过滤选择器

    一.基本过滤选择器 二.内容过滤选择器 1. 包含文本内容为“text”的元素 2. 含有某个选择器所匹配的父元素 3. 包含有子元素或者文本的父元素 4. 不含有子元素或者文本的父元素 三.可见性过 ...

随机推荐

  1. （转） eclipse项目中.classpath文件详解

    背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言 在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...

  2. C/S与B/S区别

    1.什么是C/S结构C/S (Client/Server)结构,即客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现, ...

  3. 第一节 Spring的环境搭建

     正在构建,扫一扫,敬请期待 和玩得来的人在一起玩才叫玩! 和玩不来的人在一起玩,那种感觉就像加班啊! 关注胖个人微信公众账号,希望对各位学生有所帮助! --胖先生 Spring框架,什么是Sprin ...

  4. bzoj千题计划281：bzoj4558: [JLoi2016]方

    http://www.lydsy.com/JudgeOnline/problem.php?id=4558 容斥原理 全部的正方形-至少有一个点被删掉的+至少有两个点被删掉的-至少有3个点被删掉的+至少 ...

  5. bzoj千题计划201：bzoj1820: [JSOI2010]Express Service 快递服务

    http://www.lydsy.com/JudgeOnline/problem.php?id=1820 很容易想到dp[i][a][b][c] 到第i个收件地点,三个司机分别在a,b,c 收件地点的 ...

  6. dp的进阶 (一)

    熟练掌握dp的定义方法. ①四维dp的转移,生命值转移时候需要注意的 ②集合的定义,判断二进制内部是否有环 ③很难想到的背包问题 ④博弈类型的dp ⑤排列组合类型dp ⑥01背包的变种(01背包+完全 ...

  7. Git与GitHub学习笔记（二）提交的一些笔记

    1.合并分支的使用一定要切换到master分支上去合并:git merge company2.切换分支的时候一定要提交干净本地分支的代码,才可以切换分支,否则提示错误信息: 3.这时候我们做的就是提交 ...

  8. 转 -----那些年总也记不牢的IO

    关于资源关闭: 一般情况下是:先打开的后关闭,后打开的先关闭 另一种情况:看依赖关系,如果流a依赖流b,应该先关闭流a,再关闭流b 例如处理流a依赖节点流b,应该先关闭处理流a,再关闭节点流b 当然完 ...

  9. spring框架学习（一）入门

    spring 入门--IOC  1.导入jar包 4 + 1  : 4个核心(beans.core.context.expression) + 1个依赖(commons-loggins...jar) ...

  10. [转载]10款流行的Markdown编辑器

    10款流行的Markdown编辑器 http://www.csdn.net/article/2014-05-05/2819623 作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!M ...