一、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();

  1. $("#test").html()
  2.        //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
  3.  
  4.        // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 
  5.  
  6.        //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
  7.  
  8.        //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
  9.  
  10. var $variable = jQuery 对象
  11. var variable = DOM 对象
  12.  
  13. $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

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

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

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")

实例之左侧菜单

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>left_menu</title>
  6.      <script>
  7.            function show(self){
  8.                $(self).next().removeClass("hide");
  9.                $(self).parent().siblings().children(".con").addClass("hide");
  10.  
  11.            }
  12.      </script>
  13.      <style>
  14.            .menu{
  15.                height: 500px;
  16.                width: 30%;
  17.                background-color: gainsboro;
  18.                float: left;
  19.            }
  20.            .content{
  21.                height: 500px;
  22.                width: 70%;
  23.                background-color: rebeccapurple;
  24.                float: left;
  25.            }
  26.           .title{
  27.               line-height: 50px;
  28.               background-color: #425a66;
  29.               color: forestgreen;}
  30.  
  31.           .hide{
  32.               display: none;
  33.           }
  34.  
  35.      </style>
  36.  </head>
  37.  <body>
  38.  
  39.  <div class="outer">
  40.      <div class="menu">
  41.          <div class="item">
  42.              <div class="title" onclick="show(this);">菜单一</div>
  43.              <div class="con">
  44.                  <div>111</div>
  45.                  <div>111</div>
  46.                  <div>111</div>
  47.              </div>
  48.          </div>
  49.          <div class="item">
  50.              <div class="title" onclick="show(this);">菜单二</div>
  51.              <div class="con hide">
  52.                  <div>111</div>
  53.                  <div>111</div>
  54.                  <div>111</div>
  55.              </div>
  56.          </div>
  57.          <div class="item">
  58.              <div class="title" onclick="show(this);">菜单三</div>
  59.              <div class="con hide">
  60.                  <div>111</div>
  61.                  <div>111</div>
  62.                  <div>111</div>
  63.              </div>
  64.          </div>
  65.  
  66.      </div>
  67.      <div class="content"></div>
  68.  
  69.  </div>
  70.  
  71.  </body>
  72.  </html>

实例之tab切换

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>tab</title>
  6.      <script>
  7.             function tab(self){
  8.                 var index=$(self).attr("xxx");
  9.                 $("#"+index).removeClass("hide").siblings().addClass("hide");
  10.                 $(self).addClass("current").siblings().removeClass("current");
  11.  
  12.             }
  13.      </script>
  14.      <style>
  15.          *{
  16.              margin: 0px;
  17.              padding: 0px;
  18.          }
  19.          .tab_outer{
  20.              margin: 0px auto;
  21.              width: 60%;
  22.          }
  23.          .menu{
  24.              background-color: #cccccc;
  25.              /*border: 1px solid red;*/
  26.              line-height: 40px;
  27.          }
  28.          .menu li{
  29.              display: inline-block;
  30.          }
  31.          .menu a{
  32.              border-right: 1px solid red;
  33.              padding: 11px;
  34.          }
  35.          .content{
  36.              background-color: tan;
  37.              border: 1px solid green;
  38.              height: 300px;
  39.          }
  40.          .hide{
  41.              display: none;
  42.          }
  43.  
  44.          .current{
  45.              background-color: darkgray;
  46.              color: yellow;
  47.              border-top: solid 2px rebeccapurple;
  48.          }
  49.      </style>
  50.  </head>
  51.  <body>
  52.        <div class="tab_outer">
  53.            <ul class="menu">
  54.                <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
  55.                <li xxx="c2" onclick="tab(this);">菜单二</li>
  56.                <li xxx="c3" onclick="tab(this);">菜单三</li>
  57.            </ul>
  58.            <div class="content">
  59.                <div id="c1">内容一</div>
  60.                <div id="c2" class="hide">内容二</div>
  61.                <div id="c3" class="hide">内容三</div>
  62.            </div>
  63.  
  64.        </div>
  65.  </body>
  66.  </html>

3.2 筛选器

3.2.1  过滤筛选器

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

