码迷，mamicode.com
首页 > Web开发 > 详细

week14_day1(玩转JQuery)

时间：2016-11-29 13:59:51      阅读：259      评论：0      收藏：0      [点我收藏+]

标签：checkbox   产生   trim   scrollto   ace   get   sel   white   first   

一、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="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="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="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="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="确定"/>
                    <input class="iputbutton" type="button" name="取消" id="cancel" value="取消"/>
                    </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="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="#">
                    <img src="images/3.jpg">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</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="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="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="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="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="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="images/1.jpg"></a></li>
                    <li><a href=""><img src="images/2.jpg"></a></li>
                    <li><a href=""><img src="images/3.jpg"></a></li>
                    <li><a href=""><img src="images/4.jpg"></a></li>
                    <li><a href=""><img src="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)

标签：checkbox   产生   trim   scrollto   ace   get   sel   white   first   

原文地址：http://www.cnblogs.com/pythonlh/p/6112390.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！