JQuery①-CFANZ编程社区

JQuery①

1、JQuery 介绍
2、jQuery的初体验
3、jQuery 核心函数

1、传入参数为[函数]时;
2、传入参数为[HTML字符串]时:
3、传入参数为[选择器字符串]时:
4、传入参数为[DOM对象]时:

4、jQuery对象和dom对象区分

4.1、什么是jQuery对象，什么是dom对象

Dom对象
jQuery对象

4.2、问题:jQuery对象的本质是什么?
4.3、jQuery对象和Dom对象使用区别
4.4、Dom对象和jQuery对象互转

1、dom对象转化为jQuery对象(*重点)
2、 jQuery对象转为dom对象(*重点)

5、选择器

1、基本选择器（***重点)
2、层级选择器(****重点)
3、过滤选择器

基本过滤器
内容过滤器:
属性过滤器:
表单过滤器:

6、jQuery元素筛选

1、JQuery 介绍

什么是jQuery?
jQuery，顾名思义，也就是JavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想!!!
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
Query流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用 jQuery。
jQuery好处!!!
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择D0M元素、制作动画效果、事件处理、使用Ajax以及其他功能

2、jQuery的初体验

需求:使用jQuery给一个按钮绑定单击事件?
注：jquery.js要自己搜
http://www.htmleaf.com/js/jquery/jquery-1.7.2.html

01 HelloWorld.html

<!DOCTYPE html PUBLIC "-//WBCI/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title> Insert title here</title>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">
        // window.οnlοad=function () {
        //     var btnObj=document.getElementById("btnId");
        //     alert(btnObj);//[object HTMLButtonElement]--->>dom对象
        //     btnObj.οnclick=function () {
        //         alert("js原生的单击事件");
        //     }
        //
        // }
        $(function () {//相当于   window.οnlοad=function () {}
            var $btnObj=$("#btnId");//表示按id查询标签对象
            $btnObj.click(function () {//绑定单击事件
                alert("JQuery的单击事件");
            })

        });
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>

</html>

3、jQuery 核心函数

$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数

1、传入参数为[函数]时;

表示页面加载完成之后。相当于window.onload =function()}

2、传入参数为[HTML字符串]时:

会为我们创建这个html标签对象

3、传入参数为[选择器字符串]时:

$("#id属性值");id选择器，根据id查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
${(.class属性值");类型选择器，可以根据clas属性查询标签对象

4、传入参数为[DOM对象]时:

会把这个dom对象转换为jQuery对象

03 核心函数.html

<!DOCTYPE html PUBLIC "-//WBCI/DTD HTML 4.01 Transitional//EN" >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title> Insert title here</title>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">
       //核心函数的4个作用
        $(function () {
            // alert("页面加载完成之后，自动调用");
            $("<div>" +
                "    <span>div-span1</span>" +
                "    <span>div-span2</span>" +
                "</div>").appendTo("body");
            // alert($("button").length);
            var btnObj=document.getElementById("btn01");
            alert(btnObj);
            alert($(btnObj));
            // $("#id属性值");id选择器，根据id查询标签对象
            // $(“标签名”);  标签名选择器，根据指定的标签名查询标签对象
            // ${(".class属性值");类型选择器，可以根据clas属性查询标签对象

        });
    </script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>

</html>

4、jQuery对象和dom对象区分

4.1、什么是jQuery对象，什么是dom对象

Dom对象

1.通过getElementByld()查询出来的标签对象是Dom对象
2.通过getElementsByName(/查询出来的标签对象是Dom对象
3.通过getElementsByTagName(/查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象，是Dom对象

Dom对象 alert()出来的是[object HTMLButtonElement]

jQuery对象

5.通过JQuery提供的API创建的对象，是JQuery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7.通过JQuery提供的API查询到的对象，是JQuery对象

jQuery对象 alert()出来的是[object Object]

4.2、问题:jQuery对象的本质是什么?

jQuery对象是dom对象的数组+jQuery提供的一系列功能函数。

4.3、jQuery对象和Dom对象使用区别

jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

4.4、Dom对象和jQuery对象互转

1、dom对象转化为jQuery对象(*重点)

1、先有DOM对象
2、$(DOM对象)就可以转换成为jQuery对象

2、 jQuery对象转为dom对象(*重点)

1、先有jQuery对象
2、jQuery对象[下标]取出相应的DOM对象

JQuery①_dom对象

5、选择器

1、基本选择器（***重点)

#ID选择器：根据id查找标签对象

JQuery①_jquery_02

.class选择器: 根据class查找标签对象

JQuery①_html_03

element 选择器: 根据标签名查找标签对象

JQuery①_html_04

*选择器:表示任意的，所有的元素

JQuery①_dom对象_05

selector1, selector2 组合选择器:合并选择器1，选择器2的结果并返回

JQuery①_dom对象_06

01基本选择器_.html

p.myClass

表示标签名必须是p标签，而且Class类型还要是myClass

<!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>
    <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: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }

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

            //1.选择id为one 的元素"background-color","#bbffaa"
            $("#btn1").click(function () {
                //css() 方法可以设置或获取样式
                $("#one").css("background-color","#bbffaa");

            });

            //2.选择class为mini的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color","#bbffaa");
            });

            //3.选择元素名是div的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color","#bbffaa");
            });

            //4.选择所有的元素
            $("#btn4").click(function () {
                $("*").css("background-color","#bbffaa");
            });

            //5.选择所有的span元素和id为two的元素
            $("#btn5").click(function () {
                $("span ,#two").css("background-color","#bbffaa");
            });

        });
    </script>
