随笔 - 1 文章 - 81 评论 - 30

前端基础之jquery

知识预览

回到顶部

一 jQuery是什么？

［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

回到顶部

二什么是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 对象

 $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

参考：http://jquery.cuishifeng.cn/

三寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

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

3.1.2 层级选择器

1	`$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")`

3.1.3 基本筛选器　　

1	`$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")`

3.1.4 属性选择器

1	`$('[id="div1"]') $('["alex="sb"][id]')`

3.1.5 表单选择器

1	`$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")`

3.1.6 表单属性选择器

   :enabled

    :disabled

    :checked

    :selected

 <body>

 <form>

     <input type="checkbox" value="123" checked>

     <input type="checkbox" value="456" checked>

   <select>

       <option value="1">Flowers</option>

       <option value="2" selected="selected">Gardens</option>

       <option value="3" selected="selected">Trees</option>

       <option value="3" selected="selected">Trees</option>

   </select>

 </form>

 <script src="jquery.min.js"></script>

 <script>

     // console.log($("input:checked").length);     // 2

     // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1

     $("input:checked").each(function(){

         console.log($(this).val())

     })

 </script>

 </body>

3.2 筛选器

3.2.1 过滤筛选器

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

3.2.2 查找筛选器　　

 查找子标签：         $("div").children(".test")      $("div").find(".test")  

  向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()

                     $(".test").nextUntil() 

  向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()

                     $("div").prevUntil()

  查找所有兄弟标签：    $("div").siblings()  

  查找父标签：         $(".test").parent()              $(".test").parents()

                     $(".test").parentUntil()

四操作元素(属性，css，文档处理)

4.1 事件

页面载入

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

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

事件绑定

//语法:  标签对象.事件(函数)

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

事件委派：

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

<hr>

<button id="add_li">Add_li</button>

<button id="off">off</button>

<script src="jquery.min.js"></script>

<script>

    $("ul li").click(function(){

        alert(123)

    });

    $("#add_li").click(function(){

        var $ele=$("<li>");

        $ele.text(Math.round(Math.random()*10));

        $("ul").append($ele)

    });

//    $("ul").on("click","li",function(){

//        alert(456)

//    })

     $("#off").click(function(){

         $("ul li").off()

     })

</script>

事件切换

hover事件：

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .test{

             width: 200px;

             height: 200px;

             background-color: wheat;

         }

     </style>

 </head>

 <body>

 <div class="test"></div>

 </body>

 <script src="jquery.min.js"></script>

 <script>

 //    function enter(){

 //        console.log("enter")

 //    }

 //    function out(){

 //        console.log("out")

 //    }

 // $(".test").hover(enter,out)

 $(".test").mouseenter(function(){

         console.log("enter")

 });

 $(".test").mouseleave(function(){

         console.log("leave")

     });

 </script>

 </html>

4.2 属性操作

 --------------------------CSS类

 $("").addClass(class|fn)

 $("").removeClass([class|fn])

 --------------------------属性

 $("").attr();

 $("").removeAttr();

 $("").prop();

 $("").removeProp();

 --------------------------HTML代码/文本/值

 $("").html([val|fn])

 $("").text([val|fn])

 $("").val([val|fn|arr])

 ---------------------------

 $("#c1").css({"color":"red","fontSize":"35px"})

attr方法使用：

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此

//需要使用prop方法去操作才能获得正确的结果。

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    true

    console.log($("#chk1").prop("checked"));//false

    console.log($("#chk2").prop("checked"));//true

    console.log($("#chk1").attr("checked"));//undefined

    console.log($("#chk2").attr("checked"));//checked

</script>

4.3 each循环

我们知道，

1	`$("p").css("color","red")`

是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦

jquery支持两种循环方式：

方式一

格式：$.each(obj,fn)

li=[10,20,30,40];

dic={name:"yuan",sex:"male"};

$.each(li,function(i,x){

    console.log(i,x)

});

方式二

格式：$("").each(fn)

$("tr").each(function(){

    console.log($(this).html())

})

其中,$(this)代指当前循环标签。

