Python自动化运维之24、JQuery

　　jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

一、查找元素

1、常用选择器

1.1 基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

1.2层级选择器

$(".outer div")    // 所有的后代
$(".outer>div")    // 所有的子代
$(".outer+div")    // 匹配所有跟在.outer后面的div
$(".outer~div")    // .outer后面的所有div

1.3 基本筛选器

$("li:first")   // 所有li标签中第一个标签
$("li:last")    // 所有li标签中最后一个标签
$("li:even")    // 所有li标签中偶数标签
$("li:odd")     // 所有li标签中奇数标签
$("li:eq(2)")   // 所有li标签中，索引是2的那个标签
$("li:gt(1)")   // 所有li标签中，索引大于1的标签

1.4 属性选择器

$(‘[id="div1"]‘)
$(‘["alex="sb"]‘)
$("input[type=‘text‘]")

2、常用筛选器

2.1  过滤筛选器

$("li").eq(2)    // 和:eq是一样的
$("li").first()    // 和:first是一样的
$("li").last()    // 和:last是一样的
$("ul li").hasclass("test")   // 检测li中的是否含有某个特定的类，有的话返回true

2.2  查找筛选器

$("div").children()  // form中的子标签
$("input").parent()   // input标签的父标签
$("form").next()      // form标签下一个标签
$("form").find(:text,:password)   // form标签中找到:text,:password标签
$("input").siblings()   // input的同辈标签

二、操作元素

1、属性操作

$(":text").val()                  // text输入的内容
$(".test").attr("name")       // test类中name属性对应的值
$(".test").attr("name","sb")  //  设置test类中name属性对应的值
$(".test").attr("checked","checked")  // 设置test类中checked属性对应的值为checked
$(":checkbox").removeAttr("checked")  // 删除checkbox标签中的checked属性
$(".test").prop("checked",true)   // 设置checked为true
$(".test").addClass("hide")    // 增加样式

2、CSS操作

(样式)   css("{color:‘red‘,backgroud:‘blue‘}")
(位置)   offset()    position()  scrollTop()  scrollLeft()
 (尺寸)  innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框

3、文档处理

内部插入  $("#c1").append("<b>hello</b>")
         $("p").appendTo("div")
         prepend()
         prependTo()

外部插入   before()
         insertBefore()
         after()
         insertAfter()

标签内容处理
         remove()
         empty()
         clone()

4、事件

$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){})　　// 事件委托，延迟绑定事件的一种方式

更过多参考　

三、jquery所有示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width:200px;
            height:600px;
            border:1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title {
            height:40px;
            line-height:40px;
            background-color: #2459a2;
            color:white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this)">菜单一</div>
            <div class="body hide">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this)">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this)">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths) {
            // console.log(ths); //Dom中的标签对象
            //$(ths)             // Dom标签对象转换成jQuery标签对象(便利)
            //$(ths)[0]          // jQuery标签对象转成Dom标签对象

            $(ths).next().removeClass(‘hide‘);
            $(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);
        }
    </script>

</body>
</html>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox全选取消反选</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()"/>
    <input type="button" value="取消" onclick="CancleAll()"/>
    <input type="button" value="反选" onclick="ReverseAll()"/>

    <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>22</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.3</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckAll() {
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,true);
        }
        function CancleAll() {
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,false);
        }
        function ReverseAll() {
             $(‘#tb input[type="checkbox"]‘).each(function () {
                 if($(this).prop(‘checked‘)){
                    $(this).prop(‘checked‘,false);
                 }else{
                    $(this).prop(‘checked‘,true);
                 }
             });
        }
    </script>

</body>
</html>

