【你的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_  阅读(587)  评论(0编辑  收藏  举报

导航