week14_day1(玩转JQuery)

一、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({})
时间： 2024-10-10 13:00:56

week14_day1(玩转JQuery)的相关文章

十分钟玩转 jQuery、实例大全(参考自博主索宁)

十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里不再细说,详细猛戳这里. 基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素,从 0 开始 $(&q

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

玩遍jquery

一 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

网站前端_jQuery-基础入门.玩转jQuery基本/层次/过滤/表单选择器?

对比选择: 1. CSS依靠CSS选择器使得网页的结构和表现样式完全分离,CSS选择器能轻松定位并修改指定元素样式,CSS选择器包括标签选择器(以文档元素作为选择器),ID选择器(以文档元素的唯一标识ID作为选择器),类选择器(以文档元素的class作为选择器),群组选择器(多个选择器应用同样的样式规则),后代选择器(元素X的任意后代元素Y),通配选择器(以文档的所有元素作为选择器),伪类选择器(以元素特定行为作为选择器),子选择器(元素X的直接子属元素Y),兄弟选择器(元素X的直属兄弟元素Y)

十分钟玩转 jQuery、实例大全

一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里不再细说,详细猛戳这里. 基本筛选器

带你玩转 jQuery

一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用 书写规则 支持链式操作:(对同一元素可以同时进行多次操作.) 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里

前端程序员应该知道的 15 个 jQuery 小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高度相同 在新标签页/窗口打开外部链接 通过文本查找元素 在改变Visibility时触发 AJAX调用错误处理 链式插件调用 返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top'

15个jQuery小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

jQuery需要掌握的技巧

检查 jQuery 是否加载 在使用 jQuery 进行任何操作之前,你需要先确认它已经加载: if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); } 返回顶部按钮 利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果: // 返回顶部 $('a