checkbox全选取消反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery clone</title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this)">+</a>
            <input type="text"/>
        </p>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(ths) {
            var p = $(ths).parent().clone();

            p.find(‘a‘).text(‘-‘);
            p.find(‘a‘).attr(‘onclick‘,‘Remove(this)‘);

            $(ths).parent().parent().append(p);
        }

        function Remove(ths) {
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

jquery clone

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width:200px;
            height:600px;
            border:1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title {
            height:40px;
            line-height:40px;
            background-color: #2459a2;
            color:white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="body hide">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.item .title‘).click(function () {
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
        });
    </script>

</body>
</html>

左侧菜单(jquery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟绑定事件</title>
    <style>
        ul li{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="button" value="点我" onclick="Add();"/>
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>123</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
//            $(‘li‘).click(function () {
//                alert($(this).text());
//            });
            $(‘ul‘).delegate(‘li‘,‘click‘,function () {
                alert($(this).text());
            });
        })

        function Add() {
            var tag = document.createElement(‘li‘);
            tag.innerText = ‘666‘;
            $(‘ul‘).append(tag);
        }
    </script>

</body>
</html>

延迟绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单验证</title>
    <style>
        .item{
            width:250px;
            height:60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top:22px;
            left:0;
            font-size:10px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width:200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码"/>
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();"/>-->
            <input type="submit" value="提交"/>
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
//        第一种方式：DOM方式绑定
//        function CheckValid() {
//             找到form标签下的所有需要验证的标签
//             $(‘form .c1‘)
//             $(‘form input[type="text"],input[type="password"])
//             循环所有需要验证的标签，获取内容
//            $(‘form .item span‘).remove();
//            var flag = true;
//
//            $(‘form .c1‘).each(function () {
//                // 每一个元素执行匿名函数
//                // this
//                console.log(this,$(this)[0]);
//                var val = $(this).val();
//                if(val.length == 0){
//                    var laber = $(this).attr(‘label‘);
//                    var tag = document.createElement(‘span‘);
//                    tag.innerText = laber + "不能为空";
//                    $(this).after(tag);
//                    flag = false;
//                }
//            });
//            return flag;
//        }

//        第二种：JQuery绑定(一般使用这种)
        $(function () {
            BindCheckValid();
        });

        function BindCheckValid() {
            $(‘form :submit‘).click(function () {
                var flag = true;
                $(‘form .item span‘).remove();
                $(‘form .c1‘).each(function () {
                    // 每一个元素执行匿名函数
                    // this
                    console.log(this,$(this));
                    var val = $(this).val();
                    if(val.length == 0){
                        var laber = $(this).attr(‘label‘);
                        var tag = document.createElement(‘span‘);
                        tag.innerText = laber + "不能为空";
                        $(this).after(tag);
                        flag = false;
                        return false;
                    }
                });
                return flag;
            });
        }

    </script>
</body>
</html>

form表单验证(dom|jquery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 循环</title>
</head>
<body>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function BindCheckValid(){
            $.each([11,22,33,44],function (k, v) {
                if(y == 22){
                    // return; //相当于continue
                    // return false; //相当于break
                    return false;
                }
                console.log(v);
            })
        }
    </script>
</body>
</html>

jquery 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            background-color: cornflowerblue;
            width: 100%;
        }
        .content{
            background-color: aqua;
            min-height: 1000px;
            width: 800px;
            margin: 0 auto;
        }
        .retTop{
            width: 35px;
            height: 35px;
            position: fixed;
            right: 0;
            bottom: 0;
            background-color: chartreuse;
        }
        .hide{
            display: none;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>

</head>
<body>
    <div class="container">
        <div class="content"></div>
        <div class="retTop">
            返回顶部
        </div>
    </div>

    <script>

        $(function () {
            window.onscroll = function () {
                var scrollHeight = $(window).scrollTop();
                if(scrollHeight<100){
                    $(".retTop").addClass(‘hide‘);
                }else {
                    $(".retTop").removeClass(‘hide‘)
                }
            };

            $(".retTop").click(function () {
                $(window).scrollTop(0);
            })
        })
    </script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            border: 0;
        }
        .header{
            width: 100%;
            height: 50px;
            background-color: black;
        }
        .container{
            width: 960px;
            margin: 0 auto;
            /*position: relative;*/
        }
        .leftmenu{
            width: 250px;
            min-height: 400px;
            background-color: chartreuse;
            position: absolute;             // 想下为什么不能用relative
            left: 200px;
            top: 50px;
        }
        .content{
            width: 600px;
            min-height: 900px;
            background-color: cornflowerblue;
            position: absolute;
            left: 382px;
            top:50px;
        }
        ul{
            list-style: none;
        }
        .content div{
            height: 800px;
            border: 1px solid black;
        }
        .fixed{
            position: fixed;
            top:0;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="container">
        <div class="leftmenu">
            <ul>
                <li id="item1">第一章</li>
                <li id="item2">第二章</li>
                <li id="item3">第三章</li>
            </ul>
        </div>
        <div class="content">
            <div class="item1">111</div>
            <div class="item2">222</div>
            <div class="item3" style="height: 100px">333</div>
        </div>
    </div>

    <script>
        $(function () {
            window.onscroll = function () {
                var scrollHeight = $(window).scrollTop();

                if(scrollHeight>50){
                    $(".leftmenu").addClass(‘fixed‘);
                }else {
                    $(".leftmenu").removeClass(‘fixed‘);
                }

                $(‘.content‘).children().each(function () {
                    if(scrollHeight>$(this).offset().top){
                        var iditem = $(this).attr("class");
                        console.log($(this));
                        $("#"+iditem).css("fontSize","40px").siblings().css("fontSize","12px");
                    }
                    console.log(scrollHeight,$(this).offset().top,$(this).outerHeight(),$(window).height());
                });

                if(scrollHeight+$(window).height() ==$(".content div:last-child").offset().top +$(".content div:last-child").outerHeight()){
                        $("ul li:last-child").css("fontSize","40px").siblings().css("fontSize","12px");
                    }
            };

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

滚动菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .outer{
            position: relative;
            width: 310px;
            height: 310px;
            margin: 20px auto;
        }
        .image{
            position: relative;
        }
        .image img{
            height: 310px;
            width: 310px;
            position: absolute;
            border: dashed blue 1px;
            top: 0;
            left: 0;
        }
        .num{
            position: absolute;
            bottom:0;
            left:100px;
        }
        .num li{
            display: inline-block;
            height: 20px;
            width: 20px;
            /*background-color: #3c763d;*/
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;

        }

        .position{
            width: 310px;
            position: absolute;
            top:50%;
            margin-top: -15px;
            left: 0;
        }

        .position button{
            display: block;
            width: 30px;
            height: 30px;
            background-color:burlywood ;
            opacity: 0.6;
            border: 0;

            display: none;
        }

        .outer:hover .position button{
            display: block;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .active{
            background-color: black;
        }
    </style>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".num li").first().addClass("active");
            console.log( $(".num li"));
            $(".num li").mouseover(function () {
                console.log(this);
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                i = index;
                $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });

            var i = 0;
            function autoMove() {
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                i++;
                if(i==5){
                    i = 0;
                }
            }

            var t1 = setInterval(autoMove,1000);

            $(".outer").hover(function () {
                clearInterval(t1);
            },function () {
                t1 = setInterval(autoMove,1000);
            });

            $(".right").click(function () {
                autoMove();
            });

            $(".left").click(function () {
                i--;
                if(i==-1){
                    i = 4;
                }
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
            })
        })
    </script>
</head>
<body>
    <div class="outer">
        <div class="image">
            <img src="pic/a.png">
            <img src="pic/1.jpeg">
            <img src="pic/2.jpeg">
            <img src="pic/3.jpeg">
            <img src="pic/4.jpeg">
        </div>
        <div class="num">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="position">
            <button class="left"> < </button>
            <button class="right"> > </button>
        </div>
    </div>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .outer{
            position: relative;
            width: 310px;
            height: 310px;
            margin: 20px auto;
        }
        .image{
            position: relative;
        }
        .image img{
            height: 310px;
            width: 310px;
            position: absolute;
            border: dashed blue 1px;
            top: 0;
            left: 0;
        }
        .num{
            position: absolute;
            bottom:0;
            left:100px;
        }
        .num li{
            display: inline-block;
            height: 20px;
            width: 20px;
            /*background-color: #3c763d;*/
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;

        }

        .position{
            width: 310px;
            position: absolute;
            top:50%;
            margin-top: -15px;
            left: 0;
        }

        .position button{
            display: block;
            width: 30px;
            height: 30px;
            background-color:burlywood ;
            opacity: 0.6;
            border: 0;

            display: none;
        }

        .outer:hover .position button{
            display: block;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .active{
            background-color: black;
        }
    </style>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".num li").first().addClass("active");
            console.log( $(".num li"));
            $(".num li").mouseover(function () {
                console.log(this);
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                i = index;
                $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });

            var i = 0;
            function autoMove() {
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                i++;
                if(i==5){
                    i = 0;
                }
            }

            var t1 = setInterval(autoMove,1000);

            $(".outer").hover(function () {
                clearInterval(t1);
            },function () {
                t1 = setInterval(autoMove,1000);
            });

            $(".right").click(function () {
                autoMove();
            });

            $(".left").click(function () {
                i--;
                if(i==-1){
                    i = 4;
                }
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
            })
        })
    </script>
</head>
<body>
    <div class="outer">
        <div class="image">
            <img src="pic/a.png">
            <img src="pic/1.jpeg">
            <img src="pic/2.jpeg">
            <img src="pic/3.jpeg">
            <img src="pic/4.jpeg">
        </div>
        <div class="num">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="position">
            <button class="left"> < </button>
            <button class="right"> > </button>
        </div>
    </div>
</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .hide {
        display: none;
    }

    .header-nav {
        height: 39px;
        background: #c9033b;
    }

    .header-nav .bg {
        background: #c9033b;
    }

    .header-nav .nav-allgoods .menuEvent {
        display: block;
        height: 39px;
        line-height: 39px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-family: 微软雅黑;
        color: #fff;
        width: 100px;
    }

    .header-nav .nav-allgoods .menuEvent .catName {
        height: 39px;
        line-height: 39px;
        font-size: 15px;
    }

    .header-nav .nav-allmenu a {
        display: inline-block;
        height: 39px;
        vertical-align: top;
        padding: 0 15px;
        text-decoration: none;
        color: #fff;
        float: left;
    }

    .header-menu a {
        color: #656565;
    }

    .header-menu .menu-catagory {
        position: absolute;
        background-color: #fff;
        border-left: 1px solid #fff;
        height: 316px;
        width: 230px;
        z-index: 4;
        float: left;
    }

    .header-menu .menu-catagory .catagory {
        border-left: 4px solid #fff;
        height: 104px;
        border-bottom: solid 1px #eaeaea;
    }

    .header-menu .menu-catagory .catagory:hover {
        height: 102px;
        border-left: 4px solid #c9033b;
        border-bottom: solid 1px #bcbcbc;
        border-top: solid 1px #bcbcbc;
    }

    .header-menu .menu-content .item {
        margin-left: 230px;
        position: absolute;
        background-color: white;
        height: 314px;
        width: 500px;
        z-index: 4;
        float: left;
        border: solid 1px #bcbcbc;
        border-left: 0;
        box-shadow: 1px 1px 5px #999;
    }

</style>

<body>

<div class="pg-header">
    <div class="header-nav">
        <div class="container narrow bg">
            <div class="nav-allgoods left">
                <a id="all_menu_catagory" href="#" class="menuEvent">
                    <strong class="catName">全部商品分类<>
                        <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="header-menu">
        <div class="container narrow hide">
            <div id="nav_all_menu" class="menu-catagory">
                <div class="catagory" float-content="one">
                    <div class="title">家电</div>
                    <div class="body">
                        <a href="#">空调</a>
                    </div>
                </div>
                <div class="catagory" float-content="two">
                    <div class="title">床上用品</div>
                    <div class="body">
                        <a href="http://www.baidu.com">床单</a>
                    </div>
                </div>
                <div class="catagory" float-content="three">
                    <div class="title">水果</div>
                    <div class="body">
                        <a href="#">橘子</a>
                    </div>
                </div>
            </div>

            <div id="nav_all_content" class="menu-content">
                <div class="item hide" float-id="one">

                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
                        </dd>
                        <>
                        <dl>
                            <dt><a href="#" class="red">厨房用品</a></dt>
                            <dd>
                                <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>

                            </dd>
                            <>
                            <dl>
                                <dt><a href="#" class="red">厨房用品</a></dt>
                                <dd>
                                    <span>| <a href="#">菜板</a> </span>
                                </dd>
                                <>
                                <dl>
                                    <dt><a href="#" class="red">厨房用品</a></dt>
                                    <dd>
                                        <span>| <a href="#" target="_blank" title="碗">碗</a> </span>

                                    </dd>
                                    <>

                </div>
                <div class="item hide" float-id="two">
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="">角阀</a> </span>

                        </dd>
                        <>
                        <dl>
                            <dt><a href="#" class="red">厨房用品</a></dt>
                            <dd>
                                <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

                            </dd>
                            <>
                            <dl>
                                <dt><a href="#" class="red">厨房用品</a></dt>
                                <dd>
                                    <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

                                </dd>
                                <>

                </div>
                <div class="item hide" float-id="three">
                    <dl>
                        <dt><a href="#" class="red">厨房用品3</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>

                        </dd>
                        <>
                        <dl>
                            <dt><a href="#" class="red">厨房用品3</a></dt>
                            <dd>
                            <span>| <a href="http://www.meilele.com/category-jiaofa/

" target="_blank" title="角阀">角阀3</a> </span>

                            </dd>
                            <>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            init("#all_menu_catagory","#nav_all_menu","#nav_all_content");
        });

        function init(mFirst,mSecond,mThird) {
            $(mFirst).mouseover(function () {
                $(mSecond).parent().removeClass(‘hide‘);
            });
            $(mFirst).mouseout(function () {
                $(mSecond).parent().addClass(‘hide‘);
            });

            $(mSecond).children().mouseover(function () {
                $(mSecond).parent().removeClass(‘hide‘);
                var floatvar = $(this).attr("float-content");
                var floatstr = "[float-id=" + floatvar + "]";
                $(mThird).find(floatstr).removeClass(‘hide‘).siblings().addClass(‘hide‘)
            });

            $(mSecond).mouseout(function () {
                $(this).parent().addClass(‘hide‘);
                $(mThird).children().addClass(‘hide‘);
            });

            $(mThird).children().mouseover(function () {
//                $(mSecond).parent().removeClass(‘hide‘);
                $(this).removeClass(‘hide‘)
            });

            $(mThird).children().mouseout(function () {
//                $(mSecond).parent().addClass(‘hide‘);
                $(this).addClass(‘hide‘)
            })
        }
    </script>