each扩展

 /*

         function f(){

         for(var i=0;i<4;i++){

             if (i==2){

                 return

             }

             console.log(i)

         }

     }

     f();  // 这个例子大家应该不会有问题吧!!!

 //-----------------------------------------------------------------------

     li=[11,22,33,44];

     $.each(li,function(i,v){

         if (v==33){

                 return ;   //  ===试一试 return false会怎样?

             }

             console.log(v)

     });

 //------------------------------------------

     // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行

     //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,

     //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:

          for(var i in obj){

              ret=func(i,obj[i]) ;

              if(ret==false){

                  return ;

              }

          }

     // 这样就很灵活了:

     // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true

     // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

 // ---------------------------------------------------------------------

4.4 文档节点处理

 //创建一个标签对象

     $("<p>")

 //内部插入

     $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

     $("").appendTo(content)       ----->$("p").appendTo("div");

     $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

     $("").prependTo(content)      ----->$("p").prependTo("#foo");

 //外部插入

     $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

     $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

     $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

     $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

 //替换

     $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

 //删除

     $("").empty()

     $("").remove([expr])

 //复制

     $("").clone([Even[,deepEven]])

4.5 动画效果

显示隐藏

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-2.1.4.min.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();

     });

 })

     </script>

     <link type="text/css" rel="stylesheet" href="style.css">

 </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-2.1.4.min.js"></script>

     <script>

     $(document).ready(function(){

      $("#slideDown").click(function(){

          $("#content").slideDown(1000);

      });

       $("#slideUp").click(function(){

          $("#content").slideUp(1000);

      });

       $("#slideToggle").click(function(){

          $("#content").slideToggle(1000);

      })

   });

     </script>

     <style>

         #content{

             text-align: center;

             background-color: lightblue;

             border:solid 1px red;

             display: none;

             padding: 50px;

         }

     </style>

 </head>

 <body>

     <div id="slideDown">出现</div>

     <div id="slideUp">隐藏</div>

     <div id="slideToggle">toggle</div>

     <div id="content">helloworld</div>

 </body>

 </html>

淡入淡出

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-2.1.4.min.js"></script>

     <script>

     $(document).ready(function(){

    $("#in").click(function(){

        $("#id1").fadeIn(1000);

    });

     $("#out").click(function(){

        $("#id1").fadeOut(1000);

    });

     $("#toggle").click(function(){

        $("#id1").fadeToggle(1000);

    });

     $("#fadeto").click(function(){

        $("#id1").fadeTo(1000,0.4);

    });

 });

     </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>

 </body>

 </html>

回调函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

</head>

<body>

  <button>hide</button>

  <p>helloworld helloworld helloworld</p>

 <script>

   $("button").click(function(){

       $("p").hide(1000,function(){

           alert($(this).html())

       })

   })

    </script>

</body>

</html>

4.6 css操作

css位置操作

        $("").offset([coordinates])

        $("").position()

        $("").scrollTop([val])

        $("").scrollLeft([val])

示例1：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .test1{

             width: 200px;

             height: 200px;

             background-color: wheat;

         }

     </style>

 </head>

 <body>

 <h1>this is offset</h1>

 <div class="test1"></div>

 <p></p>

 <button>change</button>

 </body>

 <script src="jquery-3.1.1.js"></script>

 <script>

     var $offset=$(".test1").offset();

     var lefts=$offset.left;

     var tops=$offset.top;

     $("p").text("Top:"+tops+" Left:"+lefts);

     $("button").click(function(){

         $(".test1").offset({left:200,top:400})

     })

 </script>

 </html>

示例2:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

         }

         .box1{

             width: 200px;

             height: 200px;

             background-color: rebeccapurple;

         }

         .box2{

             width: 200px;

             height: 200px;

             background-color: darkcyan;

         }

         .parent_box{

              position: relative;

         }

     </style>

 </head>

 <body>

 <div class="box1"></div>

 <div class="parent_box">

     <div class="box2"></div>

 </div>

 <p></p>

 <script src="jquery-3.1.1.js"></script>

 <script>

     var $position=$(".box2").position();

     var $left=$position.left;

     var $top=$position.top;

     $("p").text("TOP:"+$top+"LEFT"+$left)

 </script>

 </body>

 </html>

示例3:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

         }

         .returnTop{

             height: 60px;

             width: 100px;

             background-color: peru;

             position: fixed;

             right: 0;

             bottom: 0;

             color: white;

             line-height: 60px;

             text-align: center;

         }

         .div1{

             background-color: wheat;

             font-size: 5px;

             overflow: auto;

             width: 500px;

             height: 200px;

         }

         .div2{

             background-color: darkgrey;

             height: 2400px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

      <div class="div1 div">

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

            <h1>hello</h1>

      </div>

      <div class="div2 div"></div>

      <div class="returnTop hide">返回顶部</div>

  <script src="jquery-3.1.1.js"></script>

     <script>

          $(window).scroll(function(){

              var current=$(window).scrollTop();

               console.log(current);

               if (current>100){

                   $(".returnTop").removeClass("hide")

               }

               else {

               $(".returnTop").addClass("hide")

           }

          });

             $(".returnTop").click(function(){

                 $(window).scrollTop(0)

             });

     </script>

 </body>

 </html>

尺寸操作

        $("").height([val|fn])

        $("").width([val|fn])

        $("").innerHeight()

        $("").innerWidth()

        $("").outerHeight([soptions])

        $("").outerWidth([options])

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

         }

         .box1{

             width: 200px;

             height: 200px;

             background-color: wheat;

             padding: 50px;

             border: 50px solid rebeccapurple;

             margin: 50px;

         }

     </style>

 </head>

 <body>

 <div class="box1">

     DIVDIDVIDIV

 </div>

 <p></p>

 <script src="jquery-3.1.1.js"></script>

 <script>

     var $height=$(".box1").height();

     var $innerHeight=$(".box1").innerHeight();

     var $outerHeight=$(".box1").outerHeight();

     var $margin=$(".box1").outerHeight(true);

     $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)

 </script>

 </body>

 </html>

扩展方法 (插件机制)

jQuery.extend(object)

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。

在jQuery命名空间上增加两个函数:

 <script>

     jQuery.extend({

       min: function(a, b) { return a < b ? a : b; },

       max: function(a, b) { return a > b ? a : b; }

 });

     jQuery.min(2,3); // => 2

     jQuery.max(4,5); // => 5

 </script>

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

增加两个插件方法：

<body>

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

<script src="jquery.min.js"></script>

<script>

    jQuery.fn.extend({

      check: function() {

         $(this).attr("checked",true);

      },

      uncheck: function() {

         $(this).attr("checked",false);

      }

    });

    $(":checkbox:gt(0)").check()

</script>

</body>

实例练习

左侧菜单　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>left_menu</title>

    <style>

          .menu{

              height: 500px;

              width: 20%;

              background-color: gainsboro;

              text-align: center;

              float: left;

          }

          .content{

              height: 500px;

              width: 80%;

              background-color: darkgray;

              float: left;

          }

         .title{

             line-height: 50px;

             background-color: wheat;

             color: rebeccapurple;}

         .hide{

             display: none;

         }

    </style>

</head>

<body>

<div class="outer">

    <div class="menu">

        <div class="item">

            <div class="title">菜单一</div>

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单二</div>

            <div class="con hide">

                <div>222</div>

                <div>222</div>

                <div>222</div>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单三</div>

            <div class="con hide">

                <div>333</div>

                <div>333</div>

                <div>333</div>

            </div>

        </div>

    </div>

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

</div>

<script src="jquery.min.js"></script>

<script>

           $(".item .title").mouseover(function () {

                $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

//                $(this).next().removeClass("hide");

//                $(this).parent().siblings().children(".con").addClass("hide");

           })

</script>

</body>

</html>

Tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tab</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .tab_outer{

            margin: 20px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            /*border: 1px solid red;*/

            line-height: 40px;

            text-align: center;

        }

        .menu li{

            display: inline-block;

            margin-left: 14px;

            padding:5px 20px;

        }

        .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: #2868c8;

            color: white;

            border-top: solid 2px rebeccapurple;

        }

    </style>

