week14_day1(玩转JQuery)

首页 > 代码库 > week14_day1(玩转JQuery)

2024-08-24 00:17:53 221人阅读

一、JQuery简介

　　1、JQuery是什么？

- jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
- jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
- jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

　　2、什么是JQuery对象？

- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $("#test").html();

　　比如：

　　　　$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

　　　　这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

　　　　虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

　　　　约定：

　　　　　　如果获取的是 jQuery 对象, 那么要在变量前面加上$.

　　　　　　var $variable = jQuery 对象

　　　　　　var variable = DOM 对象

　　　　基本语法：

　　　　　　$(selector).action()

二、寻找元素（重要的选择器和筛选器）

　　1、选择器

- 基本选择器　$("*") $("#id") $(".class") $("element") $(".class,p,div")
- 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
- 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
- 属性选择器 $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
- 表单选择器 $("[type=‘text‘]")----->$(":text") 注意只适用于input标签

　　2、筛选器

- 过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
- 查找筛选器 $("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()

　　3、实例

- 实现左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>

    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>
          function show(self){
              $(self).next().removeClass("hide");
              $(self).parent().siblings().children(".con").addClass("hide");

          }
    </script>
    <style>
          .menu{
              height: 500px;
              width: 30%;
              background-color: gainsboro;
              float: left;
          }
          .content{
              height: 500px;
              width: 70%;
              background-color: rebeccapurple;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: #425a66;
             color: forestgreen;}


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>

</body>
</html>

- 实现tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>
           function tab(self){
               var index=$(self).attr("xxx");
               $("#"+index).removeClass("hide").siblings().addClass("hide");
               $(self).addClass("current").siblings().removeClass("current");
           }
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
              <li xxx="c2" onclick="tab(this);">菜单二</li>
              <li xxx="c3" onclick="tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>

      </div>
</body>
</html>

三、操作元素（属性CSS和文档处理）

　　1、属性操作　　　　　

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

　　$(".test").attr("lh") $(".test").attr("lh","s")

　　$(".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="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>

             function selectall(){

                 $("table :checkbox").prop("checked",true)
             }
             function che(){

                 $("table :checkbox").prop("checked",false)
             }

             function reverse(){

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

    </script>
</head>
<body>
     <button onclick="selectall();">全选</button>
     <button onclick="che();">取消</button>
     <button onclick="reverse();">反选</button>

     <table border="1">
         <tr>
             <td><input type="checkbox"/></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"/></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"/></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"/></td>
             <td>444</td>
         </tr>
     </table>

</body>
</html>

- - 实现模态对话框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>批量编辑</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body {
              font-family: ‘Open Sans‘, sans-serif;
              font-weight: 300;
              line-height: 1.42em;
              color:rebeccapurple;
              background-color:goldenrod;
            }

            h1 {
              font-size:3em;
              font-weight: 300;
              line-height:1em;
              text-align: center;
              color: #4DC3FA;
            }
            .blue {
                color: #185875;
            }
            .yellow {
                color: #FFF842;
                }

            /*!*弹出层罩子*!*/
            #full {
                background-color:gray;
                left:0;
                opacity:0.7;
                position:absolute;
                top:0;
                filter:alpha(opacity=30);
            }

            .modified {
                background-color: #1F2739;
                border:3px solid whitesmoke;
                height:400px;
                left:50%;
                margin:-200px 0 0 -200px;
                padding:1px;
                position:fixed;
                top:50%;
                width:400px;
                display:none;
            }
            li {
                list-style: none;
                margin: 20px 0 0 50px;
                color: #FB667A;
            }
            input[type="text"] {
              padding: 10px;
              border: solid 1px #dcdcdc;
            }

            .iputbutton {
                margin: 60px 0 0 50px;
                color: whitesmoke;
                background-color: #FB667A;
                height: 30px;
                width: 100px;
                border: 1px dashed;

            }




            .container th h1 {
                font-weight: bold;
                font-size: 1em;
                  text-align: left;
                  color: #185875;
            }

            .container td {
                font-weight: normal;
                font-size: 1em;
            }

            .container {

                width: 80%;
                margin: 0 auto;

            }

            .container td, .container th {
                padding-bottom: 2%;
                padding-top: 2%;
                  padding-left:2%;
            }

            /*单数行*/
            .container tr:first-child {
                background-color: red;
            }

            /*偶数行*/
            .container tr:not(first-child){
                  background-color: cyan;
            }

            .container th {
                background-color: #1F2739;
            }

            .container td:last-child {
                color: #FB667A;
            }
            /*鼠标进过行*/
            .container tr:hover {
               background-color: #464A52;
            }
            /*鼠标进过列*/
            .container td:hover {
              background-color: #FB667A;
              color: #403E10;
              font-weight: bold;
              transform: translate3d(5px, -5px, 0);
}

        </style>
        <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
        <script>
            //点击【编辑】显示

$(function () {


    $("table[name=host] tr:gt(0) td:last-child").click(function (event) {

        alert("234");

        $(".modified").data(‘current-edit-obj‘, $(this));

        $(".modified,#full").show();

        var hostname = $(this).siblings("td[name=hostname]").text();
        $(".modified #hostname").val(hostname);
        var ip = $(this).siblings("td[name=ip]").text();
        $(".modified #ip").val(ip);
        var port = $(this).siblings("td[name=port]").text();
        $(".modified #port").val(port);
    });
    //取消编辑
    $(".modified #cancel").bind("click", function () {
        $(".modified,#full").hide();
    });

//    确定修改
    $(".modified #ok").bind("click", function (event) {
        var check_status = true;
        var ths = $(".modified").data(‘current-edit-obj‘);
        var hostname = $(".modified #hostname").val().trim();
        var ip = $(".modified #ip").val().trim();
        var port = $(".modified #port").val().trim();
        var port = parseInt(port);
        console.log(port);
        //        端口为空设置为22
        if (isNaN(port)) {
            alert("您没有设置正常的SSH端口号，将采用默认22号端口");
            var port = 22;
        }else if ( port > 65535) {
        //            如果端口不是一个数字 或者端口大于65535
            var check_status = false;
            $(".modified #port").css("border-color","red");
            alert("端口号超过范围!")
        };
        // 主机和ip不能是空
        if ( hostname == ""){
            var check_status = false;
            $(".modified #hostname").css("border-color","red");
        }else if (ip == "") {
            var check_status = false;
            $(".modified #ip").css("border-color","red");
        };
        if (check_status == false){
            return false;
        }else{
            //$(this).css("height","60px")   为什么不用$(this),而用$()
            $(ths).siblings("td[name=hostname]").text(hostname);
            $(ths).siblings("td[name=ip]").text(ip);
            $(ths).siblings("td[name=port]").text(port);
            $(".modified,#full").hide();
        };

    });

});

        </script>
    </head>
    <body>
        <h1>
            <span class="blue"><</span>Homework1<span class="blue">></span> <span class="yellow">HostList</span>
        </h1>
        <div id="full">
            <div class="modified">
                <li>主机名：<input id="hostname" type="text" value="" />*</li>
                <li>ip地址：<input id="ip" type="text" value="" />*</li>
                <li>端口号：<input id="port" type="text" value="" />[0-65535]</li>
                    <div id="useraction">
                     <input class="iputbutton" type="button" name="确定" id="ok" value="http://www.mamicode.com/确定"/>
                    <input class="iputbutton" type="button" name="取消" id="cancel" value="http://www.mamicode.com/取消"/>
                    </div>
            </div>
        </div>
        <table class="container" name="host">
            <tr>
                <th><h1>主机名</h1></th>
                <th><h1>IP地址</h1></th>
                <th><h1>端口</h1></th>
                <th><h1>操作</h1></th>

            </tr>
            <tr>
                <td name="hostname">web01</td>
                <td name="ip">192.168.2.1</td>
                <td name="port">22</td>
                <td>编辑 </td>
            </tr>
            <tr>
                <td name="hostname">web02</td>
                <td name="ip">192.168.2.2</td>
                <td name="port">223</td>
                <td>编辑 </td>
            </tr>
            <tr>
                <td name="hostname">web03</td>
                <td name="ip">192.168.2.3</td>
                <td name="port">232</td>
                <td>编辑 </td>
            </tr>
            <tr>
                <td name="hostname">web04</td>
                <td name="ip">192.168.2.4</td>
                <td name="port">232</td>
                <td>编辑 </td>
            </tr>
        </table>

    </body>
</html>

　　2、CSS操作

- 样式 css("{color:‘red‘,backgroud:‘blue‘}")
- 位置 offset() position() scrollTop() scrollLeft()
- 尺寸 height() width()

　　　　实例：

　　　　　　实现返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>
          window.onscroll=function(){

              var current=$(window).scrollTop();
              console.log(current);
              if (current>100){

                  $(".returnTop").removeClass("hide")
              }
              else {
              $(".returnTop").addClass("hide")
          }
          };
          
           function returnTop(){
               $(window).scrollTop(0)
           }

    </script>
    <style>
        body{
            margin: 0;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: greenyellow;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 20px;
            overflow: auto;
            width: 500px;
            padding-left: 10px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 300px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
         <p>听见了吗</p>
         <p>外面的雨还在滴滴答答</p>
         <p>家，还是那个</p>
         <p>当初我们幻想的家吗</p>
         <p>不要在问，不要再问</p>
         <p>我只是不想说话</p>
         <p>张嘴比较假</p>
         <p>沉默也许也是个笑话</p>
         <p>要不要跳一段hip</p>
         <p>又或是唱一首画沙</p>
         <p>傻孩子，别怕</p>
         <p>看看那迎风招展的太阳花</p>
         <p>依旧婆娑，气质高雅</p>
     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>

　　　　　　实现滚动菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="http://www.mamicode.com/#">
                    <img src="http://www.mamicode.com/images/3.jpg">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="http://www.mamicode.com/#">首页</a>
                    </li>
                    <li>
                        <a  href="http://www.mamicode.com/#">功能一</a>
                    </li>
                    <li>
                        <a  href="http://www.mamicode.com/#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</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 type="text/javascript" src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">


     window.onscroll=function(){
         var ws=$(window).scrollTop()
         if (ws>50){
             $(".catalog").addClass("fixed")
         }
         else {
             $(".catalog").removeClass("fixed")
         }
         $(".content").children("").each(function(){

             var offtop=$(this).offset().top;
             var total=$(this).height()+offtop;

             if (ws>offtop && ws<total){

                 if($(window).height()+$(window).scrollTop()==$(document).height()){
                     var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")
                     console.log(index)
                 target=‘div[auto-to="‘+index+‘"]‘;
                 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")

                 }
                 else{
                      var index=$(this).attr("menu");
                 target=‘div[auto-to="‘+index+‘"]‘;
                 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
                 }
             }
         })
     }

    </script>

</body>
</html>

　　3、文档处理

- 内部处理 prepend() prependTo()

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

- 外部插入 before() insertBefore() after insertAfter() replaceWith() remove() empty() clone()

　　4、事件

- $(document).ready(function(){}) -----------> $(function(){})
- $("p").click(function(){})
  
  $("p").bind("click",function(){})
  
  $("ul").delegate("li","click",function(){})

　　　　实例：

　　　　　　实现拖动面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
</head>
<body>
    <div style="border: 1px solid red;width: 600px;position: absolute">
        <div class="title" style="background-color:black;height: 40px;color: white">标题</div>
        <div class="content" style="height:300px">内容</div>
    </div>

    <script>
        $(".title").mouseover(function(){
            $(this).css("cursor","move");        // 改变鼠标的形态
        }).mousedown(function(event){
                var start_x=event.screenX;       // 监听鼠标按下，获x，y坐标
                var start_y=event.screenY;

                var parent_left=$(this).parent().offset().left;   // 获取最外边大div的左边距
                var parent_top=$(this).parent().offset().top;    // 获取最外边大div的上边距
                $(this).on("mousemove",function(e){          // 监听鼠标移动，获取新的x，y坐标
                    var new_x= e.screenX;
                    var new_y= e.screenY;

                    var new_parent_x=parent_left+(new_x-start_x);    // 获取最外边大div的坐标
                    var new_parent_y=parent_top+(new_y-start_y);

                    $(this).parent().css("left",new_parent_x+"px");    // 将最外边大div移动
                    $(this).parent().css("top",new_parent_y+"px");
                }).mouseup(function(){
                    $(this).off("mousemove");           // 监听鼠标抬起，解除鼠标移动
                })
                })
    </script>
</body>
</html>

　　5、动画效果

　　　　实例：

　　　　　　实现隐藏与显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>

        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
            });
            $("#show").click(function(){
                $("p").show(1000);
            });

        //用于切换被选元素的 hide() 与 show() 方法。
            $("#toggle").click(function(){
                $("p").toggle();
            });

         for (var i= 0;i<7;i++){
        // 颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
                    $("<div>").appendTo(document.body);
                }
                $("div").click(function(){
                  $(this).hide(2000);
                });
        });

    </script>
