48-jQuery的事件机制和其他知识

jQuery 设置宽度和高度

宽度操作：

  1.     $(selector).height();     //不带参数表示获取高度
  2.     $(selector).height(200);  //带参数表示设置高度

宽度操作：

  1.     $(selector).width();     //不带参数表示获取宽度
  2.     $(selector).width(200);  //带参数表示设置高宽度

问题：jQuery的css()获取高度，和jQuery的height获取高度，二者的区别？

答案：

  1.     $("div").css();     //返回的是string类型，例如：30px
  3.     $("div").height();  //返回得失number类型，例如：30。常用于数学计算。

如上方代码所示，$("div").height();返回的是number类型，常用于数学计算。

jQuery 的坐标操作

offset()方法

  1.     $(selector).offset();
  2.     $(selector).offset({left:100, top: 150});

作用：获取或设置元素相对于 document 文档的位置。参数解释：

  • 无参数：表示获取。返回值为：{left:num, top:num}。返回值是相对于document的位置。

  • 有参数：表示设置。参数建议使用 number 数值类型。

注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative。

position()方法

  1.     $(selector).position();

作用：获取相对于其最近的带有定位的父元素的位置。返回值为对象：{left:num, top:num}。

注意：只能获取，不能设置。

scrollTop()方法

  1.     scrollTop();
  2.     $(selector).scrollTop(100);

作用：获取或者设置元素被卷去的头部的距离。参数解释：

  • 无参数：表示获取偏移。

  • 有参数：表示设置偏移，参数为数值类型。

scrollLeft()方法

  1.     scrollLeft();
  2.     $(selector).scrollLeft(100);

作用：获取或者设置元素水平方向滚动的位置。参数解释：

  • 无参数：表示获取偏移。

  • 有参数：表示设置偏移，参数为数值类型。

代码示范：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {
  8.             height: 5000px;
  9.         }
  11.         .box1 {
  12.             width: 300px;
  13.             height: 300px;
  14.             position: relative;
  15.             margin: 10px;
  16.             overflow: auto;
  17.             background-color: pink;
  18.         }
  20.         .box2 {
  21.             width: 200px;
  22.             height: 400px;
  23.             position: absolute;
  24.             top: 50px;
  25.             left: 50px;
  26.             background-color: yellow;
  27.         }
  28.     </style>
  29.     <script src="jquery-1.11.1.js"></script>
  30.     <script>
  31.         $(function () {
  32.             //距离页面最顶端或者最左侧的距离和有没有定位没有关系
  33.             $("button").eq(0).click(function () {
  34.                 alert($(".box2").offset().top);
  35.             })
  37.             //距离页面最顶端或者最左侧的距离和有没有定位没有关系
  38.             $("button").eq(1).click(function () {
  39.                 $(".box2").offset({"left": 1000, "top": 1000});
  40.             })
  42.             //距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
  43.             $("button").eq(2).click(function () {
  44.                 alert($(".box2").position().top);
  45.             })
  47.             //距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
  48.             $("button").eq(3).click(function () {
  49.                 $(".box2").position().top = "100px";
  50.             })
  52.             //获取被选取的头部
  53.             $("button").eq(4).click(function () {
  54.                 alert($(window).scrollTop());
  55.             })
  57.             //获取被选取的头部
  58.             $("button").eq(5).click(function () {
  59.                 $(window).scrollTop(100);
  60.             })
  62.         })
  63.     </script>
  65. </head>
  66. <body>
  69. <div class="box1">
  70.     <div class="box2"></div>
  71. </div>
  73. <button>offset().top获取</button>
  74. <button>offset().top设置</button>
  75. <button>position().top获取</button>
  76. <button>position().top设置</button>
  77. <button>scrollTop()</button>
  78. <button>scrollTop()</button>
  80. </body>
  81. </html>

jQuery的事件机制

常见的事件绑定

  • click(handler) 单击事件。

  • blur(handler) 失去焦点事件。

  • mouseenter(handler) 鼠标进入事件。

  • mouseleave(handler) 鼠标离开事件。

  • dbclick(handler) 双击事件。

  • change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。

  • focus(handler) 获得焦点事件。

  • keydown(handler) 键盘按下事件。

参考链接：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

on方式绑定事件