</body>
</html>

商城三层菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        table {
            margin-top: 40px;
        }

        table, td {
            border: 1px solid black;
        }

        a {
            display: inline-block;
            background-color: #bce8f1;
            width: 100px;
            height: 21px;
            text-decoration: none;
            cursor: pointer;
        }

        .red {
            background-color: red;
        }

    </style>
</head>
<body>
<button id="checkAll">全选</button>
<button id="checkReverse">反选</button>
<button id="checkCancle">取消</button>
<a id="edit_mode">进入编辑模式</a>

<table >
    <thead>
        <tr>
            <th>选择</th>
            <th>主机名</th>
            <th>端口</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td><input type="checkbox"></td>
            <td edit="true">v1</td>

            <td>88</td>
            <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
        </tr>

        <tr>
            <td><input type="checkbox"></td>
            <td edit="true">v1</td>

            <td>88</td>
            <td edit="true" edit_type="select" sel-val="2" global-key="STATUS">下线</td>
        </tr>

        <tr>
            <td><input type="checkbox"></td>
            <td edit="true">v1</td>

            <td>88</td>
            <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
        </tr>
    </tbody>
</table>
<script>
    $(function () {
        main(‘#edit_mode‘,‘#tb‘);
    });

    STATUS = [
        {‘id‘: 1, ‘value‘: "在线"},
        {‘id‘: 2, ‘value‘: "下线"}
    ];

    window.globalCtrlKeyPress = false;

    function main(edit,tb) {
        bindSingleCheck(edit,tb);
        bindEditMode(edit,tb);
        bindCheckAll(edit,tb);
        bindCheckCancle(edit,tb);
        bindCheckReverse(edit,tb);
    }

    function bindSingleCheck(edit,tb) {
        $(tb).find(":checkbox").click(function () {
            var $tr = $(this).parent().parent();
            if($(edit).hasClass(‘editing‘)){
                if($(this).prop(‘checked‘)){
                    RowIntoEdit($tr);
                }else {
                    RowOutEdit($tr);
                }
            }
        })
    }

    function bindEditMode(edit,tb) {
        $(edit).click(function () {
            if($(this).hasClass(‘editing‘)){
                $(this).removeClass(‘editing red‘);
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop(‘checked‘)){
                        RowOutEdit($(this));
                    }else {

                    }
                });
            }else {
                $(this).addClass(‘editing red‘);
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop(‘checked‘)){
                        RowIntoEdit($(this));
                    }else {

                    }
                })
            }
        });
    }

    function bindCheckAll(edit,tb) {
        $("#checkAll").click(function () {
            if($(edit).hasClass("editing")){
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop(‘checked‘)){

                    }else {
                        check_box.prop(‘checked‘,true);
                        RowIntoEdit($(this));
                    }
                })
            }else {
                $(tb).find(‘:checkbox‘).prop(‘checked‘, true);
            }
        });
    }

    function bindCheckReverse(edit,tb) {
        $("#checkReverse").click(function () {
            if($(edit).hasClass("editing")){
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop(‘checked‘)){
                        check_box.prop(‘checked‘,false);
                        RowOutEdit($(this));
                    }else {
                        check_box.prop(‘checked‘,true);
                        RowIntoEdit($(this));
                    }
                })
            }else {
                $(tb).children().each(function(){
                    var check_box = $(this).children().find(‘:checkbox‘);
                    if(check_box.prop(‘checked‘)){
                        check_box.prop(‘checked‘,false);
                    }else{
                        check_box.prop(‘checked‘,true);
                    }
                });
            }
        });
    }

    function bindCheckCancle(edit,tb) {
        $("#checkCancle").click(function () {
            if($(edit).hasClass("editing")){
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop(‘checked‘)){
                        check_box.prop(‘checked‘,false);
                        RowOutEdit($(this));
                    }else {

                    }
                })
            }else {
                $(tb).find(‘:checkbox‘).prop(‘checked‘,false);
            }
        });
    }

    function RowIntoEdit($tr) {
        $tr.children().each(function () {
            if($(this).attr(‘edit‘) == ‘true‘){
                if($(this).attr(‘edit_type‘) == "select"){
                    var select_val = $(this).attr(‘sel-val‘);
                    var global_key = $(this).attr(‘global-key‘);
                    var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], ‘id‘, ‘value‘, select_val);
                    $(this).html(selelct_tag);
                }else {
                    var orgin_value = $(this).text();
                    var temp = "<input value=‘"+ orgin_value+"‘ />";
                    $(this).html(temp);
                }
            }
        })
    }

    function RowOutEdit($tr) {
        $tr.children().each(function () {
            if($(this).attr(‘edit‘)==‘true‘){
                if($(this).attr(‘edit_type‘) == "select"){
                    var new_val = $(this).children(‘:first‘).val();
                    var new_text = $(this).children(‘:first‘).find("option[value=‘"+new_val+"‘]").text();
                    $(this).attr(‘sel-val‘, new_val).text(new_text);
                }else {
                    var orgin_value = $(this).children().first().val();
                    $(this).text(orgin_value);
                }
            }
        })
    }

    function CreateSelect(attrs, csss, option_dict, item_key, item_value, current_val) {
        var sel = document.createElement(‘select‘);

        //设置属性
        $.each(attrs,function (k,v) {
            $(sel).attr(k,v);
        });

        //设置样式 这里为空，以后可以设置
        $.each(csss,function (k,v) {
            $(sel).css(k,v);
        });

        $.each(option_dict,function (k,v) {
            var opt = document.createElement(‘option‘);
            var sel_text = v[item_value];
            var sel_value = v[item_key];

            if(current_val == sel_value){
                $(opt).text(sel_text).attr(‘value‘,sel_value).attr(‘selected‘,‘true‘).appendTo($(sel));
            }else {
                $(opt).text(sel_text).attr(‘value‘,sel_value).appendTo($(sel));
            }
        });
        return sel;
    }

    window.onkeydown = function (e) {
        if(e && e.keyCode == 17){
            window.globalCtrlKeyPress = true;
        }
    };

    window.onkeyup = function (e) {
        if(e && e.keyCode == 17){
            window.globalCtrlKeyPress = false;
        }
    };

    function MultiSelect(ths) {
        if(window.globalCtrlKeyPress == true){
            var index = $(ths).parent().index();
            var value = $(ths).val();
            console.log(value,index);
            $(ths).parent().parent().nextAll().find("td input[type=‘checkbox‘]:checked").each(function(){
                $(this).parent().parent().children().eq(index).children().val(value);
            });
        }
    }

