day17--JQuery实例

Posted 2020-10-10 （野生程序员）

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了day17--JQuery实例相关的知识，希望对你有一定的参考价值。

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="2">
        <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>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</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="2">
        <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>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</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="2">
        <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>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</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；如果为假，则为真；

以上是关于day17--JQuery实例的主要内容，如果未能解决你的问题，请参考以下文章

人生苦短，我用python-- Day17 jQuery讲解

day17--JQuery

day17 Jquery

Python之路Day17-jQuery

python_way day17 jQuery表单验证，插件，文本框架