jquery-实用例子

 

 

一：jquery实现全选取消反选

　　3元运算：条件？真值：假值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="selectAll()">
     <input type="button" value="取消" onclick="cancelAll()">
     <input type="button" value="dom反选" onclick="reverserAll()">
    <input type="button" value="jQuery反选" onclick="reverserAll2()">
      <input type="button" value="jQuery三元运算实现反选" onclick="reverserAll3()">
    <table id="tb" border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>1191</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.2</td>
            <td>1192</td>
        </tr>
                <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.3</td>
            <td>1193</td>
        </tr>
    </table>
    <script src="jquery-1.12.3.js"></script>
    <script>
        function selectAll(){
            $("#tb :checkbox").prop("checked",true);//jquery默认自带循环
        }

        function cancelAll(){
            $("#tb :checkbox").prop("checked",false);
        }
        //反选两种方法dom实现和jquery实现
        //dom实现
        function reverserAll(){
            $("#tb :checkbox").each(function(){//each遍历
                    if (this.checked) //this这里是dom对象
                    {
                        this.checked=false;
                    }else {
                        this.checked=true;
                    }

                }
            )
        }
        function reverserAll2(){
            $("#tb :checkbox").each(function() {//each遍历
                if($(this).prop("checked"))//$(this)转jquery对象
                {
                    $(this).prop("checked",false);
                }else
                {
                   $(this).prop("checked",true);
                }
            }
            )
        }
        //3元运算实现反选
        // 条件？真值：假值

        function reverserAll3(){
            $("#tb :checkbox").each(
                    function(){
                        var v=$(this).prop("checked")?false:true;
                        $(this).prop("checked",v);
                    }
            )
        }
    </script>
</body>
</html>
View Code

二：jquery实现菜单栏功能