最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了所有的事件处理的方法，此方法兼容zepto(移动端类似于jQuery的一个库)。

格式举例：

  1.         $(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
  2.             console.log(event.data);      //event.data获取的就是第三个参数这个json。
  3.             console.log(event.data.name); //event.data.name获取的是name的值。
  4.         });

参数解释：

  • 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）。上方代码绑定的是单击事件和鼠标进入事件。

  • 第二个参数：selector, 执行事件的后代元素。

  • 第三个参数：data，传递给事件处理函数的数据，事件触发的时候通过event.data来使用（也就是说，可以通过event拿到data）

  • 第四个参数：handler，事件处理函数。

简单点的写法：

  1.     $(document).on("click",".box", function () {
  2.        alert(1);
  3.     });

off方式解绑事件

  1.     $(selector).off();      // 解绑匹配元素的所有事件
  3.     $(selector).off("click");   // 解绑匹配元素的所有click事件
  5.     $(selector).off( "click", "**" );   // 解绑所有代理的click事件，元素本身的事件不会被解绑

jQuery的事件对象

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX 鼠标相对于文档左部边缘的位置

event.target 触发事件源，不一定===this

event.stopPropagation()； 阻止事件冒泡

event.preventDefault(); 阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码

代码演示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $(document).on("click", {}, function (event) {
  10.                 console.log(event.data);
  11.                 console.log(event.currentTarget);
  12.                 console.log(event.target);
  13.                 console.log(event.pageX);
  14.                 console.log(event.type);
  15.                 console.log(event.which);
  16.                 console.log(event.keyCode);
  17.             });
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  23. </body>
  24. </html>

上方代码中，我们通过event参数，获取了点击事件的各种event里的属性。

单击网页后，打印结果为：

59-jQuery的事件机制和其他知识 - 图1

举例：键盘上对的按键按下时，变色

这个时候就要用到event参数，因为要获取event.keyCode，才能知道按下的是键盘上的哪个按键。

代码实现：

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         .wrap {
  9.             width: 400px;
  10.             height: 400px;
  11.             margin: 100px auto 0;
  12.         }
  14.         .wrap h1 {
  15.             text-align: center;
  16.         }
  18.         .wrap div {
  19.             width: 400px;
  20.             height: 300px;
  21.             background: pink;
  22.             font-size: 30px;
  23.             text-align: center;
  24.             line-height: 300px;
  25.         }
  26.     </style>
  27.     <script src="jquery-1.11.1.js"></script>
  28.     <script>
  29.         $(function () {
  30.             //需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
  31.             //步骤：
  32.             //1.给document绑定keyup事件
  33.             //2.获取值，根据此值，给div和span上色和内容
  35.             var div = $("#bgChange");
  36.             var span = $("#keyCodeSpan");
  38.             //绑定事件
  39.             $(document).keyup(function (e) {  //键盘弹出时，触发事件
  40.                 //调用方法
  41.                 setColor(e.keyCode);
  42.             });
  45.             function setColor(keyCode) {
  46.                 //alert(e.keyCode);
  47.                 //2.获取值，根据此值，给div和span上色和内容
  48.                 switch (keyCode) {
  49.                     case 80:
  50.                         //修改内容pink
  51.                         setEle("pink", keyCode);
  52.                         break;
  53.                     case 66:
  54.                         //修改内容blue
  55.                         setEle("blue", keyCode);
  56.                         break;
  57.                     case 79:
  58.                         //修改内容orange
  59.                         setEle("orange", keyCode);
  60.                         break;
  61.                     case 82:
  62.                         //修改内容red
  63.                         setEle("red", keyCode);
  64.                         break;
  65.                     case 89:
  66.                         //修改内容yellow
  67.                         setEle("yellow", keyCode);
  68.                         break;
  69.                     default :
  70.                         alert("系统没有设置该颜色！");
  71.                 }
  73.                 function setEle(a, b) {
  74.                     div.css("background-color", a);
  75.                     span.text(b);
  76.                 }
  78.             }
  80.             //1.给document绑定keyup事件
  81. //            $(document).keyup(function (e) {
  82. //                //alert(e.keyCode);
  83. //                //2.获取值，根据此值，给div和span上色和内容
  84. //                switch (e.keyCode){
  85. //                    case 80:
  86. //                        //修改内容pink
  87. //                        div.css("background-color","pink");
  88. //                        span.text(e.keyCode);
  89. //                        break;
  90. //                    case 66:
  91. //                        //修改内容blue
  92. //                        div.css("background-color","blue");
  93. //                        span.text(e.keyCode);
  94. //                        break;
  95. //                    case 79:
  96. //                        //修改内容orange
  97. //                        div.css("background-color","orange");
  98. //                        span.text(e.keyCode);
  99. //                        break;
  100. //                    case 82:
  101. //                        //修改内容red
  102. //                        div.css("background-color","red");
  103. //                        span.text(e.keyCode);
  104. //                        break;
  105. //                    case 89:
  106. //                        //修改内容yellow
  107. //                        div.css("background-color","yellow");
  108. //                        span.text(e.keyCode);
  109. //                        break;
  110. //                    default :
  111. //                        alert("系统没有设置该颜色！");
  112. //                }
  113. //            });
  114.         })
  115.     </script>
  116. </head>
  118. <body>
  120. <div class="wrap">
  121.     <h1>按键改变颜色</h1>
  122.     <div id="bgChange">
  123.         keyCode为：
  124.         <span id="keyCodeSpan">80</span>
  125.     </div>
  126. </div>
  128. </body>
  129. </html>