</head>

<body>

      <div class="tab_outer">

          <ul class="menu">

              <li relation="c1" class="current">菜单一</li>

              <li relation="c2" >菜单二</li>

              <li relation="c3">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

      </div>

</body>

<script src="jquery.min.js"></script>

    <script>

          $(".menu li").click(function(){

               var index=$(this).attr("relation");

               $("#"+index).removeClass("hide").siblings().addClass("hide");

               $(this).addClass("current").siblings().removeClass("current");

          });

    </script>

</html>

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

        }

        .back{

            background-color: wheat;

            height: 2000px;

        }

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: darkgray;

            opacity: 0.4;

        }

        .hide{

            display: none;

        }

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: white;

        }

    </style>

</head>

<body>

<div class="back">

    <input id="ID1" type="button" value="click" onclick="action1(this)">

</div>

<div class="shade hide"></div>

<div class="models hide">

    <input id="ID2" type="button" value="cancel" onclick="action2(this)">

</div>

<script src="jquery.min.js"></script>

<script>

    function action1(self){

        $(self).parent().siblings().removeClass("hide");

    }

    function action2(self){

        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

    }

</script>

</body>

</html>

复制样式条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

            <div class="outer">

                <div class="item">

                        <input type="button" value="+">

                        <input type="text">

                </div>

            </div>

