测试代码

05-可见性过滤选择器.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>05-可见性过滤选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script src="./script/assist.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
   <script type="text/javascript">
       $(document).ready(function(){
           //<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
           $("#b1").click(function(){
               $("div:visible").css("background","red");
           });

           //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
           $("#b2").click(function(){
                   $("div:hidden").show(1000);
           });

           //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>

           $("#b3").click(function(){
               var $input=$("input:hidden");

             //显示迭代..
 //            for(var i=0;i<$input.length;i++){
 //                $inputp[i]
 //
 //            }
             //隐式迭代
             $input.each(function(index,doc){
                 //alert(index)
                 //alert(doc.value);

 //                doc.val();
                 //               转换成jQuery 对象在调用
                 alert($(doc).val());

             })

           });

     });
   </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=" 选取所有可见的div元素"  id="b1"/>
   <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
   <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
   <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"  title="tesst">class为mini,title为tesst</div>
   </div>

 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">

   <div style="display:none;"  class="none">style的display为"none"的div</div>

   <div class="hide">class为"hide"的div</div>

   <span id="mover">正在执行动画的span元素.</span>
 <!-- Resources from http://down.liehuo.net -->
 </body>
 </html>

jQuery选择器之可见性过滤选择器Demo的更多相关文章

  1. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. jQuery选择器之基本过滤选择器Demo

    测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  3. jquery选择器之层级过滤选择器

    $("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素 ...

  4. jQuery选择器之表单选择器Demo

    测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. jquery选择器之属性过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  6. jquery选择器之内容过滤选择器

    先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...

  7. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  8. jquery选择器之基本过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  9. jQuery选择器之可见性选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

随机推荐

  1. Kafka学习记录

    1 Kafka的基本介绍 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.具有快速.可扩展.分布式.可复制等特点.Kafka与传 ...

  2. 高分辨率 2x图像： -webkit-min-device-pixel-ratio 的常见值对照

    -webkit-min-device-pixel-ratio的常见值对照 原文地址:http://zhangyaochun.iteye.com/blog/1816582 前言: 本文来自于对 http ...

  3. InnoDB存储引擎

    [InnoDB和MyISAM区别][ http://jeck2046.blog.51cto.com/184478/90499] InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型, ...

  4. SVN安装与使用

    来自:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html SVN服务器搭建和使用(一) Subversion是优秀的版 ...

  5. Flex 拾色器改变背景

    package {  import flash.display.*; import flash.geom.*; import flash.utils.*;  import mx.core.EdgeMe ...

  6. winrar激活

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-11) 新建记事本文件(txt文件),然后将文件另存为以 rarreg.key 为文件名的文件(当然由于设置的不同,可能 ...

  7. call()和apply()方法

    还在处在刚刚学习JavaScript的初级阶段,所以理解相对浅显,是一种简单的模式理解.这里做一个笔记,让自己在回顾的时候,更加牢记. call()和apply()的形式 A.call(B," ...

  8. Ext的Panel总结（好文章）

    我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...

  9. 基于FlashPaper的文档播放器

    本文主要讨论.描述了使用Adobe公司的Flex与FlashPaper产品完成对发布到网上的文档资料进行只读控制,也就是说只允许浏览操作.对下载.打印进行控制. FlashPaper FlashPap ...

  10. uva331 - Mapping the Swaps

    Mapping the Swaps Sorting an array can be done by swapping certain pairs of adjacent entries in the ...