jQuery 的两大特点

（1）链式编程：比如.show()和.html()可以连写成.show().html()。

链式编程原理：return this。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

  1.     end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

（2）隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

举例：五角星评分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>五角星评分案例</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         .comment {
  13.             font-size: 40px;
  14.             color: #ff3100;
  15.         }
  17.         .comment li {
  18.             float: left;
  19.             cursor: pointer;
  20.         }
  22.         ul {
  23.             list-style: none;
  24.         }
  25.     </style>
  26.     <script src="jquery-1.11.1.js"></script>
  27.     <script>
  28.         $(function () {
  29.             var star_none = '☆'; // 空心五角星
  30.             var star_sel = '★'; // 实心五角星
  32.             //需求1：鼠标放悬停时，当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
  33.             $(".comment li").on("mouseenter", function () {
  34.                 //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
  36.                 //写法一：分两次写
  37. //                $(this).text(star_sel).prevAll("li").text(star_sel);
  38. //                $(this).nextAll("li").text(star_none);
  39.                 //写法二：一次性写完，但要用到end()，否则会出问题。【重要】
  40.                 $(this).text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);
  41.             });
  43.             $(".comment li").on("mouseleave", function () {
  44.                 //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
  45.                 if ($("li.current").length === 0) {
  46.                     $(".comment li").text(star_none);
  47.                 } else {
  48.                     //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
  49.                     $("li.current").text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);
  50.                 }
  51.             });
  54.             //需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
  55.             $(".comment li").on("click", function () {
  56.                 //点击哪个li给他加一个类名。清空其他所有的li的类名
  57.                 $(this).attr("class", "current").siblings("li").removeAttr("class");
  58.             });
  61.         });
  62.     </script>
  63. </head>
  64. <body>
  65. <ul class="comment">
  66.     <li>☆</li>
  67.     <li>☆</li>
  68.     <li>☆</li>
  69.     <li>☆</li>
  70.     <li>☆</li>
  71. </ul>
  72. </body>
  73. </html>

上方代码中，注意end的用法，很巧妙。

实现效果：

59-jQuery的事件机制和其他知识 - 图2

each的用法

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。

但是，如果要对每个元素做不同的处理，这时候就用到了each方法。

格式如下：

  1.     $(selector).each(function(index,element){});