</script>
</body>
</html>

编辑框(需要重点掌握)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .small-box{
            border: 5px solid red;
            height: 350px;
            width: 350px;
            position: relative;
        }
        .big-box{
            position: absolute;
            width: 400px;
            height: 400px;
            left:360px;
            top:0;
            border: 5px solid black;
            overflow: hidden;
        }
        .hide{
            display: none;
        }
        .small-box .float{
            width: 175px;
            height: 175px;
            background-color: grey;
            position: absolute;
            opacity: 0.8;
        }
        .big-box img{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="small-box">
            <div class="float hide"></div>
            <img src="pic/small.jpg">
        </div>

        <div class="big-box hide">
            <img src="pic/big.jpg">
        </div>
    </div>

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $(".small-box").mouseover(function () {
            $(this).children(‘.float‘).removeClass(‘hide‘).parent().next().removeClass(‘hide‘);
        });

        $(".small-box").mouseout(function () {
            $(this).children(‘.float‘).addClass(‘hide‘).parent().next().addClass(‘hide‘);
        });

        $(".float").mousemove( function (e) {
            var _event = e || window.event;

            var small_box_width = $(".small-box").width();
            var small_box_height = $(".small-box").height();

            var float_height = $(‘.float‘).height();
            var float_width = $(".float").width();

            var float_height_half = float_height/2;
            var float_width_half = float_width/2;

            var float_right = _event.clientX- float_width_half;
            var float_top = _event.clientY - float_height_half;

            if(float_right<0){
                float_right = 0;
            }else if(float_right>small_box_width-float_width){
                float_right=small_box_width-float_width
            }
            if(float_top<0){
                float_top=0;
            }else if(float_top>small_box_height-float_height){
                float_top=small_box_height-float_height
            }

            $(".float").css({"left":float_right+"px","top":float_top+"px"});

            var percentX=($(".big-box img").width()-$(".big-box").width())/ (small_box_width-float_width);
            var percentY=($(".big-box img").height()-$(".big-box").height())/(small_box_height-float_height);

            $(".big-box img").css({"left":-percentX*float_right+"px","top":-percentY*float_top+"px"});
        })

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

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#title").mouseover(function () {
            $(this).css(‘cursor‘,‘move‘);
        }).mousedown(function (e) {
            var _event = e||window.event;
            var old_x = _event.clientX;
            var old_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).mousemove(function (e) {
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = new_x - old_x + parent_left;
                var y = new_y - old_y + parent_top;

                $(this).parent().css({"left":x+"px","top":y+"px"})
            }).mouseup(function () {
                $(this).unbind(‘mousemove‘);
            })
        })
    </script>
