【你的jQuery？是你的jQuery】（二）——jQuery的组成

目的：

 

了解什么是jQuery对象，以及jQuery对象的原型方法和静态方法

 

解析：

复制上一篇中“二”部分的代码：

一、

 1  (function (window, undefined) {
 2  　　var jQuery = window.jQuery = window.$ = function (selector, context) {
 3  　　　　return new jQuery.fn.init(selector, context);
 4  　　 }
 5  　　 jQuery.fn = jQuery.prototype = {
 6  　　　　 　　 init: function (selector, context) {
 7              },
 8              jquery: "xxx",
 9              css:function(){
10              },
11              attr:function(){
12              },
13       } 
14  jQuery.fn.init.prototype = jQuery.fn;
15  })(window)
16  alert($().jquery)    //成功构造出$(oo).xx这种东西

构造出来的东西就是jQuery对象，也就是new一个jQuery.fn.init的实例,这个实例天生获得的方法就是jQuery对象的原型方法，也就是代码中的红色部分。

那么什么又是静态方法呢？

先来看一个函数：

二、

 1  jQuery.extend = jQuery.fn.extend = function (obj, target) {
 2         target = target || this; //若不传target的话，默认扩展自己，也就是jQuery
 3         for (var name in obj) {
 4             target[name] = obj[name];
 5         }
 6         return target;
 7  }
 8  jQuery.extend({
 9        each:function(){},
10        trim:function(){}
11 })

当然源码的extend要比这个牛逼，我这只是提出了简单的复制属性的部分，而这足够咱拓展jQuery新方法或属性用的了，这个拓展新的东西就是静态方法，也就是说不用实例化就能用，形如$.each(),$.trim()这种。

这样，了解了原型方法和静态方法，我们就可以大刀阔斧的进行扩展了，要jQuery对象天生就有的东西，就往jQuery.prototype={}里面写，要直接扩展jQuery.XX的话，就在jQuery.extend({})里面写。

 

（本篇至此，其他内容未完，待续……）

 

下一节提示：

重点来了！利用Sizzle从右到左的思路，打造自己的CSS选择器

posted on 2013-05-15 22:33  _xiaoMo_  阅读(602)  评论(0)  编辑  收藏  举报

导航