</head>
<body>

    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

</body>
</html>

　　　　　　实现淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function(){
        $("#in").click(function(){
           $("#id1").fadeIn(1000);
           $("#id2").fadeIn(1000);
           $("#id3").fadeIn(1000);
    
       });
        $("#out").click(function(){
           $("#id1").fadeOut(1000);
           $("#id2").fadeOut(1000);
           $("#id3").fadeOut(1000);
    
       });
        $("#toggle").click(function(){
           $("#id1").fadeToggle(1000);
           $("#id2").fadeToggle(1000);
           $("#id3").fadeToggle(1000);
    
       });
        $("#fadeto").click(function(){
           $("#id1").fadeTo(1000,0.4);
           $("#id2").fadeTo(1000,0.5);
           $("#id3").fadeTo(1000,0);
    
       });
    });
        
    </script>

</head>
<body>

      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
      <div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
      <div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>

</body>
</html>

　　　　　　实现京东轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/jquery-3.1.1.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .img li {
            list-style-type: none;
            position: absolute;
            left: 0;
            top: 0;

        }

        a {
            text-decoration: none;
            color: white;
        }

        .head {
            width: auto;
            height: 100px;
            border: 1px solid red;
        }

        .m {
            width: auto;
            height: 500px;
            margin-top: 10px;
            border: 1px solid black;
        }

        .foot {
            width: auto;
            height: 150px;
            margin-top: 10px;
            border: 1px solid darkgreen;
        }

        .left {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            display: inline-block;
        }

        .middle {
            width: 790px;
            height: 340px;
            border: 1px solid black;
            display: inline-block;
            position: absolute;
            left: 310px;
            top: 113px;
        }

        .right {
            width: 240px;
            height: 500px;
            display: inline-block;
            border: 1px solid #2459a2;
            float: right;
        }

        .btn {
            position: absolute;
            top: 50%;
            margin-top: -30px;
            width: 30px;
            height: 50px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 48px;
            font-size: 40px;
            display: none;
            opacity: 0.3;
        }

        .middle_left {
            left: 0;
        }

        .middle_right {
            right: 0;
        }


        .num {
            position: absolute;
            left: 0;
            bottom: 10px;
            text-align: center;
            width: 100%;
        }

        .num li {
            width: 15px;
            height: 15px;
            background-color: #CBCBCB;
            border-radius: 50%;
            display: inline-block;
            margin: 0 5px;
            opacity: 0.7;
        }

        .num li.active {
            background-color: red;
        }

        .hide {
            display: none;
        }

    </style>