<script src=jquery.min.js></script>

    <script>

            function add(self){

                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加

                 var $clone_obj=$(self).parent().clone();

                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");

                 $(self).parent().parent().append($clone_obj);

            }

           function removed(self){

               $(self).parent().remove()

           }

/*

        $("[value='+']").click(function(){

             var $clone_obj=$(this).parent().clone();

                 $clone_obj.children(":button").val("-").attr("class","mark");

                 $(this).parent().parent().append($clone_obj);

        });

        $(".outer").on("click",".item .mark",function(){

            console.log($(this));  // $(this):  .item .mark标签

            $(this).parent().remove()

        })

*/

    </script>

</body>

</html>

注册验证

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form class="Form" id="form">

    <p><input class="v1" type="text" name="username" mark="用户名"></p>

    <p><input class="v1" type="text" name="email" mark="邮箱"></p>

    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery.min.js"></script>

<script>

    $("#form :submit").click(function(){

          flag=true;

          $("#form .v1").each(function(){

          $(this).next("span").remove();// 防止对此点击按钮产生多个span标签

          var value=$(this).val();

          if (value.trim().length==0){

                 var mark=$(this).attr("mark");

                 var ele=document.createElement("span");

                 ele.innerHTML=mark+"不能为空!";

                 $(this).after(ele);

                 $(ele).prop("class","error");// DOM对象转换为jquery对象

                 flag=false;

                 return false ; //-------->引出$.each的return false注意点

            }

        });

        return flag

    });

</script>

</body>

</html>

拖动面板

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">

        <div id="title" style="background-color: black;height: 40px;color: white;">

            标题

        </div>

        <div style="height: 300px;">

            内容

        </div>

    </div>

<script type="text/javascript" src="jquery.min.js"></script>

<script>

    $(function(){

        // 页面加载完成之后自动执行

        $('#title').mouseover(function(){

            $(this).css('cursor','move');

        }).mousedown(function(e){

            //console.log($(this).offset());

            var _event = e || window.event;

            // 原始鼠标横纵坐标位置

            var ord_x = _event.clientX;

            var ord_y = _event.clientY;

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

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

            $(this).on('mousemove', function(e){

                var _new_event = e || window.event;

                var new_x = _new_event.clientX;

                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);

                var y = parent_top + (new_y - ord_y);

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

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

            })

        }).mouseup(function(){

            $(this).off('mousemove');

        });

    })

</script>

</body>

</html>

轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="jquery-3.1.1.js"></script>

    <title>Title</title>

    <style>

            .outer{

                width: 790px;

                height: 340px;

                margin: 80px auto;

                position: relative;

            }

            .img li{

                 position: absolute;

                 list-style: none;

                 top: 0;

                 left: 0;

                 display: none;

            }

           .num{

               position: absolute;

               bottom: 18px;

               left: 270px;

               list-style: none;

           }

           .num li{

               display: inline-block;

               width: 18px;

               height: 18px;

               background-color: white;

               border-radius: 50%;

               text-align: center;

               line-height: 18px;

               margin-left: 4px;

           }

           .btn{

               position: absolute;

               top:50%;

               width: 30px;

               height: 60px;

               background-color: lightgrey;

               color: white;

               text-align: center;

               line-height: 60px;

               font-size: 30px;

               opacity: 0.7;

               margin-top: -30px;

               display: none;

           }

           .left{

               left: 0;

           }

           .right{

               right: 0;

           }

          .outer:hover .btn{

              display: block;

          }

        .num .active{

            background-color: red;

        }

    </style>

</head>

<body>

      <div class="outer">

          <ul class="img">

              <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>

              <li><a href=""><img src="img/2.jpg" alt=""></a></li>

              <li><a href=""><img src="img/3.jpg" alt=""></a></li>

              <li><a href=""><img src="img/4.jpg" alt=""></a></li>

              <li><a href=""><img src="img/5.jpg" alt=""></a></li>

              <li><a href=""><img src="img/6.jpg" alt=""></a></li>

          </ul>

          <ul class="num">

              <!--<li class="active"></li>-->

              <!--<li></li>-->

              <!--<li></li>-->

              <!--<li></li>-->

              <!--<li></li>-->

              <!--<li></li>-->

          </ul>

          <div class="left  btn"> < </div>

          <div class="right btn"> > </div>

      </div>

<script src="jquery-3.1.1.js"></script>

<script>

    var i=0;

//  通过jquery自动创建按钮标签

    var img_num=$(".img li").length;

    for(var j=0;j<img_num;j++){

        $(".num").append("<li></li>")

    }

    $(".num li").eq(0).addClass("active");