</head>
<body>
<!--   <div>
        <h1>基本选择器</h1>
       <\div-->

    <input type="button" value="选择id为one的元素" id="btn1"/>
    <input type="button" value="选择class为mini的所有元素" id="btn2"/>
    <input type="button" value="选择元素名是div的所有元素" id="btn3"/>
    <input type="button" value="选择所有的元素" id="btn4"/>
    <input type="button" value="选择所有的span元素和id为two的元素" id="btn5"/>

    <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="..." class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>
    <span class="one" id="span">^^span元素^^</span>
</body>
</html>

2、层级选择器(****重点)

ancestor descendant

后代选择器:在给定的祖先元素下匹配所有的后代元素

JQuery①_html_07

parent > child

子元素选择器:在给定的父元素下匹配所有的子元素

JQuery①_jquery_08

prev+next

相邻元素选择器:匹配所有紧接在prev元素后的next元素

JQuery①_dom对象_09

prev ~sibings

之后的兄弟元素选择器:匹配prev元素之后的所有siblings元素

JQuery①_dom对象_10

02层级选择器_.html

<!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>
    <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: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }

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

            //1.选择body内所有div元素
            $("#btn1").click(function () {
                //css() 方法可以设置或获取样式
                $("body div").css("background-color","#bbffaa");

            });

            //2.在body选择div子元素
            $("#btn2").click(function () {
                $("body>div").css("background-color","#bbffaa");
            });

            //3.选择id为one的下一个div元素
            $("#btn3").click(function () {
                $("#one+div").css("background-color","#bbffaa");
            });

            //4.选择id为two的元素后面的所有兄弟元素
            $("#btn4").click(function () {
                $("#two~div").css("background-color","#bbffaa");
            });


        });
        

    </script>
</head>

<body>
<!--  <div>
        <h1>层级选择器:根据元案的层级关系选择元案</h1>
        ancestor descendant
        parent > child
        prev t next
        prev ~ siblings
        </div>   -->

    <input type="button" value="选择body内所有div元素" id="btn1"/>
    <input type="button" value="在body选择div子元素" id="btn2"/>
    <input type="button" value="选择id为one的下一个div元素" id="btn3"/>
    <input type="button" value="选择id为two的元素后面的所有兄弟元素" id="btn4"/>

    <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="..." class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>
    <span class="one" id="span">^^span元素^^</span>