</body>
</html>

拖动面板

四、jquery扩展

extend以及fn.extend

实例：

/**
 * Created by alex on 2016/8/28.
 */
(function(jq){

    function ErrorMessage(inp,message){
        var tag = document.createElement(‘span‘);
        tag.innerText = message;
        inp.after(tag);
    }

    jq.extend({
        valid:function(form){
            // #form1 $(‘#form1‘)
            jq(form).find(‘:submit‘).click(function(){

                jq(form).find(‘.item span‘).remove();

                var flag = true;
                jq(form).find(‘:text,:password‘).each(function(){

                    var require = $(this).attr(‘require‘);
                    if(require){
                        var val = $(this).val();

                        if(val.length<=0){
                            var label = $(this).attr(‘label‘);
                            ErrorMessage($(this),label + "不能为空");
                            flag = false;
                            return false;
                        }

                        var minLen = $(this).attr(‘min-len‘);
                        if(minLen){
                            var minLenInt = parseInt(minLen);
                            if(val.length<minLenInt){
                                var label = $(this).attr(‘label‘);
                                ErrorMessage($(this),label + "长度最小为"+ minLen);
                                flag = false;
                                return false;
                            }
                            //json.stringify()
                            //JSON.parse()
                        }

                        var phone = $(this).attr(‘phone‘);
                        if(phone){
                            // 用户输入内容是否是手机格式
                            var phoneReg = /^1[3|5|8]\d{9}$/;
                            if(!phoneReg.test(val)){
                                var label = $(this).attr(‘label‘);
                                ErrorMessage($(this),label + "格式错误");
                                flag = false;
                                return false;
                            }
                        }

                        // 1、html自定义标签属性
                        // 增加验证规则+错误提示

                    }
                    // 每一个元素执行次匿名函数
                    // this
                    //console.log(this,$(this));
                    /*
                    var val = $(this).val();
                    if(val.length<=0){
                        var label = $(this).attr(‘label‘);
                        var tag = document.createElement(‘span‘);
                        tag.innerText = label + "不能为空";
                        $(this).after(tag);
                        flag = false;
                        return false;
                    }
                    */
                });

                return flag;
            });
        }
    });
})(jQuery);