参数解释：

  • 参数一：表示当前元素在所有匹配元素中的索引号

  • 参数二：参数二表示当前元素（是js 中的DOM对象，而不是jQuery对象）

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         li {
  8.             width: 100px;
  9.             height: 100px;
  10.             margin: 20px;
  11.             float: left;
  12.             list-style: none;
  13.             text-align: center;
  14.             font: 50px/100px "simsun";
  15.             color: white;
  16.             background-color: black;
  17.         }
  18.     </style>
  20.     <script src="jquery-1.11.1.js"></script>
  21.     <script>
  22.         jQuery(function () {
  23.             //设置每个不一样的盒子透明度逐渐递增
  24.             $("ul li").each(function (index, element) {
  25.                 $(element).css("opacity", (index + 1) / 10);
  26.                 console.log(index+"---"+element.tagName);
  28.             });
  29.         });
  30.     </script>
  31. </head>
  32. <body>
  33. <ul>
  34.     <li class="aaa1">1</li>
  35.     <li class="aaa2">2</li>
  36.     <li class="aaa3">3</li>
  37.     <li class="aaa4">4</li>
  38.     <li class="aaa5">5</li>
  39.     <li class="aaa6">6</li>
  40.     <li class="aaa7">7</li>
  41.     <li class="aaa8">8</li>
  42.     <li class="aaa9">9</li>
  43.     <li class="aaa10">10</li>
  44. </ul>
  46. </body>
  47. </html>

效果如下：

59-jQuery的事件机制和其他知识 - 图3

多库共存

多库共存指的是：jQuery占用了 $ 和 jQuery 这两个变量。当在同一个页面中引用了 jQuery 库以及其他的库（或者其他版本的jQuery库），恰好其他的库中也用到了 $ 或者jQuery变量.那么，要保证每个库都能正常使用，就产生了多库共存的问题。

温馨提示：我们可以通过以下方式获取 jQuery 库的版本号。

  1.     console.log($.fn.jquery);  //打印 jQuery 库的版本号

办法一：让 jQuery 放弃对 $ 的使用权：

  1.     $.noConflict();

效果如下：

59-jQuery的事件机制和其他知识 - 图4

上图中，代码中同时包含了两个版本的库。1.11.1版本放弃了对 $ 的使用权，交给了1.8.2版本；但是1.11.1版本并没有放弃对 jQuery关键字的使用权。

办法二：同时放弃放弃两个符号的使用权，并定义一个新的使用权（如果有三个库时，可以这样用）

  1.     $.noConflict(true);   //返回值是新的关键字

效果如下：

59-jQuery的事件机制和其他知识 - 图5

jQuery 的插件机制

jQuery 库，虽然功能强大，但也不是面面俱到。jQuery 是通过插件的方式，来扩展它的功能：

  • 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后使用。

  • 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。

插件之改变颜色

jQuery的自定义动画方法animate()，在执行动画时，是不支持设置背景色这个属性的。这个时候可以借助jQuery.color.js这个插件。

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: blue;
  11.         }
  12.     </style>
  13.     <script src="jquery-1.11.1.js"></script>
  14.     <script src="jquery.color.js"></script>
  15.     <script>
  16.         $(function () {
  17.             //点击按钮，改变盒子的宽度和背景色
  18.             $("button").on("click", function () {
  19.                 $("div").animate({"width": 200, "background-color": "red"}, 2000, function () {
  20.                     alert("动画结束");
  21.                 });
  22.             });
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27. <button>变色</button>
  28. <div></div>
  29. </body>
  30. </html>

效果：

59-jQuery的事件机制和其他知识 - 图6

上方代码中，因为加入了一行插件：（注意顺序是放在jQuery插件之后）

  1.     <script src="jquery.color.js"></script>

否则的话，在动画执行的过程中，是无法设置背景色的。

插件之懒加载

懒加载：当打开一个网页时，只有当我看到某个部分，再加载那个部分；而不是一下子全部加载完毕。这样可以优化打开的速度。

比如说，我可以设置一张图片为懒加载，于是，这张图片会等我宠幸到它的时候，它再打开。

代码举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             height: 3000px;
  9.             background-color: pink;
  10.         }
  11.     </style>
  12.     <script src="jquery-1.11.1.js"></script>
  13.     <!--懒加载的使用。第一步：导包(必须在jquery库的下方）-->
  14.     <script src="jquery.lazyload.js"></script>
  15.     <script>
  16.         $(function () {
  19.             //第二步骤：调用懒加载的方法实现功能。参数的不同，功能也不同。
  20.             $("img.lazy").lazyload();
  21.         })
  22.     </script>
  23. </head>
  24. <body>
  25. <div></div>
  26. <!--需要实现将图片设置为懒加载模式-->
  27. <img class="lazy" data-original="images/01.jpg" width="640" height="480">
  28. </body>
  29. </html>