3.2.2  查找筛选器

  1.  $("div").children(".test")     $("div").find(".test")  
  2.  
  3.  $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() 
  4.  
  5.  $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
  6.  
  7.  $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 
  8.  
  9.  $("div").siblings()

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

4.1 属性操作

  1. --------------------------属性
  2. $("").attr();
  3. $("").removeAttr();
  4. $("").prop();
  5. $("").removeProp();
  6. --------------------------CSS类
  7. $("").addClass(class|fn)
  8. $("").removeClass([class|fn])
  9. --------------------------HTML代码/文本/值
  10. $("").html([val|fn])
  11. $("").text([val|fn])
  12. $("").val([val|fn|arr])
  13. ---------------------------
  14. $("").css("color","red")

注意：

  1.  <input id="chk1" type="checkbox" />是否可见
  2.  <input id="chk2" type="checkbox" checked="checked" />是否可见
  3.  
  4.  <script>
  5.  
  6.  //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  7.  //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
  8.  //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
  9.  //需要使用prop方法去操作才能获得正确的结果。
  10.  
  11.  //    $("#chk1").attr("checked")
  12.  //    undefined
  13.  //    $("#chk1").prop("checked")
  14.  //    false
  15.  
  16.  //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
  17.  //    $("#chk1").attr("checked")
  18.  //    undefined
  19.  //    $("#chk1").prop("checked")
  20.  //    true
  21.  
  22.      console.log($("#chk1").prop("checked"));//false
  23.      console.log($("#chk2").prop("checked"));//true
  24.      console.log($("#chk1").attr("checked"));//undefined
  25.      console.log($("#chk2").attr("checked"));//checked
  26.  </script>
  27.  
  28.  attr和prop

attr和prop

实例之全反选

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="jquery-1.11.3.min.js"></script>
  7.      <script>
  8.  
  9.               function selectall(){
  10.  
  11.                   $("table :checkbox").prop("checked",true)
  12.               }
  13.               function cancel(){
  14.  
  15.                   $("table :checkbox").prop("checked",false)
  16.               }
  17.  
  18.               function reverse(){
  19.  
  20.                   //                 var idlist=$("table :checkbox")
  21.  //                 for(var i=0;i<idlist.length;i++){
  22.  //                     var element=idlist[i];
  23.  //
  24.  //                     var ischecked=$(element).prop("checked")
  25.  //                     if (ischecked){
  26.  //                         $(element).prop("checked",false)
  27.  //                     }
  28.  //                     else {
  29.  //                         $(element).prop("checked",true)
  30.  //                     }
  31.  //
  32.  //                 }
  33.  //    jquery循环的两种方式
  34.                   //方式一
  35.  //                 li=[10,20,30,40]
  36.  //                 dic={name:"yuan",sex:"male"}
  37.  //                 $.each(li,function(i,x){
  38.  //                     console.log(i,x)
  39.  //                 })
  40.  
  41.                   //方式二
  42.  //                    $("tr").each(function(){
  43.  //                        console.log($(this).html())
  44.  //                    })
  45.  
  46.                   $("table :checkbox").each(function(){
  47.  
  48.                       $(this).prop("checked",!$(this).prop("checked"));
  49.  
  50.  //                     if ($(this).prop("checked")){
  51.  //                         $(this).prop("checked",false)
  52.  //                     }
  53.  //                     else {
  54.  //                         $(this).prop("checked",true)
  55.  //                     }
  56.  
  57.                       // 思考:如果用attr方法可以实现吗?
  58.  
  59.                   });
  60.               }
  61.  
  62.      </script>
  63.  </head>
  64.  <body>
  65.  
  66.       <button onclick="selectall();">全选</button>
  67.       <button onclick="cancel();">取消</button>
  68.       <button onclick="reverse();">反选</button>
  69.  
  70.       <table border="1">
  71.           <tr>
  72.               <td><input type="checkbox"></td>
  73.               <td>111</td>
  74.           </tr>
  75.           <tr>
  76.               <td><input type="checkbox"></td>
  77.               <td>222</td>
  78.           </tr>
  79.           <tr>
  80.               <td><input type="checkbox"></td>
  81.               <td>333</td>
  82.           </tr>
  83.           <tr>
  84.               <td><input type="checkbox"></td>
  85.               <td>444</td>
  86.           </tr>
  87.       </table>
  88.  
  89.  </body>
  90.  </html>

