day17--JQuery實例

時間 2019-12-10

原文原文鏈接

一、表格選擇框--全選，反選，取消html

<!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

　下面經過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)表明設置值。ide

三元運算，即判斷，var v = 條件(true)?false:true 若是條件爲真(true)，則v=false；不然條件爲假(false)，則v=truethis

<!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；若是爲假，則爲真；spa

　實例2、下拉內容點擊展開，關閉的操做，以下：code

<!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()是查找子標籤知足條件的標籤，htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。