</body>
</html>

JQuery①_JQuery_11

3、过滤选择器

基本过滤器

:first

获取第一个元素

JQuery①_jquery_12

:last

获取最后个元素

JQuery①_dom对象_13

:not(selector)

去除所有与给定选择器匹配的元素

JQuery①_html_14

even

匹配所有素引值为偶数的元素,从o开始计数

JQuery①_jquery_15

:odd

匹配所有索引值为奇数的元素，从o开始计数

JQuery①_jquery_16

:eq(index

匹配一个给定素引值的元素

JQuery①_JQuery_17

gt(index)

匹配所有大于给定索引值的元素

JQuery①_jquery_18

:t(index)

匹配所有小于给定素引值的元素

JQuery①_html_19

:header

匹配如h1,h2,h3之类的标题元素

JQuery①_JQuery_20

:animated
匹配所有正在执行动画效果的元素

JQuery①_html_21

03基本的过滤选择器_.html

<!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>
    <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: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            function anmateit() {
                $("#mover").slideToggle("show",anmateit);
            }

            anmateit();

        });
        $(document).ready(function () {
            // $(function () { //的全写

            //1.选择第一个div元素
            $("#btn1").click(function () {
                //css() 方法可以设置或获取样式
                $("div:first").css("background-color","#bbffaa");

            });

            //2.选择最后一个div元素
            $("#btn2").click(function () {
                $("div:last").css("background-color","#bbffaa");
            });

            //3.选择class不为one的所有div元素
            $("#btn3").click(function () {
                $("div:not(.one)").css("background-color","#bbffaa");
            });

            //4.选择索引值为偶数的所有div元素
            $("#btn4").click(function () {
                $("div:even").css("background-color","#bbffaa");
            });

            //5.选择索引值为奇数的所有div元素
            $("#btn5").click(function () {
                $("div:odd").css("background-color","#bbffaa");
            });

            //6.选择索引值为大于3的所有div元素
            $("#btn6").click(function () {
                $("div:gt(3)").css("background-color","#bbffaa");
            });

            //7.选择索引值为等于3的所有div元素
            $("#btn7").click(function () {
                $("div:eq(3)").css("background-color","#bbffaa");
            });

            //8.选择索引值为小于3的所有div元素
            $("#btn8").click(function () {
                $("div:lt(3)").css("background-color","#bbffaa");
            });

            //9.选择所有标题元素
            $("#btn9").click(function () {
                $(":header").css("background-color","#bbffaa");
            });

            //10.选择当前正在执行动画的所有元素
            $("#btn10").click(function () {
                $(":animated").css("background-color","#bbffaa");
            });

            //11.选择没有执行动画的最后一个div
            $("#btn11").click(function () {
                $("div:not(:animated):last").css("background-color","#bbffaa");
            });

        });


    </script>
</head>

<body>
<!--  <div>
        :first
        :last
        :not(selector)
        :even
        :odd
        :eq(index)
        :gt(index)
        :lt(index)
        :header
        :animated
    </div>   -->

    <input type="button" value="选择第一个div元素" id="btn1"/>
    <input type="button" value="选择最后一个div元素" id="btn2"/>
    <input type="button" value="选择class不为one的所有div元素" id="btn3"/>
    <input type="button" value="选择索引值为偶数的所有div元素" id="btn4"/>
    <input type="button" value="选择索引值为奇数的所有div元素" id="btn5"/>
    <input type="button" value="选择索引值为大于3的所有div元素" id="btn6"/>
    <input type="button" value="选择索引值为等于3的所有div元素" id="btn7"/>
    <input type="button" value="选择索引值为小于3的所有div元素" id="btn8"/>
    <input type="button" value="选择所有标题元素" id="btn9"/>
    <input type="button" value="选择当前正在执行动画的所有元素" id="btn10"/>
    <input type="button" value="选择没有执行动画的最后一个元素" id="btn11"/>

    <br>
        <h3>过滤选择器.</h3>
    <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 class="hide">class为"hide"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>

    <div id="mover">
        正在执行动画的div元素
    </div>