实例之模态对话框

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          .back{
  8.              background-color: rebeccapurple;
  9.              height: 2000px;
  10.          }
  11.  
  12.          .shade{
  13.              position: fixed;
  14.              top: 0;
  15.              bottom: 0;
  16.              left:0;
  17.              right: 0;
  18.              background-color: coral;
  19.              opacity: 0.4;
  20.          }
  21.  
  22.          .hide{
  23.              display: none;
  24.          }
  25.  
  26.          .models{
  27.              position: fixed;
  28.              top: 50%;
  29.              left: 50%;
  30.              margin-left: -100px;
  31.              margin-top: -100px;
  32.              height: 200px;
  33.              width: 200px;
  34.              background-color: gold;
  35.  
  36.          }
  37.      </style>
  38.  </head>
  39.  <body>
  40.  <div class="back">
  41.      <input id="ID1" type="button" value="click" onclick="action1(this)">
  42.  </div>
  43.  
  44.  <div class="shade hide"></div>
  45.  <div class="models hide">
  46.      <input id="ID2" type="button" value="cancel" onclick="action2(this)">
  47.  </div>
  48.  
  49.  <script src="jquery-1.11.3.min.js"></script>
  50.  <script>
  51.  
  52.      function action1(self){
  53.          $(self).parent().siblings().removeClass("hide");
  54.  
  55.      }
  56.      function action2(self){
  57.          //$(self).parent().parent().children(".models,.shade").addClass("hide")
  58.  
  59.          $(self).parent().addClass("hide").prev().addClass("hide")
  60.  
  61.      }
  62.  </script>
  63.  </body>
  64.  </html>

4.2 文档处理

  1. //创建一个标签对象
  2.     $("<p>")
  3.  
  4. //内部插入
  5.  
  6.     $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
  7.     $("").appendTo(content)       ----->$("p").appendTo("div");
  8.     $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
  9.     $("").prependTo(content)      ----->$("p").prependTo("#foo");
  10.  
  11. //外部插入
  12.  
  13.     $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
  14.     $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
  15.     $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
  16.     $("").insertBefore(content)   ----->$("p").insertBefore("#foo");
  17.  
  18. //替换
  19.     $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
  20.  
  21. //删除
  22.  
  23.     $("").empty()
  24.     $("").remove([expr])
  25.  
  26. //复制
  27.  
  28.     $("").clone([Even[,deepEven]])

实例之复制样式条

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  
  7.  </head>
  8.  <body>
  9.              <div class="outer">
  10.                  <div class="item">
  11.                          <input type="button" value="+" onclick="add(this);">
  12.                          <input type="text">
  13.                  </div>
  14.              </div>
  15.  
  16.  <script src="jquery-1.11.3.min.js"></script>
  17.      <script>
  18.              //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?
  19.              function add(self){
  20.                  // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
  21.                   var $clone_obj=$(self).parent().clone();
  22.                   $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
  23.                   $(self).parent().parent().append($clone_obj);
  24.              }
  25.             function removed(self){
  26.  
  27.                 $(self).parent().remove()
  28.  
  29.             }
  30.  
  31.      </script>
  32.  </body>
  33.  </html>

4.3 css操作

  1. CSS
  2.         $("").css(name|pro|[,val|fn])
  3.     位置
  4.         $("").offset([coordinates])
  5.         $("").position()
  6.         $("").scrollTop([val])
  7.         $("").scrollLeft([val])
  8.     尺寸
  9.         $("").height([val|fn])
  10.         $("").width([val|fn])
  11.         $("").innerHeight()
  12.         $("").innerWidth()
  13.         $("").outerHeight([soptions])
  14.         $("").outerWidth([options])