将自己写的js封装到jquery中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery扩展 form验证</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form id="form1">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码" require="true"/>
            </div>
            <div class="item">
                <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
            </div>
            <input type="submit" value="提交" />
        </form>

    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="commons.js"></script>
    <script>
        $(function(){
            $.valid(‘#form1‘);
        });

    </script>
</body>
</html>

jquery扩展 form验证

五、jquery回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide(1000,call_back());

            })
        });
        function call_back() {
            alert(‘sss‘)
        }
    </script>
</head>
<body>
<button>隐藏</button>
<p>hello</p>

</body>
</html>

回调函数

图像插件：http://fontawesome.io/

jquery插件：http://www.jeasyui.net/

jquery插件：http://jqueryui.com/

jquery插件：http://jqueryui.com/

轮播插件：http://bxslider.com/

延迟加载插件：http://www.w3cways.com/1765.html

AngularJs：https://angular.cn/

时间： 2024-10-12 04:15:57

Python自动化运维之24、JQuery的相关文章

Python自动化运维课程学习--Day3

本文为参加老男孩Python自动化运维课程第三天学习内容的总结. 大致内容如下: 1.文件操作 2.字符编码转码相关操作 3.函数 0.关于本文中所有运行Python代码的环境: --操作系统:Ubuntu 16.10 (Linux 4.8.0) --Python版本:3.5.2 python2.7.12 --Python IDE: PyCharm 2016.3.2 一.文件操作: 1.文件操作流程:以只读.写(覆盖写).追加写.读写.追加读写.二进制读写等模式打开文件 ==> 得到文件句柄,并