</body>
</html>

内容过滤器:

:contains(text)

匹配包含给定文本的元素

JQuery①_jquery_22

:empty

匹配所有不包含子元素或者文本的空元素

JQuery①_dom对象_23

:parent

匹配含有子元素或者文本的元素

JQuery①_jquery_24

:has(selector)

匹配含有选择器所匹配的元素的元素

JQuery①_html_25

04内容过滤选择器_.html

<!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>
    <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: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            function anmateit() {
                $("#mover").slideToggle("show",anmateit);
            }

            anmateit();

        });
        $(document).ready(function () {

            //1.选择文本含有‘di’的div元素
            $("#btn1").click(function () {
                $("div:contains('di')").css("background-color","#bbffaa");
            });

            //2.选择不含有子元素（或文本元素）的div元素
            $("#btn2").click(function () {
                $("div:empty").css("background-color","#bbffaa");
            });

            //3.选择含有class为mini的div元素
            $("#btn3").click(function () {
                $("div:has(.mini)").css("background-color","#bbffaa");
            });

            //4.选择含有子元素（或文本元素）的div元素
            $("#btn4").click(function () {
                $("div:parent").css("background-color","#bbffaa");
            });


        });


    </script>
</head>

<body>
<!--  <div>
        :contains(text)
        :empty
        :has(selector)
        :parent
    </div>   -->

    <input type="button" value="选择文本含有‘di’的div元素" id="btn1"/>
    <input type="button" value="选择不含有子元素（或文本元素）的div元素" id="btn2"/>
    <input type="button" value="选择含有class为mini的div元素" id="btn3"/>
    <input type="button" value="选择含有子元素（或文本元素）的div元素" id="btn4"/>


    <br>
    <h3>过滤选择器.</h3>
    <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 class="hide">class为"hide"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>

    <div id="mover">
        正在执行动画的div元素
    </div>

</body>
</html>

属性过滤器:

[attribute]

匹配包含给定属性的元素。

JQuery①_JQuery_26

[attribute=value]

匹配给定的属性是某个特定值的元素

JQuery①_dom对象_27

[attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

JQuery①_jquery_28

[attribute^=value]

匹配给定的属性是以某些值开始的元素

JQuery①_dom对象_29

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

JQuery①_JQuery_30

[attribute*=value]

匹配给定的属性是以包含某些值的元素

JQuery①_JQuery_31

[attrSel1][attrSel2l][attrSelN]

复合属性选择器，需要同时满足多个条件时使用。

JQuery①_jquery_32

表单过滤器:

表单

:input

匹配所有input,textarea, select和button 元素

JQuery①_dom对象_33

:text

匹配所有文本输入框

JQuery①_jquery_34

password

匹配所有的密码输入框

JQuery①_dom对象_35

:radio

匹配所有的单选框

JQuery①_dom对象_36

:checkbox

匹配所有的复选框

JQuery①_html_37

:submit

匹配所有提交按钮

JQuery①_JQuery_38

reset

匹配所有重置按钮

JQuery①_dom对象_39

:button

匹配所有按钮

JQuery①_JQuery_40

:file

匹配所有文件域

JQuery①_jquery_41

:hidden

匹配所有不可见的元素或type为hidden的元素

JQuery①_html_42

表单对象的属性

enabled

匹配所有可用元素

JQuery①_JQuery_43

disabled

匹配所有不可用元素

JQuery①_html_44

checked

匹配所有选中的被选中的元素（复选框、单选框等、不包括select中的opinion）

JQuery①_dom对象_45

selected

匹配所有选中的opinion元素

JQuery①_html_46

08表单对象属性过滤选择器_.html

<!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>
    <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: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            //1.对表单内可用input赋值操作
            $("#btn1").click(function () {
                //var():可以操作表单项的属性值
                //它可以设置或获取
                $(":text:enabled").val("我是万能的程序员");
            });

            //2.对表单内不可用input赋值操作
            $("#btn2").click(function () {
                $(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
            });

            //3.获取多选框选中的个数使用size()方法获取选取到的元案集合的元素个数
            $("#btn3").click(function () {
                alert($(":checkbox:checked").length);

            });

            //4.获取多选框，每个选中的value值
            $("#btn4").click(function () {
                //获取全部选择的复选框标签对象
                var $checkboxes=$(":checkbox:checked");

                //老式遍历
                // for (var i=0;i<$checkboxes.length;i++){
                //     alert($checkboxes[i].value);
                // }

                //each()是JQuery对象提供遍历元素的方法
                //在遍历的function中，有一个this对象，这个this对象就是当前遍历到的dom对象
                $checkboxes.each(function () {
                    alert(this.value);
                });
            });

            //5.获取下拉框选中的内容
            $("#btn5").click(function () {
                //获取选中的option对象
                var $options = $("select option:selected");

                //遍历获取到的option对象的文本内容
                $options.each(function () {
                    alert(this.innerHTML);
                })
            });


        });


    </script>