实例返回顶部

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="js/jquery-2.2.3.js"></script>
  7.      <script>
  8.  
  9.            window.onscroll=function(){
  10.  
  11.                var current=$(window).scrollTop();
  12.                console.log(current)
  13.                if (current>100){
  14.  
  15.                    $(".returnTop").removeClass("hide")
  16.                }
  17.                else {
  18.                $(".returnTop").addClass("hide")
  19.            }
  20.            }
  21.  
  22.             function returnTop(){
  23.  //               $(".div1").scrollTop(0);
  24.  
  25.                 $(window).scrollTop(0)
  26.             }
  27.  
  28.      </script>
  29.      <style>
  30.          body{
  31.              margin: 0px;
  32.          }
  33.          .returnTop{
  34.              height: 60px;
  35.              width: 100px;
  36.              background-color: darkgray;
  37.              position: fixed;
  38.              right: 0;
  39.              bottom: 0;
  40.              color: greenyellow;
  41.              line-height: 60px;
  42.              text-align: center;
  43.          }
  44.          .div1{
  45.              background-color: orchid;
  46.              font-size: 5px;
  47.              overflow: auto;
  48.              width: 500px;
  49.          }
  50.          .div2{
  51.              background-color: darkcyan;
  52.          }
  53.          .div3{
  54.              background-color: aqua;
  55.          }
  56.          .div{
  57.              height: 300px;
  58.          }
  59.          .hide{
  60.              display: none;
  61.          }
  62.      </style>
  63.  </head>
  64.  <body>
  65.       <div class="div1 div">
  66.           <p>hello</p>
  67.           <p>hello</p>
  68.           <p>hello</p>
  69.           <p>hello</p>
  70.           <p>hello</p>
  71.           <p>hello</p>
  72.           <p>hello</p>
  73.           <p>hello</p>
  74.           <p>hello</p>
  75.           <p>hello</p>
  76.           <p>hello</p>
  77.           <p>hello</p>
  78.           <p>hello</p>
  79.           <p>hello</p>
  80.           <p>hello</p>
  81.           <p>hello</p>
  82.           <p>hello</p>
  83.           <p>hello</p>
  84.  
  85.       </div>
  86.       <div class="div2 div"></div>
  87.       <div class="div3 div"></div>
  88.       <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
  89.  </body>
  90.  </html>

五、事件

  1. 页面载入
  2.     ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
  3.     $(document).ready(function(){}) -----------> $(function(){})
  4.  
  5. 事件处理
  6.     $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
  7.  
  8.     //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
  9.     //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
  10.     //  click事件；
  11.  
  12.     [selector]参数的好处:
  13.         好处在于.on方法为动态添加的元素也能绑上指定事件；如：
  14.  
  15.         //$('ul li').on('click', function(){console.log('click');})的绑定方式和
  16.         //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
  17.         //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
  18.  
  19.         //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
  20.         //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
  21.  
  22.     [data]参数的调用:
  23.              function myHandler(event) {
  24.                 alert(event.data.foo);
  25.                 }
  26.              $("li").on("click", {foo: "bar"}, myHandler)

实例之面板拖动

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.  </head>
  7.  <body>
  8.      <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
  9.          <div id="title" style="background-color: black;height: 40px;color: white;">
  10.              标题
  11.          </div>
  12.          <div style="height: 300px;">
  13.              内容
  14.          </div>
  15.      </div>
  16.  <script type="text/javascript" src="jquery-2.2.3.js"></script>
  17.  <script>
  18.      $(function(){
  19.          // 页面加载完成之后自动执行
  20.          $('#title').mouseover(function(){
  21.              $(this).css('cursor','move');
  22.          }).mousedown(function(e){
  23.              //console.log($(this).offset());
  24.              var _event = e || window.event;
  25.              // 原始鼠标横纵坐标位置
  26.              var ord_x = _event.clientX;
  27.              var ord_y = _event.clientY;
  28.  
  29.              var parent_left = $(this).parent().offset().left;
  30.              var parent_top = $(this).parent().offset().top;
  31.  
  32.              $(this).bind('mousemove', function(e){
  33.                  var _new_event = e || window.event;
  34.                  var new_x = _new_event.clientX;
  35.                  var new_y = _new_event.clientY;
  36.  
  37.                  var x = parent_left + (new_x - ord_x);
  38.                  var y = parent_top + (new_y - ord_y);
  39.  
  40.                  $(this).parent().css('left',x+'px');
  41.                  $(this).parent().css('top',y+'px');
  42.  
  43.              })
  44.          }).mouseup(function(){
  45.              $(this).unbind('mousemove');
  46.          });
  47.      })
  48.  </script>
  49.  </body>
  50.  </html>

