测试代码

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. 10个经典的Java main 方法面试题

    1. 不用main方法如何定义一个类? 不行,没有main方法不能运行Java类. 在Java 7之前,你可以通过使用静态初始化运行Java类.但是,从Java 7 开始就不行了. 2. main() ...

  2. ios和android一并学习的体会

    如果说为什么要同时学习这两种不同的移动平台,其实有一定的“闲”的因素在里面. 相对于ios,android我是早半年接触的.最开始学习的时候也就是j2ee学习的延续,通过看视频连带看书学了大概一个月的 ...

  3. C#以及Oracle中的上取整、下取整方法

    1.C#中: 上取整——Math.Ceiling(Double),即返回大于或等于指定双精度浮点数的最大整数(也可称为取天板值): eg:  Math.Ceiling(1.01)=2;      Ma ...

  4. Oracle 数据库链接

    SQL> CREATE DATABASE LINK   mydblink 2    CONNECT TO   test   IDENTIFIED BY   test123 3    USING  ...

  5. Lazy Loading Images

    Use a blank.gif as the src of images, and include the width and height of the final image. HTML: < ...

  6. PHP网址

    15个魔术方法的总结: http://blog.csdn.net/bossdarcy/article/details/6210794 PHP代码重构:http://blog.csdn.net/tony ...

  7. hotfix分析

    使用System Update Readiness Tool for Windows Server 2008 R2 x64 可以分析hotfix是否有安装失败的情况 示例:http://blogs.t ...

  8. Codeforces Round #339 (Div. 1) A. Peter and Snow Blower 计算几何

    A. Peter and Snow Blower 题目连接: http://www.codeforces.com/contest/613/problem/A Description Peter got ...

  9. 关于ORACLE DUAL表

    1.DUAL表的用途 Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中--查看当前连接用户 SQL> select user from d ...

  10. 【剑指offer】Q18：树的子结构

    类似于字符串的匹配,我们总是找到第一个匹配的字符,在继续比較以后的字符是否所有同样,假设匹配串的第一个字符与模式串的第一个不同样,我们就去查看匹配串的下一个字符是否与模式串的第一个同样,相应到这里,就 ...