jQuery 練習：取出陣列字典的值, 靜態對話方塊, clone方法應用

klvchen發表於2019-02-21
jQuery陣列

jQuery 中文API文件 http://jquery.cuishifeng.cn/

jQuery 取出陣列字典的值

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
    li = [1, 2, 3, 4, 5]
    $.each(li, function(i, x){
        console.log(i, x)                        // i 為索引，x為 value
    })

    dic={name:"yuan", sex:"male"}
    $.each(dic, function(i, x){
        console.log(i,x)                         // i 為 key，x為value
    })
</script>
</body>

jQuery 實現全選，取消，反選功能

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <button onclick="selectall();">全選</button>
    <button onclick="cancel();">取消</button>
    <button onclick="reverse();">反選</button>

    <table border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>444</td>
        </tr>
    </table>
<script>
    function selectall(){
        $("table :checkbox").each(function(){
            $(this).prop("checked", true)
        })
    }

    function cancel(){
        $("table :checkbox").each(function(){
            $(this).prop("checked", false)
        })
    }

    function reverse(){
        $("table :checkbox").each(function(){
            if($(this).prop("checked")){
                $(this).prop("checked", false);
            }else {
                $(this).prop("checked", true);
            }
        })
    }
</script>
</body>

jQuery 實現靜態對話方塊

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>

<script>
    function action1(self){
        $(self).parent().siblings().removeClass("hide");
    }

    function action2(self){
        $(self).parent().parent().children(".shade, .models").addClass("hide");
    }
</script>
</body>

jQuery clone方法應用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<div id="outer">
    <div class="item">
        <input type="button" value="+" onclick="fun1(this)">
        <input type="text">
    </div>
</div>

<script>
    function fun1(self){
        var Clone=$(self).parent().clone();
        Clone.children(":button").val("-").attr("onclick", "func2(this)");
        $("#outer").append(Clone);
    }

    function func2(self){
        $(self).parent().remove()
    }
</script>
</body>

相關文章