Python开发【第十三篇】：jQuery

一、寻找元素(重要的选择器和筛选器)

基本语法：$(selector).action()

2.1 选择器

    2.1.1 基本选择器      $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

    2.1.2层级选择器       $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

    2.1.3 基本筛选器      $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

    2.1.4 属性选择器      $('[id="div1"]')   $('["alex="sb"][id]')

    2.1.5 表单选择器      $("[type='text']")----->$(":text")                    注意只适用于input标签

                                 $("input:checked")

2.2 筛选器

  2.2.1  过滤筛选器

                                     $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

     2.2.2  查找筛选器

                                $("div").children(".test")    $("div").find(".test")  

                                $(".test").next()    $(".test").nextAll()   $(".test").nextUntil()

                                $("div").prev()  $("div").prevAll()  $("div").prevUntil()

                                $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

                                $("div").siblings()

实例左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background-color: #1a386a;
            color: white;;
            cursor: pointer;
        }
        .menu {
            background-color: grey;
            width: 20%;
            float: left;
            height: 500px;
            line-height: 40px;
        }
        .content {
            width: 80%;
            float: left;
            background-color: #6cd9c9;
            height: 500px;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title">菜单一</div>
                <div class="con">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单二</div>
                <div class="con hide">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单三</div>
                <div class="con hide">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单四</div>
                <div class="con hide">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>



    <script>
        $(document).ready(function () {
            $(".title").click(function () {
             $(".title").next().addClass("hide")
                $(this).next().removeClass("hide")
            })
        })
    </script>
</body>
</html>

View Code

实例 tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .outer {
            width: 500px;
            margin: 0 auto;
            background-color: #333333;
            color: white;
        }

        .outer li {
            display: inline-block;
            list-style: none;
            line-height: 50px;
            width: 80px;
            text-align: center;

        }
        .inner{
            height: 300px;
            background-color: #139412;
            border: 1px solid transparent;

        }
        .hide {
            display: none;
        }
        .current{
            background-color: #f42760;
            color: black;
            border: solid 2px transparent;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul>
            <li class="current" conctent="c1">菜单一</li>
            <li conctent="c2">菜单二</li>
            <li conctent="c3">菜单三</li>
        </ul>
        <div class="inner">
            <div text_con="c1">我是内容一</div>
            <div text_con="c2" class="hide">我是内容二</div>
            <div text_con="c3" class="hide">我是内容三</div>
        </div>
    </div>
    <script>
        $("li").click(function () {
            $(this).addClass("current").siblings().removeClass("current");
            $("[text_con="+$(this).attr('conctent')+"]").removeClass("hide").siblings().addClass("hide");



        })


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

View Code

二、操作元素(属性 CSS 和文档处理)

2.1 属性操作

     $("p").text()    $("p").html()   $(":checkbox").val()  

      $(".test").attr("alex")   $(".test").attr("al","sb") 

      $(".test").attr("checked","checked")  $(":checkbox").removeAttr("checked")

      $(".test").prop("checked",true)

      $(".test").addClass("hide")

实例编辑框正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <div>
        <input class="selA" type="button" value="全选"/>
        <input class="selB" type="button" value="取消"/>
        <input class="selC" type="button" value="反选"/>
    </div>
    <table>
        <thead>
            <th>序号</th>
            <th> 姓名</th>
            <th> 年龄</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"/></td>
                <td>a</td>
                <td>18</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>b</td>
                <td>19</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>c</td>
                <td>20</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>d</td>
                <td>21</td>

            </tr>

        </tbody>
        <script>
        $(".selA").click(function () {

            $(":input").prop("checked",true);
        })
        $(".selB").click(function () {
            $(":input").prop("checked",false);
        })
        $(".selC").click(function () {
            $("table :input").each(function () {
                if ($(this).prop("checked")){
                    $(this).prop("checked",false);
                }else{
                     $(this).prop("checked",true);
                }
            })
        })


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

View Code

jQuery里each循环原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <script>
        function myeach(obj,func) {
            for(var i = 0;i<obj.length;i++){
                var current = obj[i];
                var ret = func(i,current);
                if(ret == "false"){
                    break
                }
            }
        }
         var li = [11,22,33];
            myeach(li,function (k,v) {
                console.log(k,v);
                return false;
            })
        $.each()
    </script>
</body>
</html>

View Code

2.2 CSS操作

3.2.1(样式)   css("{color:'red',backgroud:'blue'}") 

        3.2.2(位置)   offset()    position()  scrollTop()  scrollLeft()    

        3.2.3(尺寸)   height()  width()

实例返回顶部

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

        .menu{
            height: 5000px;
            background-color: #99aecb;
        }
        h1{
            text-align: center;
            line-height: 90px;

        }
        .returnTop{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 38px;
            height: 38px;
            background-color: #f42760;
            font-size: 14px;
            text-align: center;
            font-family: "微软雅黑";
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
        <h1>我是第一行</h1>
    </div>
    <div class="returnTop hide">返回顶部</div>
    <script>
        window.onscroll=function () {
            var current = $(window).scrollTop();
            if (current>100){
                $(".returnTop").removeClass("hide");
            }else{
                $(".returnTop").addClass("hide");
            }
        }
        $(".returnTop").click(function () {
            $(window).scrollTop(0)
            }
        )


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

View Code

实例滚动菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        body,img,ul {
            margin: 0;
            padding:0;
            list-style: none;
            border: 0;
        }
        .pg-header {
            background-color: #35536D;
        }
        .warp {
            width: 980px;
            margin: 0 auto;
        }
        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            height: 0 ;
            visibility: hidden;
        }
        .pg-header .logo   {
            float: left;
            padding: 5px 10px 5px 0px;
        }
        .pg-header .logo img {
            width: 110px;
            height: 40px;
        }
        .pg-header .nav ul li {
            float: left;


        }
        .pg-header .nav ul li a {
            display: block;
            text-decoration: none;
            color: #ccc;
            font-size: 16px;
            line-height: 50px ;
            font-family: "微软雅黑";
            padding: 0 20px ;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #1864aa;
        }
        .pg-body .catalog {
            position: absolute;
            top: 60px;
            width: 200px;
            background-color: #fafafa;
            border: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
        .pg-body .catalog .catalog-item{
            background-color: #fafafa;
        }
        .pg-body .content {
            position: absolute;
            top: 60px;
            width:700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
<html>
<body>
    <div class="pg-header">
        <div class="warp clearfix">
            <div class="logo">
                <a href="javascript:void (0)"><img src="3.png"/></a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="javascript:void(0)">首页</a></li>
                    <li><a href="javascript:void(0)">菜单一</a></li>
                    <li><a href="javascript:void(0)">菜单二</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="warp">
            <div class="catalog">
                <div class="catalog-item"auto-to="function1"><a>第一页</a></div>
                <div class="catalog-item"auto-to="function2"><a>第二页</a></div>
                <div class="catalog-item"auto-to="function3"><a>第三页</a></div>
            </div>
            <div class="content">
                <div menu="function1"class="section"><h1>第一章</h1></div>
                <div menu="function2"class="section"><h1>第二章</h1></div>
                <div menu="function3"class="section"><h1>第三章</h1></div>
            </div>
        </div>
    </div>
    <script>
        window.onscroll=function () {
            var ws = $(window).scrollTop();
            if (ws >60){
                $(".catalog").addClass("fixed");
            }else{
                $(".catalog").removeClass("fixed");
            }
            if ($(document).height()==$(window).height()+ws){
                $(".catalog").children(":last").css("fontSize","40px").siblings().css("fontSize","16px");
                return;
            }
            $(".content").children().each(function () {
                var offset=$(this).offset().top;
                var total = $(this).height()+ offset;
                if (ws >offset && ws < total){
                    var index=$(this).attr("menu");
                    var new_inde="[auto-to="+index+"]";
                    $(new_inde).css("fontSize","40px").siblings().css("fontSize","15px");
                }
            })

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

View Code

2.3 文档处理

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

                   prepend()    prependTo()

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

                     replaceWith()   remove()  empty()  clone()

2.4 事件

2.4.1

               $(document).ready(function(){}) -----------> $(function(){})

2.4.2

               $("p").click(function(){})

               $("p").bind("click",function(){})                    

               $("ul").delegate("li","click",function(){})

实例拖动面板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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 type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

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

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

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

实现鼠标拖动内容框

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Index</title>
        <style>
            a {
                color: #428bca;
                text-decoration: none;
                }

                .modal-backdrop {
                  position: fixed;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  z-index: 1050;
                  background-color: #white;
                  opacity: 0.8;
                }

                .modal {
                  position: fixed;
                  top: 30%;
                  left: 50%;
                  z-index: 1030;
                }

                .hide {
                    display:none; 
                }
        </style>
    </head>
    <body>
        <div>
            <input type="button" onclick="fadeIn();"  value="加载条"/>
        </div>
        <div id="shade" class="modal-backdrop hide">
            <div  class="modal">
                <img src="./images/loading_32.gif"/>
            </div>
        </div>
        <script >
            function fadeIn() {
                document.getElementById('shade').className = 'modal-backdrop';
            }

            function fadeOut() {
                document.getElementById('shade').className = 'modal-backdrop hide';
            }
        </script>
    </body>
</html>

实例：加载

加载条

/*公共开始*/
body {
    margin: 0 auto;
    font-family: Arial;
    _font-family: 宋体,Arial;
    font-size: 12px;
}
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {
    margin: 0;
    padding: 0;
}

ol, ul, li {
    list-style: none;
}
a{
    cursor:pointer;
    text-decoration:none;
}
/*a:hover{
    color: #F60 !important;
    text-decoration: underline;
}*/
img{
    border:none;
    border-width:0px;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}

.red{
    color: #c00!important;
}
.m8{
    margin:8px;
}
.mt10{
    margin-top:10px;
}
.mt20{
    margin-top:20px;
}
.mr5{
    margin-right:5px;
}
.ml5{
    margin-left:5px;
}

.ml10{
    margin-left:10px;
}

.mb10{
    margin-bottom:10px;
}
.pt18{
    padding-top:18px;
}
.pt20{
    padding-top:20px;
}
.pb20{
    padding-bottom:20px;
}
.nbr{
    border-right:0px;
}
.font12{
    font-size:12px;
}
.font14{
    font-size:14px;
}
.font16{
    font-size:16px;
}
.bold{
    font-weight:bold;
}
.left{
    float:left;
}
.right{
    float:right;
}
.hide{
    display:none;
}
.show{
     display:table;
}
.clearfix{
    clear:both;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clearfix {zoom: 1;}

.container{
    width:1190px;
    margin-left:auto;
    margin-right:auto;

}

.group-box-1 .title{
    height: 33px;
    line-height: 33px;
    border: 1px solid #DDD;
    background: #f5f5f5;
    padding-top: 0;
    padding-left: 0;
                
}
.group-box-1 .title .title-font{
    display: inline-block;
    font-size: 14px;
    font-family: 'Microsoft Yahei','SimHei';
    font-weight: bold;
    color: #333;
    padding-left: 10px;
}
.group-box-1 .body {
    border: 1px solid #e4e4e4;
    border-top: none;
}

.tab-menu-box1 {
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.tab-menu-box1 .menu {
    line-height: 33px;
    height: 33px;
    background-color: #f5f5f5;
}

.tab-menu-box1 .content {
    min-height: 100px;
    border-top: 1px solid #ddd;
    background-color: white;
}

.tab-menu-box1 .menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    /*position: absolute;*/
}

.tab-menu-box1 .menu ul li {
    position: relative;
    float: left;
    font-size: 14px;
    font-family: 'Microsoft Yahei','SimHei';
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-right: 1px solid #ddd;
    padding: 0 18px;
    cursor: pointer;
}

.tab-menu-box1 .menu ul li:hover {
    color: #c9033b;
}

.tab-menu-box1 .menu .more {
    float: right;
    font-size: 12px;
    padding-right: 10px;
    font-family: "宋体";
    color: #666;
    text-decoration: none;
}

.tab-menu-box1 .menu a:hover {
    color: #f60 !important;
    text-decoration: underline;
}

.tab-menu-box1 .menu .current {
    margin-top: -1px;
    color: #c9033b;
    background: #fff;
    height: 33px;
    border-top: 2px solid #c9033b;
    z-index: 10;
}

.tab-menu-box-2 .float-title {
    display: none;
    top: 0px;
    position: fixed;
    z-index: 50;
}

.tab-menu-box-2 .title {
    width: 890px;
    border-bottom: 2px solid #b20101;
    border-left: 1px solid #e1e1e1;
    clear: both;
    height: 32px;
}

.tab-menu-box-2 .title a {
    float: left;
    width: 107px;
    height: 31px;
    line-height: 31px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.tab-menu-box-2 .title a:hover {
    background-position: -26px -271px;
    text-decoration: none;
    color: #fff;
}

.tab-menu-box-2 .content {
    min-height: 100px;
    background-color: white;
}


.tab-menu-box3 {
    border: 1px solid #ddd;
}

.tab-menu-box3 .menu {
    line-height: 33px;
    height: 33px;
    background-color: #f5f5f5;
}

.tab-menu-box3 .content {
    height: 214px;
    border-top: 1px solid #ddd;
    background-color: white;
}

.tab-menu-box3 .menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    /*position: absolute;*/
}

.tab-menu-box3 .menu ul li {
    position: relative;
    float: left;
    font-size: 14px;
    font-family: 'Microsoft Yahei','SimHei';
    text-align: center;
    font-size: 14px;
    width:50%;
    cursor: pointer;
}
 
.tab-menu-box3 .menu ul li:hover {
    color: #c9033b;
}

.tab-menu-box3 .menu .more {
    float: right;
    font-size: 12px;
    padding-right: 10px;
    font-family: "宋体";
    color: #666;
    text-decoration: none;
}

.tab-menu-box3 .menu a:hover {
    color: #f60 !important;
    text-decoration: underline;
    font-weight: bold;
}

.tab-menu-box3 .menu .current {

    margin-top: -1px;
    color: #c9033b;
    background: #fff;
    height: 33px;
    border-top: 2px solid #c9033b;
    z-index: 10;
    font-weight: bold;
    
}

/*公共结束*/

实例：Tab菜单-css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <div>
        <input class="selA" type="button" value="全选"/>
        <input class="selB" type="button" value="取消"/>
        <input class="selC" type="button" value="反选"/>
    </div>
    <table>
        <thead>
            <th>序号</th>
            <th> 姓名</th>
            <th> 年龄</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"/></td>
                <td>a</td>
                <td>18</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>b</td>
                <td>19</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>c</td>
                <td>20</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>d</td>
                <td>21</td>

            </tr>

        </tbody>
        <script>
        $(".selA").click(function () {

            $(":input").prop("checked",true);
        })
        $(".selB").click(function () {
            $(":input").prop("checked",false);
        })
        $(".selC").click(function () {
            $("table :input").each(function () {
                if ($(this).prop("checked")){
                    $(this).prop("checked",false);
                }else{
                     $(this).prop("checked",true);
                }
            })
        })


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

实例：多选、反选和取消

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        body,img,ul {
            margin: 0;
            padding:0;
            list-style: none;
            border: 0;
        }
        .pg-header {
            background-color: #35536D;
        }
        .warp {
            width: 980px;
            margin: 0 auto;
        }
        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            height: 0 ;
            visibility: hidden;
        }
        .pg-header .logo   {
            float: left;
            padding: 5px 10px 5px 0px;
        }
        .pg-header .logo img {
            width: 110px;
            height: 40px;
        }
        .pg-header .nav ul li {
            float: left;


        }
        .pg-header .nav ul li a {
            display: block;
            text-decoration: none;
            color: #ccc;
            font-size: 16px;
            line-height: 50px ;
            font-family: "微软雅黑";
            padding: 0 20px ;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #1864aa;
        }
        .pg-body .catalog {
            position: absolute;
            top: 60px;
            width: 200px;
            background-color: #fafafa;
            border: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
        .pg-body .catalog .catalog-item{
            background-color: #fafafa;
        }
        .pg-body .content {
            position: absolute;
            top: 60px;
            width:700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
<html>
<body>
    <div class="pg-header">
        <div class="warp clearfix">
            <div class="logo">
                <a href="javascript:void (0)"><img src="3.png"/></a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="javascript:void(0)">首页</a></li>
                    <li><a href="javascript:void(0)">菜单一</a></li>
                    <li><a href="javascript:void(0)">菜单二</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="warp">
            <div class="catalog">
                <div class="catalog-item"auto-to="function1"><a>第一页</a></div>
                <div class="catalog-item"auto-to="function2"><a>第二页</a></div>
                <div class="catalog-item"auto-to="function3"><a>第三页</a></div>
            </div>
            <div class="content">
                <div menu="function1"class="section"><h1>第一章</h1></div>
                <div menu="function2"class="section"><h1>第二章</h1></div>
                <div menu="function3"class="section"><h1>第三章</h1></div>
            </div>
        </div>
    </div>
    <script>
        window.onscroll=function () {
            var ws = $(window).scrollTop();
            if (ws >60){
                $(".catalog").addClass("fixed");
            }else{
                $(".catalog").removeClass("fixed");
            }
            if ($(document).height()==$(window).height()+ws){
                $(".catalog").children(":last").css("fontSize","40px").siblings().css("fontSize","16px");
                return;
            }
            $(".content").children().each(function () {
                var offset=$(this).offset().top;
                var total = $(this).height()+ offset;
                if (ws >offset && ws < total){
                    var index=$(this).attr("menu");
                    var new_inde="[auto-to="+index+"]";
                    $(new_inde).css("fontSize","40px").siblings().css("fontSize","15px");
                }
            })

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

实例：滚动菜单

3、文档处理

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

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

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

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

实例：移动面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer {
            width: 730px;
            height: 454px;
            /*border: 4px dashed cornflowerblue;*/
            position: relative;
            margin: 0 auto;
        }
       .outer .img li {
           position: absolute;
           left: 0 ;
           top: 0 ;
       }
        .outer .num {
            position: absolute;
            bottom: 20px;
            text-align: center;
            width: 100%;
            left: 0;
            font-size: 0;
        }
        .outer .btn {
            width: 20px;
            height: 50px;
            background:rgba(0,0,0,.4) ;
            position: absolute;
            font-size: 25px;
            text-align: center;
            top:50%;
            margin: -30px 0px ;
            line-height: 50px;
            cursor: pointer;
            display: none;
            font-weight: bold;
        }
        .outer .num li {
            height: 20px;
            width: 20px;
            font-size: 18px;
            background-color: #4f4f4f;
            border-radius: 15px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            margin: 0px 5px;
            cursor: pointer;
        }
        .right{
            right: 0px;
        }
        .outer .num li.current {
            background-color: red;
        }
        .outer:hover .btn{
            display: block;
        }

    </style>
</head>
<body>
    <div class="outer">
        <ul class="img">
            <li><img src="image/1.jpg" /></li>
            <li><img src="image/2.jpg" /></li>
            <li><img src="image/3.jpg" /></li>
            <li><img src="image/4.jpg" /></li>
            <li><img src="image/5.jpg" /></li>
            <li><img src="image/6.jpg" /></li>
        </ul>
        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="left btn"><</div>
        <div class="right btn">></div>
    </div>
    <script>
        // js 要做三件事
        //1、点击数字显示对应的图片并且颜色变红；2、自动轮播，定时器；3、点击图标自动上一张或下一张

        $(function () {
            //找到第一个数字添加背景色
            $(".num li").first().addClass("current");
            // 给所有的数字绑定鼠标悬浮事件
            $(".num li").mouseover(function () {
                //当前的数字添加样式，兄弟标签去除样式
            $(this).addClass("current").siblings().removeClass("current");
                i = $(this).index(); //获取当前的索引值
                // 根据索引找到对应的图片，有淡入淡出的效果
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        });
            //定时器 自动轮播
            i = 0;
            var time = setInterval(move,1500);
            function move() {
                i++;
                if (i==6){
                    i=0;
                };
                $(".num li").eq(i).addClass("current").siblings().removeClass("current");
                $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
            };
            //鼠标放在图片上，清除定时器；反之继续执行定时器
            $(".outer").hover(function () {
                clearInterval(time);
            },function () {
                time = setInterval(move,1500);
            });
            //左尖括号绑定事件
            $(".left").click(function () {
                if(i==0){
                    i=6;
                }
                i-=2;
                move();
            });
            //右尖括号绑定事件
            $(".right").click(function () {
                move();
            });

        });

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

轮播图片

posted @ 2016-07-14 17:18 程亚军阅读(180) 评论(0) 编辑收藏举报

刷新页面返回顶部

Python开发【第十三篇】：jQuery

公告