实例之放大镜

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>bigger</title>
  6.      <style>
  7.          *{
  8.              margin: 0;
  9.              padding:0;
  10.          }
  11.          .outer{
  12.              height: 350px;
  13.              width: 350px;
  14.              border: dashed 5px cornflowerblue;
  15.          }
  16.          .outer .small_box{
  17.              position: relative;
  18.          }
  19.          .outer .small_box .float{
  20.              height: 175px;
  21.              width: 175px;
  22.              background-color: darkgray;
  23.              opacity: 0.4;
  24.              fill-opacity: 0.4;
  25.              position: absolute;
  26.              display: none;
  27.  
  28.          }
  29.  
  30.          .outer .big_box{
  31.              height: 400px;
  32.              width: 400px;
  33.              overflow: hidden;
  34.              position:absolute;
  35.              left: 360px;
  36.              top: 0px;
  37.              z-index: 1;
  38.              border: 5px solid rebeccapurple;
  39.              display: none;
  40.  
  41.          }
  42.          .outer .big_box img{
  43.              position: absolute;
  44.              z-index: 5;
  45.          }
  46.  
  47.      </style>
  48.  </head>
  49.  <body>
  50.  
  51.          <div class="outer">
  52.              <div class="small_box">
  53.                  <div class="float"></div>
  54.                  <img src="small.jpg">
  55.  
  56.              </div>
  57.              <div class="big_box">
  58.                  <img src="big.jpg">
  59.              </div>
  60.  
  61.          </div>
  62.  
  63.  <script src="jquery-2.1.4.min.js"></script>
  64.  <script>
  65.  
  66.      $(function(){
  67.  
  68.            $(".small_box").mouseover(function(){
  69.  
  70.                $(".float").css("display","block");
  71.                $(".big_box").css("display","block")
  72.  
  73.            });
  74.            $(".small_box").mouseout(function(){
  75.  
  76.                $(".float").css("display","none");
  77.                $(".big_box").css("display","none")
  78.  
  79.            });
  80.  
  81.            $(".small_box").mousemove(function(e){
  82.  
  83.                var _event=e || window.event;
  84.  
  85.                var float_width=$(".float").width();
  86.                var float_height=$(".float").height();
  87.  
  88.                console.log(float_height,float_width);
  89.  
  90.                var float_height_half=float_height/2;
  91.                var float_width_half=float_width/2;
  92.                console.log(float_height_half,float_width_half);
  93.  
  94.                 var small_box_width=$(".small_box").height();
  95.                 var small_box_height=$(".small_box").width();
  96.  
  97.  //  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
  98.                var mouse_left=_event.clientX-float_width_half;
  99.                var mouse_top=_event.clientY-float_height_half;
  100.  
  101.                if(mouse_left<0){
  102.                    mouse_left=0
  103.                }else if (mouse_left>small_box_width-float_width){
  104.                    mouse_left=small_box_width-float_width
  105.                }
  106.  
  107.                if(mouse_top<0){
  108.                    mouse_top=0
  109.                }else if (mouse_top>small_box_height-float_height){
  110.                    mouse_top=small_box_height-float_height
  111.                }
  112.  
  113.                 $(".float").css("left",mouse_left+"px");
  114.                 $(".float").css("top",mouse_top+"px")
  115.  
  116.                 var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
  117.                 var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
  118.  
  119.                console.log(percentX,percentY)
  120.  
  121.                 $(".big_box img").css("left", -percentX*mouse_left+"px")
  122.                 $(".big_box img").css("top", -percentY*mouse_top+"px")
  123.            })
  124.      })
  125.  
  126.  </script>
  127.  </body>
  128.  </html>

六、动画效果

