jQuery源码分析(6) - $.xxx()和$().xxx()幕后

把以前看的jQuery源码的分析笔记搬到博客上，重温经典，也是为了方便查询。

 

众所周知，jQuery有二种方法调用形式，$.xxx()和$().xxx()。

$.xxx()：可以给jQuery对象和原生js对象用，也就是俗称的工具方法；

$().xxx()：只能给jQuery对象使用。

 

工具方法常用的有：

$.type()：  判断类型，功能更强，可以具体区分出数组、json、正则、时间、null；

$.trim()：  去除空格

$.noConflict()： 防止冲突

$.ajax()：发起ajax请求

...

 

jQuery对象常用的方法就太多啦，css(), html(), append(）... 

 

那这二种方法分别如何定义呢？先来看工具方法：

<script src="jquery-1.9.1.min.js"></script>
<script>
$.extend({
  leftTrim:function (str) {
    return str.replace(/^\s+/,'');
  }
});
</script>
<script>
$(function () {
  var str = ' hello ';
  alert('('+$.leftTrim(str)+')');
});
</script>

 

再看jQuery对象的实例方法：

<script src="jquery-1.9.1.min.js"></script>
<script>
$.fn.extend({
  drag:function () {
  var disX = 0;
  var disY = 0;
  var This = this;
  this.mousedown(function (ev) {
    disX = ev.pageX - $(this).offset().left;
    disY = ev.pageY - $(this).offset().top;
    $(document).mousemove(function (ev) {
      This.css('left',ev.pageX-disX);
      This.css('top',ev.pageY-disY);
    });
    $(document).mouseup(function () {
      $(this).off();
    });
    return false;
  });
 }
});
</script>
<script>
$(function () {
  $('div').drag();
});
</script>

 

背后实现的原理：

jQuery.extend = jQuery.fn.extend = function() {};

可以看到，jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用。

jQuery.extend 对jQuery本身的属性和方法进行了扩展， jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展。

 

针对fn与jQuery其实是2个不同的对象：

1）调用jQuery.extend，this指向jQuery对象，所以这里的方法是扩展在jQuery上。

2)  调用jQuery.fn.extend，this指向fn对象，扩展fn就是扩展jQuery.prototype原型对象。