</head>

<body>
<!--  <div>

        表单
        :input
        :radio
        :checkbox
        :password
        :text
        :submit
        :image
        :reset
        :button
        :file
        :hidden

        表单对象的属性
        enabled
        disabled
        checked
        selected

    </div>   -->

<input type="button" value="对表单内可用input赋值操作" id="btn1"/>
<input type="button" value="对表单内不可用input赋值操作" id="btn2"/>
<input type="button" value="获取多选框选中的个数使用size" id="btn3"/>
<input type="button" value="获取多选框，每个选中的value值" id="btn4"/>
<input type="button" value="获取下拉框选中的内容" id="btn5"/>

<br/>
<h3>表单对象属性过滤选择器</h3>
<form id="form1" action="#">
    可用元素:<input nane="add" value="可用文本框1"/><br>
    不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br>
    可用元素:<input name="che" value="可用文本框2"/><br>
    不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br>
    <br>
    多选框:<br>
    <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
    <input type="checkbox" name="newsletter" value="test2"/>test2
    <input type="checkbox" name="newsletter" value="test3"/>test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
    <input type="checkbox" name="newsletter" value="test5"/>test5
    <br><br>
    下拉列表1:<br>
    <select name="test" multiple="multiple" style="..." id="sele1">
        <option>浙江</option>
        <option selected="selected">辽宁</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <br><br>

    下拉列表2:<br>
    <select name="test2">
        <option>浙江</option>
        <option>辽宁</option>
        <option selected="selected">北京</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
</form>


</body>
</html>

6、jQuery元素筛选

eq()

获取给定索引的元素

功能跟:eq()一样

JQuery①_dom对象_47

first()

获取第一个元素

功能跟:first一样

JQuery①_JQuery_48

last()

获取最后一个元素

功能跟:last一样

JQuery①_jquery_49

flter(exp)

留下匹配的元素

JQuery①_dom对象_50

JQuery①_JQuery_51

is()

判断是否匹配给定的选择器，只要有一个匹配就返回,true

JQuery①_JQuery_52

has(exp)

返回包含有匹配选择器的元素的元素

功能跟:has一样

JQuery①_html_53

not(exp)

删除匹配选择器的元素

功能跟:not一样

JQuery①_jquery_54

children(exp)

返回匹配给定选择器的子元素

功能跟:parent>child一样

JQuery①_dom对象_55

JQuery①_dom对象_56

find(exp)

返回匹配给定选择器的后代元素

功能跟:ancestor descendant 一样

JQuery①_dom对象_57

next()

返回当前元素的下一个兄弟元素

功能跟prev+next一样

JQuery①_JQuery_58

nextAll()

返回当前元素后面所有的兄弟元素

功能跟prev~siblings一样

JQuery①_jquery_59

nextUntil()

返回当前元素到指定匹配的元素为止的后面元素 parent() 返回父元素