</head>
<body>
    <div class="head"></div>
    <div class="m">
        <div class="left"></div>
        <div class="middle">
            <div class="middle_in">
                <ul class="img">
                    <li><a href=""><img src="http://www.mamicode.com/images/1.jpg"></a></li>
                    <li><a href=""><img src="http://www.mamicode.com/images/2.jpg"></a></li>
                    <li><a href=""><img src="http://www.mamicode.com/images/3.jpg"></a></li>
                    <li><a href=""><img src="http://www.mamicode.com/images/4.jpg"></a></li>
                    <li><a href=""><img src="http://www.mamicode.com/images/5.jpg"></a></li>
                </ul>

                <ul class="num">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>


                <div class="btn middle_left"><</div>
                <div class="btn middle_right">></div>
            </div>
        </div>
        <div class="right"></div>
    </div>
    <div class="foot"></div>
    
    <script>

        var t=setInterval(func,2000);
    
        $(".middle_in").mouseover(function(){
            $(".btn").css("display","block");
            clearInterval(t);
        }).mouseout(function(){
            $(".btn").css("display","none").css("opacity","0.3");
            t=setInterval(func,2000);
        });
    
        $(".btn").mouseover(function(){
           $(this).css("opacity","0.8");
        });
    
        var index=0;
        function func(){
            $(".img li").eq(index).removeClass("hide").siblings().addClass("hide");
            $(".num li").eq(index).addClass("active").siblings().removeClass("active");
            if(index<($(".img li").length-1)){
                index++;
            }else{
                index=0;
            }
        }
    
        $(".middle_right").click(function(){
            if(index<$(".img li").length-1){
                index++;
            }else{
                index=0;
            }
            $(".img li").eq(index).removeClass("hide").siblings().addClass("hide");
            $(".num li").eq(index).addClass("active").siblings().removeClass("active");
        });
    
        $(".middle_left").click(function(){
             if(index==0){
                index=$(".img li").length-1;
            }else{
                index--;
            }
            $(".img li").eq(index).removeClass("hide").siblings().addClass("hide");
            $(".num li").eq(index).addClass("active").siblings().removeClass("active");
        });

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

　　6、扩展（插件机制）　　

- jquery.extend({})
- jquery.fn.extend({})

week14_day1(玩转JQuery)

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > week14_day1(玩转JQuery)