显示隐藏

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="jquery-2.1.4.min.js"></script>
  7.      <script>
  8.  
  9.  $(document).ready(function() {
  10.      $("#hide").click(function () {
  11.          $("p").hide(1000);
  12.      });
  13.      $("#show").click(function () {
  14.          $("p").show(1000);
  15.      });
  16.  
  17.  //用于切换被选元素的 hide() 与 show() 方法。
  18.      $("#toggle").click(function () {
  19.          $("p").toggle();
  20.      });
  21.  })
  22.  
  23.      </script>
  24.      <link type="text/css" rel="stylesheet" href="style.css">
  25.  </head>
  26.  <body>
  27.  
  28.      <p>hello</p>
  29.      <button id="hide">隐藏</button>
  30.      <button id="show">显示</button>
  31.      <button id="toggle">切换</button>
  32.  
  33.  </body>
  34.  </html>

滑动

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="jquery-2.1.4.min.js"></script>
  7.      <script>
  8.      $(document).ready(function(){
  9.       $("#slideDown").click(function(){
  10.           $("#content").slideDown(1000);
  11.       });
  12.        $("#slideUp").click(function(){
  13.           $("#content").slideUp(1000);
  14.       });
  15.        $("#slideToggle").click(function(){
  16.           $("#content").slideToggle(1000);
  17.       })
  18.    });
  19.      </script>
  20.      <style>
  21.  
  22.          #content{
  23.              text-align: center;
  24.              background-color: lightblue;
  25.              border:solid 1px red;
  26.              display: none;
  27.              padding: 50px;
  28.          }
  29.      </style>
  30.  </head>
  31.  <body>
  32.  
  33.      <div id="slideDown">出现</div>
  34.      <div id="slideUp">隐藏</div>
  35.      <div id="slideToggle">toggle</div>
  36.  
  37.      <div id="content">helloworld</div>
  38.  
  39.  </body>
  40.  </html>

淡入淡出

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="jquery-2.1.4.min.js"></script>
  7.      <script>
  8.      $(document).ready(function(){
  9.     $("#in").click(function(){
  10.         $("#id1").fadeIn(1000);
  11.  
  12.     });
  13.      $("#out").click(function(){
  14.         $("#id1").fadeOut(1000);
  15.  
  16.     });
  17.      $("#toggle").click(function(){
  18.         $("#id1").fadeToggle(1000);
  19.  
  20.     });
  21.      $("#fadeto").click(function(){
  22.         $("#id1").fadeTo(1000,0.4);
  23.  
  24.     });
  25.  });
  26.  
  27.      </script>
  28.  
  29.  </head>
  30.  <body>
  31.        <button id="in">fadein</button>
  32.        <button id="out">fadeout</button>
  33.        <button id="toggle">fadetoggle</button>
  34.        <button id="fadeto">fadeto</button>
  35.  
  36.        <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
  37.  
  38.  </body>
  39.  </html>

回调函数

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="jquery-2.1.4.min.js"></script>
  7.  
  8.  </head>
  9.  <body>
  10.    <button>hide</button>
  11.    <p>helloworld helloworld helloworld</p>
  12.  
  13.   <script>
  14.     $("button").click(function(){
  15.         $("p").hide(1000,function(){
  16.             alert($(this).html())
  17.         })
  18.  
  19.     })
  20.      </script>
  21.  </body>
  22.  </html>

七、扩展方法 (插件机制)

一 用JQuery写插件时，最核心的方两个方法

  1. <script>
  2.  
  3. $.extend(object)      //为JQuery 添加一个静态方法。
  4. $.fn.extend(object)   //为JQuery实例添加一个方法。
  5.  
  6.     jQuery.extend({
  7.           min: function(a, b) { return a < b ? a : b; },
  8.           max: function(a, b) { return a > b ? a : b; }
  9.         });
  10.     console.log($.min(3,4));
  11.  
  12. //-----------------------------------------------------------------------
  13. $.fn.extend({
  14.     "print":function(){
  15.         for (var i=0;i<this.length;i++){
  16.             console.log($(this)[i].innerHTML)
  17.         }
  18.  
  19.     }
  20. });
  21.  
  22. $("p").print();
  23. </script>