// 手动轮播

    $(".num li").mouseover(function () {

        i=$(this).index();

        $(this).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });

// 自动轮播

    var c=setInterval(GO_R,1500);

    function GO_R() {

        if(i==img_num-1){

            i=-1

        }

         i++;

         $(".num li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    function GO_L() {

        if(i==0){

            i=img_num

        }

         i--;

         $(".num li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程

    }

    $(".outer").hover(function () {

        clearInterval(c)

    },function () {

        c=setInterval(GO_R,1500)

    });

// button 加定播

    $(".right").click(GO_R);

    $(".left").click(GO_L)

</script>

</body>

</html>

python_day15_jquery的更多相关文章

随机推荐

《深入理解java虚拟机》读书笔记——垃圾收集与内存分配策略
可回收判定两种算法引用计数法(Reference Counting):引用为0时可回收. 可达性分析法(Reachability Analysis): 从GCRoots对象到这个对象不可达. GCR ...
nodeJs 控制台打印中文显示为Unicode解决方案
在使用 NodeJs 采集其他网站网页时遇到的,在获取源代码后发现里面原来的中文被转成了 Unicode(UTF8) 编码的中文(如:&# ［xxx］),这当然不是真正想要的中文实体解决方案 ...
junit,面向切面开发(动态代理),工厂设计模式,数据库连接池
1.junit junit又叫单元测试,好处是能进行批量测试,而且如果方法出现了问题能立刻定位出出现问题的方法,还有一个好处是感官效果很好,如果方法都通过了则显示绿条,否则显示红条 TestCase. ...
Lombok使用简介
1.在maven中加入Lombok引入 2.在开发环境中加入Lombok插件 3.在实体类的类名上增加注释@Date即可使用所有get,set方法
每日算法之递推排序(P1866 编号)
兔子也是数字控:每个兔子都有自己喜欢的数字区间,找出能让所有兔子都满意的组合. 将所有兔子喜欢的序号按从小到大排序,此时如果小序号的兔子选择了一个数字,则之后的兔子只要排除排在它之前的兔子数(由于已经 ...
springboot+vue前后端分离，nginx代理配置 tomcat 部署war包详细配置
1.做一个小系统,使用了springboot+vue 基础框架参考这哥们的,直接拿过来用,链接https://github.com/smallsnail-wh/interest 前期的开发环境搭建就不 ...
用python发送短消息(基于阿里云平台)
新版短信接口在线测试页面:https://api.aliyun.com/new#/?product=Dysmsapi&api=SendSms&params={}&tab=DEM ...
bashrc和bash_profile
在~/.bashrc中起别名 !/bin/bash下必须加上shopt -s expand_aliases #!/bin/sh下不用 shopt -s expand_aliases 这一条命令让she ...
Ubuntu 16.04下配置intel opencl环境
一. 靠谱的安装教程 1. 官网教程 https://software.intel.com/en-us/articles/sdk-for-opencl-2019-gsg,打开后往下拉到[4. Prod ...
SQL Server并发操作单个表时发生在page页面级的死锁
最近遇到的死锁问题都发生在并发操作单张表上,比较有意思,就模拟了重现了一下.根据非聚集索引为条件,删除某一个表的数据,类似于这么一个语句,delete from table where noclust ...

python_day15_jquery

前端基础之jquery

一 jQuery是什么？

二 什么是jQuery对象？

三 寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

3.1.2 层级选择器

3.1.3 基本筛选器

3.1.4 属性选择器

3.1.5 表单选择器

3.1.6 表单属性选择器

3.2 筛选器

3.2.1 过滤筛选器

3.2.2 查找筛选器

四 操作元素(属性，css，文档处理)

4.1 事件

页面载入

事件绑定

事件委派：

事件切换

4.2 属性操作

4.3 each循环

方式一

方式二

4.4 文档节点处理

4.5 动画效果

显示隐藏

滑动

淡入淡出

回调函数

4.6 css操作

css位置操作

尺寸操作

扩展方法 (插件机制)

jQuery.extend(object)

jQuery.fn.extend(object)

实例练习

左侧菜单

Tab切换

模态对话框

复制样式条

注册验证

拖动面板

轮播图

python_day15_jquery的更多相关文章

随机推荐

热门专题

二什么是jQuery对象？

三寻找元素(选择器和筛选器)

3.1.3 基本筛选器　　

3.2.2 查找筛选器　　

四操作元素(属性，css，文档处理)

左侧菜单　