测试代码

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++语言编程（How to program in C++）

    这几年在公司一直带徒弟,每次必教的内容就是C++.在我看来,C++已经有非常好的教材了(注1),实在没有必要从头教起.自学就可以了,可是结果总是不尽人意. 不想再重复一次"把C++当成一门新 ...

  2. Windows操作系统单文件夹下到底能存放多少文件及单文件的最大容量

    本文是转自:http://hi.baidu.com/aqgjoypubihoqxr/item/c896921f8c2eaba5feded5f2         最近需要了解Windows中单个文件夹下 ...

  3. Http下的各种操作类.WebApi系列~通过HttpClient来调用Web Api接口

    1.WebApi系列~通过HttpClient来调用Web Api接口 http://www.cnblogs.com/lori/p/4045413.html HttpClient使用详解(java版本 ...

  4. iPhone中国移动收不到彩信，联通不用设置都可以，具体设置方法：

    打开“设置”. 打开“通用”. 打开“蜂窝移动网络”. 打开“蜂窝数据移动网络”. 在“蜂窝移动数据”一栏中的“APN”处填入“cmnet”. 在“彩信”一栏中的“APN”处填入“cmnet”,“MM ...

  5. 用jquery判断当前显示器的分辨率，加载不同CSS

    <link rel="stylesheet" type="text/css" id="css"><script langu ...

  6. MySQL数据库能够用随意ip连接訪问的方法

    通过CMD命令行改动数据库表的一个字段的值.实现连接,訪问. 第一步.找到MYSQL软件安装所在的bin文件夹. (1)cd\当前文件夹 (2)指定MYSQL安装的bin文件夹 (3)输入 -h lo ...

  7. C++ 迭代器类别

    1.output迭代器:一次一步,只能向前,流水线上放着一批空的盒子,每次向前移动一个,往盒子里面塞一个东西. 2.input迭代器:一次一步,只能向前,流水线上放着一批零件,每次向前移动一个,可以看 ...

  8. Codeforces Beta Round #75 (Div. 1 Only) B. Queue 线段树+二分

    B. Queue Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/problem/91/B Descrip ...

  9. C++ CopyFile

    复制文件 关键点 CopyFile The CopyFile function copies an existing file to a new file. The CopyFileEx functi ...

  10. 我的学习笔记_Windows_HOOK编程 2009-12-03 11:19

    一.什么是HOOK? "hook"这个单词的意思是"钩子","Windows Hook"是Windows消息处理机制的一个重要扩展,程序猿能 ...