二 定义作用域

定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

  1. (function(a,b){return a+b})(3,5)
  2.  
  3.        (function ($) { })(jQuery);
  4. //相当于
  5.         var fn = function ($) { };
  6.         fn(jQuery);

 三 默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。

  1.  /step01 定义JQuery的作用域
  2.  (function ($) {
  3.      //step03-a 插件的默认值属性
  4.      var defaults = {
  5.          prevId: 'prevBtn',
  6.          prevText: 'Previous',
  7.          nextId: 'nextBtn',
  8.          nextText: 'Next'
  9.          //……
  10.      };
  11.      //step06-a 在插件里定义方法
  12.      var showLink = function (obj) {
  13.          $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  14.      }
  15.  
  16.      //step02 插件的扩展方法名称
  17.      $.fn.easySlider = function (options) {
  18.          //step03-b 合并用户自定义属性，默认属性
  19.          var options = $.extend(defaults, options);
  20.          //step4 支持JQuery选择器
  21.          //step5 支持链式调用
  22.          return this.each(function () {
  23.              //step06-b 在插件里定义方法
  24.              showLink(this);
  25.          });
  26.      }
  27.  })(jQuery);

八、经典实例练习                                                                                   

实例之注册验证

  1.  <form class="Form">
  2.  
  3.      <p><input class="v1" type="text" name="username" mark="用户名"></p>
  4.      <p><input class="v1" type="text" name="email" mark="邮箱"></p>
  5.      <p><input class="v1" type="submit" value="submit"  onclick="return validate()"></p>
  6.  
  7.  </form>
  8.  
  9.  <script src="jquery-3.1.1.js"></script>
  10.  <script>
  11.      // 注意:
  12.      // DOM对象--->jquery对象    $(DOM)
  13.      // jquery对象--->DOM对象    $("")[0]
  14.  
  15.      //---------------------------------------------------------
  16.  
  17.      // DOM绑定版本
  18.      function validate(){
  19.  
  20.          flag=true;
  21.  
  22.          $("Form .v1").each(function(){
  23.              $(this).next("span").remove();// 防止对此点击按钮产生多个span标签
  24.                var value=$(this).val();
  25.              if (value.trim().length==0){
  26.                   var mark=$(this).attr("mark");
  27.                   var ele=document.createElement("span");
  28.                   ele.innerHTML=mark+"不能为空!";
  29.                   $(this).after(ele);
  30.                   $(ele).prop("class","error");// DOM对象转换为jquery对象
  31.                   flag=false;
  32.                   //  return false-------->引出$.each的return false注意点
  33.              }
  34.  
  35.          });
  36.  
  37.          return flag
  38.      }
  39.                     //---------------------------------------------------------
  40.  //---------------------------------------------------------
  41.                     //---------------------------------------------------------
  42.  
  43.          function f(){
  44.  
  45.          for(var i=0;i<4;i++){
  46.  
  47.              if (i==2){
  48.                  return
  49.              }
  50.              console.log(i)
  51.          }
  52.  
  53.      }
  54.      f();  // 这个例子大家应该不会有问题吧!!!
  55.  //------------------------------------------
  56.      li=[11,22,33,44];
  57.      $.each(li,function(i,v){
  58.  
  59.          if (v==33){
  60.                  return ;   //  ===试一试 return false会怎样?
  61.              }
  62.              console.log(v)
  63.      });
  64.  
  65.  //------------------------------------------
  66.  
  67.      //  $.MyEach(obj,function(i,v){}):
  68.           for(var i in obj){
  69.  
  70.               func(i,obj[i]) ; //  i就是索引,v就是对应值
  71.               // {}:我们写的大括号的内容就是func的执行语句;
  72.           }
  73.  
  74.      // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
  75.  
  76.      //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
  77.      //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
  78.           for(var i in obj){
  79.  
  80.               ret=func(i,obj[i]) ;
  81.               if(ret==false){
  82.                   return ;
  83.               }
  84.  
  85.           }
  86.      // 这样就很灵活了:
  87.      // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
  88.      // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
  89.  
  90.  // ---------------------------------------------------------------------
  91.     // 说了这么多,请问大家如果我们的需求是:判断出一个输入有问题后面就不判断了(当然也就不显示了),
  92.     // 怎么办呢?
  93.     // 对了
  94.      if (value.trim().length==0){
  95.                    //...
  96.                    //...
  97.                    //flag=false;  //   flag=false不要去,它的功能是最后如果有问题,不提交数据!
  98.                    return false
  99.              }
  100.  
  101.  //最后,大家尝试着用jquery的绑定来完成这个功能!
  102.  
  103.        $(".Form :submit").click(function(){});
  104.  
  105.  </script>

