测试代码

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. C#扫描仪编程、条形码识别编程资料

    扫描仪编程资料:http://www.cnblogs.com/wubh/archive/2011/11/07/2239178.html 图片条形码识别资料:http://www.codeproject ...

  2. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  3. Java 关于 == 和 equal()的区别

    因为用new创建了两个对象,所以a和b指向两个不同的内存地址,所以返回false equal()是object的方法,所以只适用于对象,不使用于基本类型.不过equal()默认是用“==”比较两个对象 ...

  4. java/android线程池详解

    一,简述线程池: 线程池是如何工作的:一系列任务出现后,根据自己的线程池安排任务进行. 如图: 线程池的好处: 重用线程池中的线程,避免因为线程的创建和销毁所带来的性能开销. 能有效控制线程池的最大并 ...

  5. github命令

    git push origin master //把本地源码库push到Github上 git pull origin master //从Github上pull到本地源码库

  6. VC++内存区域

    转载声明:本文转载自http://blog.csdn.net/sjxbf/article/details/6441730 一.预备知识—程序的内存分配 一个由c/c++编译的程序占用的内存分为以下几个 ...

  7. oracle 查詢表字段明細、字段注釋、表註釋

    查詢表字段明細 select  column_name,data_type,data_length,DATA_PRECISION ,DATA_SCALE from all_tab_columns wh ...

  8. 用一行代码初始化ArrayList

    方法1: ArrayList<String> arrList1 = (ArrayList<String>) Arrays.asList("Buenos Aires&q ...

  9. uva539 The Settlers of Catan

    The Settlers of Catan Within Settlers of Catan, the 1995 German game of the year, players attempt to ...

  10. CSS复合样式

    关于font OK,我们先从font来谈起. 如下一段代码: div{ font-size: 14px; font-family: '\5FAE\8F6F\96C5\9ED1'; font-weigh ...