　　1)找到header标签所在位置
　　1)在找到header标签加入onclick事件
　　2)找到下一个标签所在位置content
　　3)去除当前content的hide类，显示本标栏
　　4)找到当前header的父标签item
　　5)找到item所有兄弟标签
　　6)找到item兄弟标签下面的content
　　7)在找到content加入hide类，隐藏标题栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height: 400px;
            width: 200px;
            border: 1px solid #dddddd;
        }
        .header{
            background-color: black;
            color: white;
        }
        .content{
            height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
    <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.3.js"></script>
    <script>
        /*
        1)找到header标签所在位置
        1)在找到header标签加入onclick事件
        2)找到下一个标签所在位置content
        3)去除当前content的hide类，显示本标栏
        4)找到当前header的父标签item
        5)找到item所有兄弟标签
        6)找到item兄弟标签下面的content
        7)在找到content加入hide类，隐藏标题栏
        */

        $(".header").click(
                function() {
                    $(this).next().removeClass("hide")
                    //找到header父级标签的所有兄弟标签的孩子content,并加入hide类
                    $(this).parent().siblings().find(".content").addClass("hide")
                }
        )
    </script>
</body>
</html>
View Code

三：jquery模态编辑1

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .model{
            position: fixed;
            top:50%;
            left: 50%;
            margin-left: -250px;
            maigin-top: -200px;
            background-color: white;
            z-index: 10;
            height: 200px;
            width: 400px;


        }
    </style>
</head>
<body>

    <a onclick="addElement();" style="color: red">增加</a>
    <input type="button" value="+" onclick="addElement();">
    <table border="1px">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
                <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
                <tr>
            <td target="hostname">1.1.1.3</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
                <tr>
            <td target="hostname">1.1.1.4</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="shadow hide"></div>
    <div class="model hide">
        <input type="text" name="host">
        <input type="text" name="port">
        <input type="button" value="取消" onclick="cancelElement();">
    </div>

    <script src="jquery-1.12.3.js"></script>
    <script>
        function addElement(){
            console.log(1)
            $(".model,.shadow").removeClass('hide');
        }

        function cancelElement(){
            $(".model,.shadow").addClass("hide");
            $('.model input[name="host"]').val("");
            $('.model input[name="port"]').val("");
        }

        $(".edit").click(
                function(){
                    addElement()
                    var tds=$(this).parent().prevAll();
                    var host=$(tds[1]).text();
                    var port=$(tds[0]).text();
                    console.log(host,port);
                    $('.model input[name="host"]').val(host);
                    $('.model input[name="port"]').val(port);

                }
        )
    </script>
</body>
</html>
View Code

四：jquery模态编辑-改进版

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .model{
            position: fixed;
            top:50%;
            left: 50%;
            margin-left: -250px;
            maigin-top: -200px;
            background-color: white;
            z-index: 10;
            height: 200px;
            width: 400px;


        }
    </style>
</head>
<body>

    <a onclick="addElement();" style="color: red">增加</a>
    <input type="button" value="+" onclick="addElement();">
    <table border="1px">
        <tr>
            <td target="host">1.1.1.1</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
                <tr>
            <td target="host">1.1.1.2</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
                <tr>
            <td target="host">1.1.1.3</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
                <tr>
            <td target="host">1.1.1.4</td>
            <td target="port">1182</td>
            <td>
                <a class="edit">编辑</a>|
                <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="shadow hide"></div>
    <div class="model hide">
        <input type="text" name="host">
        <input type="text" name="port">
        <input type="button" value="取消" onclick="cancelElement();">
    </div>

    <script src="jquery-1.12.3.js"></script>
    <script>
        function addElement(){
            console.log(1)
            $(".model,.shadow").removeClass('hide');
        }

        function cancelElement(){
            $(".model,.shadow").addClass("hide");
            $('.model input[name="host"]').val("");
            $('.model input[name="port"]').val("");
        }

//        $(".edit").click(
//                function(){
//                    addElement()
//                    var tds=$(this).parent().prevAll();
//                    var host=$(tds[1]).text();
//                    var port=$(tds[0]).text();
//
//                    console.log(host,port);
//                    $('.model input[name="host"]').val(host);
//                    $('.model input[name="port"]').val(port);
//
//                }
//        )
        /*上面直接使用tds[0]等存在这个问题，就是如果在增加一列，所有tds及下面的赋值都要修改
        处理方法：给每个td绑定个属性，并且这个属性值和model中name属性的值相对应，通过each循环获取并把属性值相等的设置
        */
        $(".edit").click(
                function(){
                    addElement();
                    var tds=$(this).parent().prevAll();
                    tds.each(
                            function(){
                                var v1=$(this).attr("target");
                                var value=$(this).text();
                                var a1=".model input[name=";
                                var a2="]";
                                //字符串拼接
                                var tmp=a1+v1+a2;
                                $(tmp).val(value)
                            }
                    )
                }
        )
    </script>
</body>
</html>
View Code

五：jquery实现tab页

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width:400px;
            height: 38px;
            margin: 0 auto;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            padding: 0 10px;
            border-right: 1px solid red;
            cursor: pointer;
        }
        .active{
            background-color: rebeccapurple;
        }

        .content{
            min-height: 100px;
            width: 400px;
            border:1px solid #2459a2;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-item active" target="1">菜单1</div>
        <div class="menu-item " target="2">菜单2</div>
        <div class="menu-item "target="3">菜单3</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="content-pg" target="1">内容1</div>
        <div class="content-pg hide" target="2">内容2</div>
        <div class="content-pg hide" target="3">内容3</div>
    </div>
    <script src="jquery-1.12.3.js"></script>
    <script>
        $(".menu-item").click(
                function(){
                    //菜单切换
                    $(this).addClass("active").siblings().removeClass("active");
                    var target=$(this).attr("target");
                    console.log($(".content-pg [target='"+target+"']"));
                   $('.content').children("[target='"+ target+"']").removeClass('hide').siblings().addClass('hide');
                }
        )
    </script>
</body>
</html>
View Code

 

posted on 2017-10-05 14:31  shisanjun  阅读(169)  评论(0)  编辑  收藏  举报

导航