参考：http://www.cnblogs.com/xcj26/p/3345556.html

前端基础----jquery的更多相关文章

  1. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  2. Web前端基础——jQuery（一）

    前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书 ...

  3. 前端基础-jQuery的优点以及用法

    一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  4. 前端基础-jQuery中的如何操作标签

    阅读目录 样式操作 文本操作 属性操作 文档操作 一.样式操作 1.样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClas ...

  5. 前端基础-jQuery的内容之选择器

    阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...

  6. 前端基础jQuery

    jQury jQuery 是一个 JavaScript 函数库,jQuery 极大地简化了 JavaScript 编程. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS ...

  7. web前端基础——jQuery编程进阶

    1 jQuery本质 jQuery不是一门独立的语言,它是JavaScript的一个类库或框架.jQuery的核心思想就是:选取元素,对其操作.很多时候写jQuery代码的关键就是怎样设计合适的选择器 ...

  8. Web前端基础——jQuery（三）

    本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQue ...

  9. Web前端基础——jQuery（二）

    一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可 ...

随机推荐

  1. 深入了解MySQL存储索引

    (一)关于存储引擎 创建合适的索引是SQL性能调优中最重要的技术之一.在学习创建索引之前,要先了解MySql的架构细节,包括在硬盘上面如何组织的,索引和内存用法和操作方式,以及存储引擎的差异如何影响到 ...

  2. Spark任务执行期间写临时文件报错导致失败

    spark任务在执行期间,有时候会遇到临时目录创建失败,导致任务执行错误. java.io.IOException: Failed to create local dir in -- spark执行过 ...

  3. 创建hive与hbase关联的hive表与hbase表

    创建hive与hbase的关联表 create external table hive_hbase(rowkey string,name string,addr string,topic string ...

  4. python---json.dumps 与 json.loads /json.dump 和json.load区别

    json.dumps 是将python的数据类型进行json的编码,生成json格式的数据,举例json_data = json.dumps(str)  str为python的字符串类型数据,生成的j ...

  5. underscore.js源码解析（五）—— 完结篇

    最近公司各种上线,所以回家略感疲惫就懒得写了,这次我准备把剩下的所有方法全部分析完,可能篇幅过长...那么废话不多说让我们进入正题. 没看过前几篇的可以猛戳这里: underscore.js源码解析( ...

  6. 哈夫曼(Huffman)树+哈夫曼编码

    前天acm实验课,老师教了几种排序,抓的一套题上有一个哈夫曼树的题,正好之前离散数学也讲过哈夫曼树,这里我就结合课本,整理一篇关于哈夫曼树的博客. 主要摘自https://www.cnblogs.co ...

  7. CS小分队第一阶段冲刺站立会议（5月13日）

    昨日成果:昨日由于课程满课,未进行项目的制作 遇到困难:/ 今天计划:为2048和扫雷添加游戏音效,和组员一起合作对扫雷进行外观美化,学习程序生成时渐隐等特效

  8. 结对编程学习fault、error、failure三种状态

    点滴成就 学习时间 新编写代码行数 博客量(篇) 学习知识点 第一周 10小时 0 0 了解软件工程 第二周 10小时 0 1 项目开题 第三周 15小时 0 1 开通博客.开展项目调查 第四周 20 ...

  9. v-for & duplicate key bug

    v-for & duplicate key bug vue warn & v-for & duplicate key bug <span class="audi ...

  10. 数据库引擎InnoDB和MyISAM区别

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...