JQuery①_dom对象_60

parent（）

返回父元素

JQuery①_html_61

prev(exp)

返回当前元素的上一个兄弟元素

JQuery①_dom对象_62

prevAll()

返回当前元素前面所有的兄弟元素

JQuery①_jquery_63

prevUnit(exp)

返回当前元素到指定匹配的元素为止的前面元素

JQuery①_dom对象_64

siblings(exp)

返回所有兄弟元素

JQuery①_dom对象_65

add(expr|ele|html|obj|[,con])
把add匹配的选择器的元素添加到当前jquery对象中

JQuery①_jquery_66

09元素筛选方法_.html

<!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>
    <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: 55 px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            function anmateit() {
                $("#mover").slideToggle("show", anmateit);
            }

            anmateit();

        });

        $(document).ready(function () {

            //1.eq()选择索引值为等于3的div元素
            $("#btn1").click(function () {
                $("div").eq(3).css("background-color", "#bbffaa");
                ;
            });

            //2.first()选择第一个div元素
            $("#btn2").click(function () {
                $("div").first().css("background-color", "#bbffaa");
            });

            //3.last()选择最后一个div元素
            $("#btn3").click(function () {
                $("div").last().css("background-color", "#bbffaa");
            });

            //4.filter()在div选取索引值为偶数的
            //filter过滤传入的是选择器字符串
            $("#btn4").click(function () {
                $("div").filter(":even").css("background-color", "#bbffaa");
            });

            //5.is()判断#one是不是:empty或:parent
            //is用来检测jq对象是否符号指定选择器
            $("#btn5").click(function () {
                alert($("#one").is(":empty"));
            });


            //(6)has()选择di中包含.mini的
            $("#btn6").click(function () {
                //has(selector)选择器字串  是否包含selector
                $("div").has(".mini").css("background-color", "#bfa");

            });

            //(7)not()选择div中class不为one的
            $("#btn7").click(function () {
                //not(selector)选择不是selector的元素
                $("div").not('.one').css("background-color", "#bfa");

            });

            //(8)children()在body中选择所有class为one的div子元素
            $("#btn8").click(function () {
                //children()选出所有的子元素
                $("body").children("div.one").css("background-color", "#bfa");
            });

            //(9)find()在pdy中选择所有class为mini的div元素
            $("#btn9").click(function () {
                //find()选出所有的后代元素
                $("body").find("div.mini").css("background-color", "#bfa");
            });
            //(10)next() #one的下一个div
            $("#btn10").click(function () {
                //next()选择下一个兄弟元素
                $("#one").next("div").css("background-color", "#bfa");
            });
            //(11)nextAll() #one后面所有的span元素
            $("#btn11").click(function () {
                //nextAll()选出后面所有的元素
                $("#one").nextAll("span").css("background-color", "#bfa");
            });

            //(12)nextUntil() #one和span之间的元案
            $("#btn12").click(function () {
                $("#one").nextUntil("span").css("background-color", "#bfa")
            });

            //(13)parent().mini的父元素
            $("#btn13").click(function () {
                $(".mini").parent().css("background-color", "#bfa");
            });

            //(14)prev()#two的上一个div
            $("#btn14").click(function () {
            //prev()
                $("#two").prev("div").css("background-color", "#bfa")
            });

            //(15)prevAll() span前面所有的div
            $("#btn15").click(function () {
            //prevAll()选出前面所有的元素
                $("span").prevAll("div").css("background-color", "#bfa")
            });

            //(16)prevUntil() span向前直到one的元素
            $("#btn16").click(function () {
            //prevUntil(exp)  找到之前所有的兄弟元素直到找到exp停止
                $("span").prevUntil("#one").css("background-color", "#bfa");
            });
              //(17)siblings()#two的所有兄弟元素
            $("#btn17").click(function () {
            //siblings()找到所有的兄弟元素，包括前面的和后面的
                 $("#two").siblings().css("background-color","#bfa")
            });
            //(18)add()选择所有的span元素和id为wo的元素
            $("#btn18").click(function() {
                // $("span,#two,.mini,#one")
                $("span").add("#two").css("background-color", "#bfa");
            });


        });

    </script>
</head>

<body>
<!--  <div>

    筛选

    过滤
    eq(index|-index)
    first()
    last()
    hasClass(class)
    filter(expr|obj|ele|fn)
    is(expr|obj|ele |fn)
    map(callback)
    has(expr|ele)
    not(expr|ele|fn)
    slice(start,[end])

    查找
    children([expr])
    closest(expr, [con]|obj|ele)
    find(expr|obj|ele)
    next([expr])
    nextAll([expr])
    nextUntil[exp|ele][,fil])]
    offsetParent()
    parent([expr)
    parents([expr])
    parentsUntil([exp|ele]L,f])
    prev([expr])
    prevail([expr)
    prevUntil([exp|ele][,fil])
    siblings([expr]

    串联
    add(expr|ele|html|obj|[,con])

    </div>   -->

    <input type="button" value="eq()选择索引值为等于3的div元素" id="btn1"/>
    <input type="button" value="first()选择第一个div元素" id="btn2"/>
    <input type="button" value="last()选择最后一个div元素" id="btn3"/>
    <input type="button" value="filter()在div选取索引值为偶数的" id="btn4"/>
    <input type="button" value="is()判断#one是不是:empty或:parent" id="btn5"/>
    <input type="button" value="has()选择di中包含.mini的" id="btn6"/>
    <input type="button" value="not()选择div中class不为one的" id="btn7"/>
    <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8"/>
    <input type="button" value="find()在pdy中选择所有class为mini的div元素" id="btn9"/>
    <input type="button" value="next() #one的下一个div" id="btn10"/>
    <input type="button" value="nextAll() #one后面所有的span元素" id="btn11"/>
    <input type="button" value="nextUntil() #one和span之间的元案" id="btn12"/>
    <input type="button" value="parent().mini的父元素" id="btn13"/>
    <input type="button" value="prev()#two的上一个div" id="btn14"/>
    <input type="button" value="prevAll() span前面所有的div" id="btn15"/>
    <input type="button" value="prevUntil() span向前直到one的元素" id="btn16"/>
    <input type="button" value="siblings()#two的所有兄弟元素" id="btn17"/>
    <input type="button" value="add()选择所有的span元素和id为wo的元素" id="btn18"/>

    <br>
    <h3>基本选择器.</h3>
    <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>
    <span>^^span元素111^^</span>

    <div class="hide">class为"hide"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>

    <span>^^span元素222^^</span>

    <div id="mover">
        正在执行动画的div元素
    </div>

</body>
</html>

------------------------------正文分割线----------------------------------
如何隐晦的救出所有人4

上期答案：
假设监狱内有三名囚犯：1号、2号和3号，他们各自都看到两个是绿色眼睛的人，但不确定另外两个人是不是也看到一个或两个绿色眼睛的人，他们第一天和之前一样等待。但到了第二天，他们还是不确定。1号想，如果我没有绿色眼睛，2号和3号只是看对方，那么他们在第二天晚上就会离开，他意识到2号和3号应该也在思考同样的问题，然后第三天晚上，他们三个人都便离开了。

用这种归纳性推理的方法，我们能看到这种模式会一直循环重复。不论犯人的数量有多少都可以进行推理。这个监狱的规则就在于大家都能获取到的新知识都在每个人的行动中。现在所有的囚犯都知道，每个犯人除了知道他们中至少有一人是绿色眼睛，也知道其他人都在观察并记录所有绿色眼睛的人。而且每个人都是数学家，都能得到同样的想法，虽然每个囚犯不知道自己是不是绿色的眼睛，但经过和囚犯同等数量的天数之后，他们就能确定自己是否是绿色的眼睛。

但如果你告诉他们至少有99个人拥有绿色眼睛，那么这100名数学家，第几天会全部离开呢？