jQuery 簡單案例

時間 2019-11-17

標籤 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="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">

            <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() {
            $('#tb :checkbox').prop('checked',true);   #prop是jquery的屬性，checked設置爲true，只有checked表示獲取選中的
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this,代指當前循環的每個元素
                // Dom
                /*
                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 = 條件? 真值：假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

全選、反選、取消

全選、反選、取消

案例二：菜單欄點擊展開收起實例

　　本實例實現菜單欄點擊一個菜單另外一個菜單收起來，相似下圖：html

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .header {
                background-color: #67b168;
                color: wheat;
            }
            .content {
                min-height: 30px;
            }
            .hide {
                display: none;
            }
        </style>
</head>
<body>
    <div style="height: 400px;width: 200px;border: 1px solid #d58512">
            <div class="tiem">
                <div class="header">標題一</div>
                <div  class="content hide">內容一</div>

            </div>
            <div class="tiem">
                <div class="header">標題二</div>
                <div class="content hide">內容二</div>
            </div>
            <div class="tiem">
                <div class="header">標題三</div>
                <div class="content hide">內容三</div>
            </div>
    </div>

<script src='js/jquery-1.11.0.min.js'></script>
<script>
//        找到全部class爲header的標籤，而後.click()綁定事件
        $('.header').click(function(){
//                #jQuery默認循環全部選中的標籤
//             $(this)  當前點擊的標籤
//             $(this).next  當前點擊的標籤的下一個標籤
//                找到當前點擊的標籤的下一個標籤，移除hide樣式,點擊後hide去掉，即展開
            $(this).next().removeClass('hide');
//                找到當前標籤的父標籤的兄弟標籤，而後找樣式爲.content的標籤
            $(this).parent().siblings().find('.content').addClass('hide');
//            能夠一行完成
//            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
                })

</script>
</body>

</html>

菜單欄點擊展開其他收起

案例三：模態編程框案例

本案例實現魔態編程框案例，點擊添加會出現一個對話框，用於添加一行，編輯能夠編輯當前行,刪除能夠刪除當前行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: #000000;
            z-index: 9;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="2" id="tb">
        <tr>
            <!--target 自定義屬性-->
            <td target="hostname">1.1.1.1</td>
            <td target="port">80</td>
            <td>
                <a class="edit">編輯</a>
                <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">2.2.2.2</td>
            <td target="port">80</td>
            <td>
                <a class="edit">編輯</a>
                <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">3.3.3.3</td>
            <td target="port">8000</td>
            <td>
                <a class="edit">編輯</a>
                <a class="del">刪除</a>
            </td>
        </tr>
    </table>
    <!--modal 提早寫好編程框-->
    <div class="modal hide">
        <div>
            <input name="hostname" type="text">
            <input name="port" type="text">

        </div>
        <div>
            <input type="button" value="取消" onclick="canceModal();">
            <input type="button" value="肯定" onclick="confirmModal();">
        </div>
    </div>
    <!--shadow 遮罩層-->
    <div class="shadow hide"></div>

<script src='js/jquery-1.11.0.min.js'></script>
<script>
    function addElement(){
        $(".modal,.shadow").removeClass('hide');
    }
    function canceModal(){
        $(".modal,.shadow").addClass('hide');
//        清空框中的髒數據,
        $('.modal input[type="text"]').val("");
    }
//    $('.edit').click(function(){
//        $(".modal,.shadow").removeClass('hide');
////        this 當前點擊的標籤，parent父標籤，prevAll父標籤上面的全部同級標籤
//        var tds = $(this).parent().prevAll();
////        循環獲取tds中的內容(td中的內容)，賦值給編程框中的value
//        tds.each(function(){
////            this 當前每一個td
////            獲取自定義屬性的值,hostname/port
//            var n = $(this).attr('target');
////            獲取當前td內容:1.1.1.1/80
//            var v = $(this).text();
////            將獲取的內容放入相應的編程框中
////          $('.modal input[name="[hostname"]').val(1.1.1.1)
////            由於hostaname/port爲變量，而name=裏面須要是「」格式，因此用到字符串拼接
////            var a1 = '.modal input[name="';
////            var a2 = '"]';
////            var temp = a1 + n + a2
//            $('.modal input[name="' + n + '"]').val(v)
//        });
//
//    });
//    在添加更多一行的時候所產生的 input 和 button 都是動態生成的，因此不能使用 click，要使用 on
    $(document).on('click','.edit',function(){
        $(".modal,.shadow").removeClass('hide');
//        this 當前點擊的標籤，parent父標籤，prevAll父標籤上面的全部同級標籤
        var tds = $(this).parent().prevAll();
//        循環獲取tds中的內容(td中的內容)，賦值給編程框中的value
        tds.each(function(){
//            this 當前每一個td
//            獲取自定義屬性的值,hostname/port
            var n = $(this).attr('target');
//            獲取當前td內容:1.1.1.1/80
            var v = $(this).text();
//            將獲取的內容放入相應的編程框中
//          $('.modal input[name="[hostname"]').val(1.1.1.1)
//            由於hostaname/port爲變量，而name=裏面須要是「」格式，因此用到字符串拼接
//            var a1 = '.modal input[name="';
//            var a2 = '"]';
//            var temp = a1 + n + a2
            $('.modal input[name="' + n + '"]').val(v)
        });

    });

    function confirmModal(){

//        建立一個tr
        var tr = document.createElement('tr');
        $('.modal input[type="text"]').each(function(){
//            循環使用dom建立一個td，也就是有幾個input就須要加幾個td
            var td = document.createElement('td');
//            獲取輸入框中輸入的數據
            var v = $(this).val();
//            獲取數據庫的屬性
            var tage = $(this).attr('name');
//            將屬性加入到td中
            $(td).attr('target',tage);
//            將輸入的內容加入td中
            $(td).append(v);
//            將td加入tr中
            $(tr).append(td);

        });
//        最後將編輯和刪除加入
        var temp = "<a class='edit'>編輯</a> <a class='del'>刪除</a>";
//        將一行加入到table裏面
        var td2 = document.createElement('td');
        $(td2).append(temp);
        $(tr).append(td2);
        $('#tb').append(tr);
//        添加完成後去掉編程框和遮罩層
        $('.modal,.shadow').addClass('hide');
//        清空框中的髒數據,不然下次在點擊添加時，還會有上一次填寫的數據
        $('.modal input[type="text"]').val("");
    }
    //    刪除tr行
//    在添加更多一行的時候所產生的 input 和 button 都是動態生成的，因此不能使用 click，要使用 on
    $(document).on('click','.del',function(){
        console.log(this,"1");
        $(this).parent().parent().remove();
    });
</script>
</body>

</html>

編程框添加刪除案例

案例四：橫向菜單切換

本案例實現橫向菜單菜單切換，即點擊菜單一現實內容一，點擊菜單二，顯示菜單二。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜單一</div>
            <div  class="menu-item" a="2">菜單二</div>
            <div  class="menu-item" a="3">菜單三</div>
        </div>
        <div class="content">
            <div b="1">內容一</div>
            <div class="hide"  b="2">內容二</div>
            <div class="hide" b="3">內容三</div>

        </div>

    </div>
 <script src='js/jquery-1.11.0.min.js'></script>

    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            var target = $(this).attr('a');
            $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>

橫向菜單切換

持續更新中。。。。。。。。。。。

相關標籤/搜索