zoukankan      html  css  js  c++  java

  • jQuery的收尾

    一  后台管理布局增删改

    二  常用事件

    三  jQuery扩展

    一  后台管理布局增删改（多种方法）

    <!DOCTYPE html>
<!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">
    <script src="jquery-3.2.1.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./Dashboard_files/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->


    <style>
        .head {
            height: 30px;
            padding: 0 -15px;
        }

        .hide {
            display: none;
        }

        .student {
            margin-bottom: 15px;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Dashboard</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Settings</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Profile</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">

            <div class="menu">
                <div class="head bg-primary">菜单一</div>
                <ul class="nav nav-sidebar">
                    <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Overview <span
                            class="sr-only">(current)</span></a>
                    </li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Reports</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Analytics</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#bootstrap模板做的.html">Export</a></li>
                </ul>
            </div>

            <div class="menu">
                <div class="head bg-primary ">菜单二</div>
                <ul class="nav nav-sidebar hide">
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">Nav item</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">Nav item again</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">One more nav</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">Another nav item</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">More navigation</a></li>
                </ul>
            </div>

            <div class="menu">
                <div class="head bg-primary">菜单三</div>
                <ul class="nav nav-sidebar hide">
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">Nav item again</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">One more nav</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/bootstrap模板做的.html">Another nav item</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">Dashboard</h1>
            <div class="row">
                <div class="col-md-9 ">
                    <button type="button" class="btn btn-primary  student" data-toggle="modal" data-target="#myModal">
                        添加学生信息
                    </button>
                    <table class="table table-striped table-bordered text-center">
                        <thead>
                        <tr>
                            <th class="text-center">姓名</th>
                            <th class="text-center">年龄</th>
                            <th class="text-center">性别</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>

                        <tbody class="tbody">
                        <tr>
                            <td class="col-md-3">egon</td>
                            <td class="col-md-3">33</td>
                            <td class="col-md-3">男</td>
                            <td>
                                <button class="btn btn-success edit">编辑</button>
                                <button class="btn btn-danger del">删除</button>
                            </td>
                        </tr>

                        <tr>
                            <td>alex</td>
                            <td>33</td>
                            <td>男</td>
                            <td class="copy">
                                <button class="btn btn-success edit">编辑</button>
                                <button class="btn btn-danger del">删除</button>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>

            </div>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="username">姓名</label>
                                    <input type="text" class="form-control item" id="username"
                                           placeholder="username">
                                </div>

                                <div class="form-group">
                                    <label for="age">年龄</label>
                                    <input type="text" class="form-control item" id="age" placeholder="age">
                                </div>
                                <div class="form-group">
                                    <label for="gender">性别</label>
                                    <input type="text" class="form-control item" id="gender"
                                           placeholder="gender">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary addKeepBtn">提交</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="Dashboard_files/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
<script src="Dashboard_files/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="Dashboard_files/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>

<script>

    $(".head").on("click", function () {
        $(this).siblings().toggleClass("hide");
        $(this).parent().siblings().children('ul').addClass("hide");
    })
    //添加学生信息
//    $(".addKeepBtn").on("click", function () {
//        var aRay = [];
//        $(".form-group input").each(function () {
//                aRay.push($(this).val());//放在数组里面
//            }
//        )
//s='<tr><td>'+aRay[0]+'</td><td>'+aRay[1]+'</td><td>'+aRay[2]+'</td><td class="copy"><button class="btn btn-success edit">编辑</button> <button class="btn btn-danger del">删除</button></td></tr>'
//        ss = '<tr>
' +
//            '                            <td class="col-md-3 text-center">' + aRay[0] + '</td>
' +
//            '                            <td class="col-md-3 text-center">' + aRay[1] + '</td>
' +
//            '                            <td class="col-md-3 text-center">' + aRay[2] + '</td>
' +
//            '                            <td>
' +
//            '                                <button class="btn btn-success edit">编辑</button>
' +
//            '                                <button class="btn btn-danger del">删除</button>
' +
//            '                            </td>
' +
//            '                        </tr>'
//        $(".tbody").append(ss)//JQ可以把字符串直接添加到下面
//        $("#myModal").modal("hide")
//    })
//    //添加的信息居中
//    $(".tbody").on('click', '.student', function () {
//        $("table").addClass('text-center')
//    })
//    //删除学生信息
//    //方法一js方法去除子元素
//        $(".tbody").bind('click', function (e) {
//             if(e.target.className=="btn btn-danger del"){
//                e.target.parentElement.parentElement.remove()
//             }
//    //方法二
//    $(".tbody").on('click', ".del", function () {
//
//        $(this).parent().parent().remove()
//    })
//    // 编辑信息自己写的编辑信息
//    $(".tbody").on('click', '.edit', function () {
//            if ($(this).attr('class') == 'btn btn-success edit') {
//                console.log($(this))
//                var ele_tr = $(this).parent().parent();
//                var ele_children = ele_tr.children()
//                var arr = []
//                var arr1 = []
//                ele_children.each(function () {
//                    arr.push($(this).text());
//                    arr1.push($(this))
//                })
//                for (var i = 0; i < arr.length - 1; i++) {
//                    arr1[i].html('<input type="text" value=' + arr[i] + '>')
//                }
//                $(this).addClass('save ')
//                $(this).text('保存')
//            }
//            else if ($(this).attr('class') == 'btn btn-success edit save') {
//                var ele_tr = $(this).parent().parent();
//                var ele_children = ele_tr.children()
//                var arr = []
//                var arr1 = []
//                ele_children.each(function () {
//                    arr.push($(this))
//                })
//                console.log(arr)
//                for (var i = 0; i < arr.length - 1; i++) {
//                    console.log(arr[i].children(0).val())
//                    arr1.push(arr[i].children(0).val())
//                }
//                for (var j = 0; j < arr1.length; j++) {
//                    arr[j].text(arr1[j])
//                }
//                $(this).removeClass('save ')
//                $(this).text('编辑')
//            }
//        }
//    )


    //编辑信息借鉴别人写的
//    $(".tbody").on('click', '.edit',function () {
//        var ele_tr = $(this).parent().prevAll();
//        ele_tr.each(function () {
//            $(this).html('<input type="text" value=' + $(this).text() + '>')
//
//        })
//        $(this).text("保存")
//        $(this).removeClass('edit')
//        $(this).addClass('ww')
//    })
//        $(".tbody").on('click', '.ww',function () {
//        var ele_tr = $(this).parent().prevAll();
////        console.log(ele_tr)
//        ele_tr.each(function () {
////            console.log($(this).children().first())
//             console.log($(this).children().first().val())
//
//
//            $(this).text($(this).children().first().val())
//
//        })
//        $(this).text("编辑")
//        $(this).removeClass('ww')
//            $(this).addClass('edit')
//            $(this).addClass('edit')
//
//    })
            //完整版JQ写的增删改
    //删除信息
      $(".tbody").on('click', ".del", function () {

        $(this).parent().parent().remove()
    })
//编辑和添加信息
        $(".tbody").on("click","td>.edit ",function () {
            $("#myModal").modal("show");
            var tds=$(this).parent().parent().children();
            $("#username").val(tds.eq(0).text());
            $("#age").val(tds.eq(1).text());
            $("#gender").val(tds.eq(2).text());
            $("#myModal").data("tds",tds);
        })
    $(".modal-footer>.btn-primary").click(function () {
        $("#myModal").modal("hide")
        var username=$("#username").val()
        var age=$("#age").val()
        var gender=$("#gender").val()
        var tds= $("#myModal").data("tds");
        //添加信息
        if(tds==undefined){
            var ele_tr=document.createElement("tr")
            $(ele_tr).append("<td> "+ username+"</td>")
            $(ele_tr).append("<td> "+ age+"</td>")
            $(ele_tr).append("<td> "+ gender+"</td>")
            $(ele_tr).append($(".tbody tr:first").find("td").last().clone(true))
            $(".tbody").append(ele_tr)
        }
        //编辑信息
        else{
        tds.eq(0).text(username)
        tds.eq(1).text(age)
        tds.eq(2).text(gender)
        //清空这个自定义的属性
        $("#myModal").removeData("tds");}

    })
     $(".row .btn-primary").click(function () {
           $("#myModal :input").val( "");
     })


</script>

</body>
</html>
    作业

    二 常用事件

    补充：

       文档树加载完之后绑定事件（绝大部分情况下）
       $(document).ready(function(){
          // 绑定事件的代码
          ....
       })
       
       简写：
       $(function($){
          // 绑定事件的代码
          ....
       });

     三  jQuery扩展

     

    插件例子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签上绑定事件</title>
</head>
<body>

<button>点我</button>
</body>

<script>
    function func1() {
        alert(111);
    }
    var b = document.getElementsByTagName("button")[0];
//    b.onclick = func1;

    b.onclick = function () {
        func1();
    }
</script>
</html>
    html代码
    /**
 * Created by Administrator on 2017/10/17.
 */

(function (jq) {
    jq.extend({
        "myValidate": function (form) {
            var formObj = jq(form);

            formObj.find(":submit").on("click", function () {
                // 先清空状态
                formObj.find(".form-group").removeClass("has-error");
                formObj.find("span").text("");

                // each循环
                formObj.find("input").each(function () {
                    // 做判断
                    if (jq(this).val().length === 0) {
                        // 给他的爸爸加has-error
                        jq(this).parent().parent().addClass("has-error");
                        // 给span写内容
                        // 找到我这是什么input  --> 找到对应的label的文本内容
                        var name = jq(this).parent().prev().text();
                        jq(this).next().text(name + "不能为空");
                        return false;
                    }
                });
                return false;
            });
        }
    })

})(jQuery);
    jQuery扩展
    /**
 * Created by Administrator on 2017/10/17.
 */

(function (jq) {
    jq.fn.extend({
        "myValidate": function (arg) {
            // this --> .前面的那个jQuery对象
            var formObj = this;
            formObj.find(":submit").on("click", function () {
                // this --> 提交的submit按钮
                // 先清空状态
                formObj.find(".form-group").removeClass("has-error");
                formObj.find("span").text("");
                // each循环
                var flag = true;
                formObj.find("input[required='true']").each(function () {
                    // this --> input框
                    // 做判断
                    if (jq(this).val().length === 0) {
                        // 给他的爸爸加has-error
                        jq(this).parent().parent().addClass("has-error");
                        // 给span写内容
                        // 找到我这是什么input  --> 找到对应的label的文本内容
                        var name = jq(this).parent().prev().text();
                        jq(this).next().text(name + "不能为空");
                        flag = false;
                        return false;
                    }

                    var inputID = jq(this).attr("id");
                    var minLength = arg[inputID]["min-length"];
                    if (minLength !== undefined) {
                        if (jq(this).val().length < minLength) {
                            console.log("长度太短");
                             // 给他的爸爸加has-error
                        jq(this).parent().parent().addClass("has-error");
                        // 给span写内容
                        // 找到我这是什么input  --> 找到对应的label的文本内容
                        var name = jq(this).parent().prev().text();
                        jq(this).next().text(name + "长度太短");
                            flag = false;
                            return false;
                        }
                    }
                });
                return flag;
            })
        }
    })
})(jQuery);
    jQuery对象扩展
  • 相关阅读:
    新建一个类并绑定一个activity
    关于fragment保存变量的问题
    关于使用别人方法的效率问题
    使用asynctask的问题
    关于整个头像更新问题（2）
    关于查找所需代码的问题
    静态变量的使用问题
    关于更换头像的整个过程理解
    fill_parent 和 match_parent区别
    关于ui修改的若干想法
  • 原文地址：https://www.cnblogs.com/1a2a/p/7684709.html
Copyright © 2011-2022 走看看