<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }

            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }

            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $("#btn1").click(function(){
                    $("div:visible").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    //alert($("div:hidden").length);
                    //show(time): 可以使不可见的元素变为可见, time 表示时间, 以
                    //毫秒为单位
                    //jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该
                    //方法的 jQuery 对象: 可以继续调用该对象的其他方法.
                    $("div:hidden").show(2000).css("background",
                            "#ffbbaa");
                });
                $("#btn3").click(function(){
                    //val() 方法可以返回某一个表单元素的 value 属性值.
                    alert($("input:hidden").val());
                });

            });

        </script>
    </head>
    <body>
        <input type="button" value="选取所有可见的  div 元素" id="btn1">
        <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
        <input type="button" value="选择所有不可见的 input 元素" id="btn3" />

        <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"></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>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div
            <input type="hidden" value="123456789000" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

jQuery选择器(可见性选择器)第五节的更多相关文章

  1. JQuery的可见性选择器

    1. <div id="test" style="width:400px;height:200; background:#0000ff;display:block; ...

  2. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十五节--缓存小结与ABP框架项目中 Redis Cache的实现

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 缓存 为什么要用缓存 为什么要用缓存呢,说缓存之前先说使用缓存的优点. 减少寄宿服务器的往返调用(round-tr ...

  3. (8)Jquery1.8.3快速入门_可见性选择器

    一.Jquery的可见性选择器: 可见性选择器: 1.:visable 筛选可以见的元素 2. :hidden 筛选不可见的元素 效果: 源码: <!DOCTYPE html> <h ...

  4. jQuery九类选择器

    目的:通过选择器,能定位web页面(HTML/JSP/XML)中的任何标签, 注意:项目中,通常是多种选择器一起使用 基本选择器 <html> <head> <meta ...

  5. 第一百六十五节，jQuery，过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  6. 第三百二十五节，web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签

    第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签 标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象需 ...

  7. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jquery可见性选择器（综合）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery可见性选择器（匹配匹配所有显示的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 第4章 同步控制 Synchronization ----Interlocked Variables

    同步机制的最简单类型是使用 interlocked 函数,对着标准的 32 位变量进行操作.这些函数并没有提供"等待"机能,它们只是保证对某个特定变量的存取操作是"一个一 ...

  2. C++格式化输出的好东西

    s = FormatFloat("0.######", d); 最多保留6位s = FormatFloat("0.000000", d); 始终保留6位s = ...

  3. String Problem hdu 3374 最小表示法加KMP的next数组

    String Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. C++PrimerPlus第6版 第四章——复合类型

    1,复合类型主要包含:数组.结构.联合.枚举.类.指针.引用等. 2,数组.长度必须确定.即编译阶段,数组的长度就得确定好.所以只能使用常量(#define.const)声明数组长度.如果使用变量声明 ...

  5. 扩展javascript扩展(类，对象，原型)

     扩展javascript扩展(类,对象,原型)

  6. python pip安装方法

    1.python安装,最好是按照32位的版本,64位版本有的时候出现奇怪问题. 2.python安装完成后,需要在系统的环境变量"path"中增加路径设置. 3.一般情况下,使用p ...

  7. C#利用String类的IndexOf、LastIndexOf、Substring截取字符串

    一.String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引(从0开始).搜索从指定字符位置开始,并检查指定 ...

  8. 线程queue

    import queue q = queue.Queue() #模拟队列,先进先出 q.put('first') q.put('second') q.put('third') print(q.get( ...

  9. MySQL比like语句更高效的写法locate position instr find_in_set

    使用内部函数instr,可代替传统的like方式查询,并且速度更快. instr函数,第一个参数是字段,第二个参数是要查询的串,返回串的位置,第一个是1,如果没找到就是0. 例如, select na ...

  10. sql里的null和空的区别

    null表示为未知,未定义: 空表示为空白,或者0: sql查询,排序时null在''的前面: 定义字段为not null,写为空可以写入: null不可以用来比较,只能用is null判断: