day17--JQuery实例

时间：2022-06-15 08:48:41

    1、表格选择框--全选，反选，取消

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll();"/>

    <input type="button" value="反选" onclick="reverseAll();"/>

    <input type="button" value="取消" onclick="cancleAll();"/>

    <table border="">

        <thead>

            <tr><th>选项</th><th>IP</th><th>端口</th></tr>

        </thead>

        <tbody id="i1">

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

        </tbody>

    </table>

    <script src="jquery-1.12.4.js"></script>

    <script>

        function checkAll(){

            $("#i1 :checkbox").prop('checked', true);

        }

        function cancleAll(){

            $('#i1 :checkbox').prop('checked',false);

        }

        function reverseAll(){

            $('#i1 :checkbox').each(function(){

                //this，代指当前循环的每一个元素

                //k是循环的下标

                //console.log($(this));

                if(this.checked){this.checked=false} else{

                    this.checked=true

                };

            })

        }

    </script>

</body>

</html>

上面HTML代码中，this代指每次的循环，this.checked判断标签是否被选中，选中则为true；未选中则为false。$().prop()设置隐藏，显示，选中或未选中。prop("checked",true)   prop("checked",false)   prop("disable",none)设置隐藏。

　下面通过JQuery来实现，如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll();"/>

    <input type="button" value="反选" onclick="reverseAll();"/>

    <input type="button" value="取消" onclick="cancleAll();"/>

    <table border="">

        <thead>

            <tr><th>选项</th><th>IP</th><th>端口</th></tr>

        </thead>

        <tbody id="i1">

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

        </tbody>

    </table>

    <script src="jquery-1.12.4.js"></script>

    <script>

        function checkAll(){

            $("#i1 :checkbox").prop('checked', true);

        }

        function cancleAll(){

            $('#i1 :checkbox').prop('checked',false);

        }

        function reverseAll(){

            $('#i1 :checkbox').each(function(){

                //this，代指当前循环的每一个元素

                //k是循环的下标

                //console.log($(this));

                //if(this.checked){this.checked=false} else{

                    //this.checked=true

                //};

                if($(this).prop('checked')){

                    $(this).prop('checked',false);

                } else{

                    $(this).prop('checked',true);

                };

            })

        }

    </script>

</body>

</html>

　$().prop("checked")，一个参数代表获取值，判断是选定，checked的话，返回true；否则返回false；$().prop("checked",true)代表设置值。

三元运算，即判断，var v = 条件(true)?false:true   如果条件为真(true)，则v=false；否则条件为假(false)，则v=true

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll();"/>

    <input type="button" value="反选" onclick="reverseAll();"/>

    <input type="button" value="取消" onclick="cancleAll();"/>

    <table border="">

        <thead>

            <tr><th>选项</th><th>IP</th><th>端口</th></tr>

        </thead>

        <tbody id="i1">

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>

        </tbody>

    </table>

    <script src="jquery-1.12.4.js"></script>

    <script>

        function checkAll(){

            $("#i1 :checkbox").prop('checked', true);

        }

        function cancleAll(){

            $('#i1 :checkbox').prop('checked',false);

        }

        function reverseAll(){

            $('#i1 :checkbox').each(function(){

                //this，代指当前循环的每一个元素

                //k是循环的下标

                //console.log($(this));

                //if(this.checked){this.checked=false} else{

                    //this.checked=true

                //};

//                if($(this).prop('checked')){

//                    $(this).prop('checked',false);

//                } else{

//                    $(this).prop('checked',true);

//                };

                //三元运算

                //var v = 条件为真，真值，假值,如果为真，则设置为false；如果为假，则设置为真

                var v = $(this).prop('checked')?false:true;

                $(this).prop('checked',v);

            })

        }

    </script>

</body>

</html>

上面三元运算中，$().条件?false:true；false一定要写在前面，如果为真，则为false；如果为假，则为真；

　实例二、下拉内容点击展开，关闭的操作，如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .header{

            background-color:black;

            color:wheat;

        }

        .content{

            min-height:50px;

        }

        .hide{

            display:none;

        }

    </style>

</head>

<body>

    <div style="height:400px;width:200px;border:1px solid #dddddd">

        <div class="item">

            <div class="header">标题1</div>

            <div class="content">内容1</div>

        </div>

        <div class="item">

            <div class="header">标题2</div>

            <div class="content hide">内容2</div>

        </div>

        <div class="item">

            <div class="header">标题3</div>

            <div class="content hide">内容3</div>

        </div>

    </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        //click是给选定的标签绑定一个点击事件，所有选中的标签

        $(".header").click(function(){

            //获取当前点击的标签$(this)

            //点击的去掉hide,没有点击的加上hide,隐藏标签

            //获取某个标签的下一个标签

            //获取某个标签的父标签

            //获取所有的兄弟标签

            //this是DOM对象

            //$().addClass('hide')  添加class属性，如果存在，则不会添加.内部自动加循环，每个自动循环添加

            //$().removeClass("hide")  删除标签中的class属性值

            //筛选器$().next()当前标签的下一个标签

            //$(this).next().removeClass('hide');

            $//(this).parent().siblings().find('.content').addClass('hide');

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
　　　　　　　//$(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');等价与上面
//JQuery支持链式编程 //find()是查找标签下面的标签，等价与($("p span")==>$('p').find('span')等价与空格  }) </script> </body> </html>

$().find()是查找子标签满足条件的标签，

相关文章