测试代码

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. 线程池：ThreadPoolExecutor

    [ThreadPoolExecutor的使用和思考]   public ThreadPoolExecutor(int corePoolSize,                             ...

  2. SVN安装与使用

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

  3. 闲话Cache：始篇

    Caching(缓存)在现代的计算机系统中是一项最古老最基本的技术.它存在于计算机各种硬件和软件系统中,比如各种CPU, 存储系统(IBM ESS, EMC Symmetrix…),数据库,Web服务 ...

  4. HRESULT 0x80131515 解决方法

    http://254698001.blog.51cto.com/2521548/1339696 很多朋友在加载DLL是发生这样的错误:HRESULT: 0x80131515. 解决方法是,在DLL文件 ...

  5. IntervalZero RTX 2014

    2692407267@qq.com,很多其它内容请关注http://user.qzone.qq.com/2692407267 IntervalZero RTX 2014   上图 watermark/ ...

  6. 安装nodejs和grunt以后出现 /usr/bin/env: node: No such file or directory

    安装完成以后需要执行此命令 sudo ln -s /usr/bin/nodejs /usr/bin/node

  7. DebugView 调试工具

    软件标签: DebugView调试工具 用debugview,打开debugview,运行你的debug版本程序,可以定位到源文件的某一行.在vc源码中需要输出的地方用 OutputDebugStri ...

  8. 开源图形库 c语言-图形图像库 集合[转]

    开源图形库 c语言-图形图像库 集合[转] Google三维API O3D O3D 是一个开源的 Web API 用来在浏览器上创建界面丰富的交互式的 3D 应用程序.这是一种基于网页的可控3D标准. ...

  9. iOS开发——语法OC篇&BOOL / bool / Boolean / NSCFBoolean

    Name Typedef Header True Value False Value BOOL signed char objc.h YES NO bool _Bool (int) stdbool.h ...

  10. javascript代码解释执行过程

    javascript是由浏览器解释执行的脚本语言,不同于java c,需要先编译后运行,javascript 由浏览器js解释器进行解释执行,总的过程分为两大块,预编译期和执行期 下面的几个demo解 ...