(转）Python自动化运维之13、异常处理及反射(__import__,getattr,hasattr,setattr)

Python自动化运维之13.异常处理及反射(__import__,getattr,hasattr,setattr) 一.异常处理 python异常: python的运行时错误称作异常 (1)语法错误:软件的结构上有错误而导致不能被解释器解释或不能被编译器编译 (2)逻辑错误:由于不完整或不合法的输入所致,也可能是逻辑无法生成.计算或者输出结果需要的过程无法执行等 python异常是一个对象,表示错误或意外情况 (1)在python检测到一个错误时,将触发一个异常 python可以通常异常传导机

电子书 Python自动化运维：技术与最佳实践.pdf

本书在中国运维领域将有"划时代"的重要意义:一方面,这是国内一本从纵.深和实践角度探讨Python在运维领域应用的著作:一方面本书的作者是中国运维领域的"偶像级"人物,本书是他在天涯社区和腾讯近10年工作经验的结晶.因为作者实战经验丰富,所以能高屋建瓴.直指痛处,围绕Python自动化运维这个主题,不仅详细介绍了系统基础信息.服务监控.数据报表.系统安全等基础模块,而且深入讲解了自动化操作.系统管理.配置管理.集群管理及大数据应用等高级功能.重要的是,完整重现了4个

Python自动化运维课程学习--Day2

本文为参加老男孩Python自动化运维课程第二天学习内容的总结. 大致内容如下: 1.python模块初识 2.python程序运行流程 3.python数据类型(只讲了numbers, bool, strings, bytes, list, tuple, dict, set) 4.python数据运算 0.关于本文中所有运行Python代码的环境: --操作系统:Ubuntu 16.10 (Linux 4.8.0) --Python版本:3.5.2 --Python IDE: PyCharm

python自动化运维之路~DAY7

python自动化运维之路~DAY7 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.客户端/服务器架构 C/S 架构是一种典型的两层架构,其全称是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据库服务器端,客户端通过数据库连接访问服务器端的数据:另一种是Socket服务器端,服务器端的程序通过Socket与客户端的程序通信. C/S 架构也可以看做是胖客户端架构.因为客户端需要实现绝大多数的业务

python自动化运维之路~DAY10

python自动化运维之路~DAY10 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

python自动化运维之集中病毒扫描

1.因为我linux的python是2.6.6,所以因为有些模块是2.7的,先进行升级. 步骤地址:http://www.linuxidc.com/Linux/2014-07/104555.htm 2.安装pyclamd yum install -y clamav clamd clamav-update 安装clamavp的相关程序包 chkconfig --level 235 clamd on /usr/bin/freshclam pyClamd-0.3.15.tar.gz安装包安装 3.vi

Python自动化运维开发活动沙龙(2015-07-11周六）

Python自动化运维开发活动沙龙 2015-07-11(周六) 场地限制,最多仅限50人参加,报名从速! 亲,已是2015年了,做为运维工程师的你还在手动装机器.配服务.看监控.帮开发人肉上线么?还在发愁如何把每天重复的工作自动化起来么?还在想对开源软件进行二次开发定制却无能为力么?还在对开发人员提出的各种无理需求想进行反驳却因为自己不懂开发却被人鄙视么?还在为自己天天努力工作.到处救火却每月只能挣个十来K而感到不爽么? Maybe yes,maybe no! 但是不要不爽了,你的工资不高是因

Python自动化运维Django入门

随着IT运维技术日益更新,近几年运维自动化越来越火,而且学习python的人非常的火爆,尤其是python自动化运维开发,得到了很多前辈的推崇,尤其是老男孩培训中心.老男孩老师.Alex老师等,在这里非常感谢你们. 这里我也记录一下以前学习Django的一点点心得和方法,方便以后自己查阅,如果能帮助初学者是最好的了!好的,其他不多说了,博文滴走起. 一.系统实战环境 系统版本:CnetOS6.5 x86_64 Django版本:Django-1.5.8 MySQL版本:MySQL-5.1.73