js►JQuery

04-解绑,触发,事件对象,链式编程,end,隐式迭代,插件使用&封装

事件解绑

  1. unbind方式（不用）
    1
    2
    $(selector).unbind(); // 解绑所有的事件
    $(selector).unbind("click mouseenter"); //解绑指定的事件
  2. undelegate方式（不用）
    1
    2
    3
    4
    $( selector).undelegate(); // 解绑所有的delegate事件
    $( selector).undelegate("click"); // 解绑所有元素的click事件
    $( selector).undelegate("p","click"); // 解绑指定元素的指定事件
    $( selector).undelegate("p,li","click");// 如果是一次性注册多个给多个元素注册事件，那么解绑时也需要将多个选择器写全(顺序也不能颠倒)
  3. off方式（推荐）
1
2
3
4
5
6
7
8
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
// 解绑指定类型元素的委托事件()
$('div').off("click",'p') // 如果注册时选择器是多个元素，解绑必须写全多个，位置不能颠倒
// 解绑所有的指定委托事件
('div').off("click",'**')

触发事件

1
2
<button>我是一个按钮</button>
<input type="button" value="按钮">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="jquery-1.12.4.js"></script>
<script>
  $(function(){
    $('button').on('click', function() {
      console.log('这是给button注册的事件');
    });


    $('input').on('click', function() {
      // 触发button的点击事件
      // 触发方式1： 直接调用事件名
      // 触发方式2   trigger():触发 
      $('button').trigger('click');
    });
  });
</script>

jquery事件对象 event

jQuery事件对象其实就是js事件对象做了兼容性处理

1
2
<button>按钮</button>
<a href="http://www.baidu.com">哈哈</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="jquery-1.12.4.js"></script>
<script>
  $(function(){
    $('a').on("click", function(e) {
 
      //  e:就是事件对象 

      // e.stopPropagation() 阻止事件冒泡
      // e.preventDefault(); // : 阻止浏览器默认行为
      // return false; 即可阻止事件冒泡， 也可以阻止浏览器的默认行为(不推荐)
      return false;
    });
  });
</script>

jquery链式编程

  • 链式：在jquery中允许我们使用jquery对象连续调用jquery的方法

  • 要求：但是要求链式编程过程每次函数执行完都要返回一个jquery对象，然后继续调用jquery方法

  • 一般在设置性操作时才会使用链式编程，设执行操作后都会返回一个jquery对象

  • 在获取时一般不能使用链式编程，因为获取操作一般返回的都是获取的值，并非jquery对象无法继续调用

  • 链式编程在写法上虽然方便，但是在代码维护上成本高，所以不推荐频繁使用

end()

  1. 链式编程中使用了查找’亲戚’的方法，返回的就不是当前对象了
  2. 通过观察可以知道有个方法是 prevObject 指向前一个操作的对象
  3. end() 函数内部做的就是通过 prevObject 找到上一个操作对象
  4. 通过prevObject这个属性点出来

隐式迭代的概念

  1. 隐式迭代：jquery对象不需要自己写for循环，jquery内部会自动遍历
    1. jquery设置操作：内部自动遍历，所有元素都会被设置同样的值，如果需要设置不同的值，就需要自己处理循环
    2. jquery获取操作，直接返回 第一个元素 的样式
  2. 显示迭代
    • each() // 参数一：内部dom元素的下标，参数二：dom元素，可以用this直接获取 如：$(“div”).each(function(index,el){})
    • for循环 //常用遍历方式

多库共存

  1. jQuery也是jquery文件暴露的一个对象，可当作$使用
  2. $是jquery文件的暴露的第二个对象
  3. 如果$冲突可以用jQuery替换
  4. 也可以使用$.noConflic()放弃$控制权，使用 自定变量 接收该方法返回的对象替代$

jquery插件

  1. 基于jquery扩展而来具有一定功能的js文件
    1
    2
    3
    4
    5
    div{
      height:100px;
      width:100px;
      background-color:"blue";
    }
    1
    2
    <div></div>
    <!-- 动画颜色 渐变没能实现 ->
1
$("div").animate({"width",500,"backgroundColor":'red'})  //backgroundColor 没用怎么办？

jquery.color库的使用

1
2
3
4
5
6
7
<style>
  div {
    width: 300px;
    height: 300px;
    background-color: green;
  }
</style>
1
<div></div>
1
2
3
4
5
6
7
8
9
10
<script src="jquery-1.12.4.js"></script>
<script src="jquery.color.js"></script>
<script>
  $(function(){
    $('div').animate({
      width: 600,
      backgroundColor: 'red'
    }, 1000)
  });
</script>

jquery.lazyload库的使用

1
2
3
4
5
<style>
  div {
    height: 3000px;
  }
</style>
1
2
3
4
5
<div></div>
<!-- 真实图片的地址放在 data-original-->
<!-- *注意了* 此处不能用src不然浏览器会直接通过src解读图片路径  -->
  <img class="lazy" data-original="1.jpg" alt="" width="500" height="350">
  <img class="lazy" data-original="2.jpg" alt="">
1
2
3
4
5
6
7
8
9
10
<script src="jquery-1.12.4.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
  $("img.lazy").lazyload();

  //带默认占位图片
  $("img.lazy").lazyload({
    placeholder:'图片url'
  });
</script>

jquery插件封装的原理

$.fn.pluginName=function(){}

封装一个小插件

1
2
3
4
5
$.fn.bgc = function(color) {
  // 在$.fn的方法中， this指的就是当前的jquery对象
  this.css('backgroundColor', color);
  return this;
}

封装一个拖拽插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.fn.drag = function() {
  // 使用变量把this给存起来
  var that = this;
  that.on('mousedown', function(e) {
    e.preventDefault();
    var x = e.offsetX; // offsetX 当鼠标事件发生时，鼠标相对于事件源x轴的位置
    var y = e.offsetY; // offsetY 当鼠标事件发生时，鼠标相对于事件源y轴的位置

    $(document).on('mousemove', function(e) {
      that.css({
        position: 'absolute',
        left: e.pageX - x,   //pageX  整个页面包括包括被卷曲
        top: e.pageY - y
      });
    });
  });

  that.on('mouseup', function() {
    $(document).off('mousemove');
  });

  return that;
};