首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

[学习jquery]深入了解jquery(1)-jquery对象

作者:  时间: 2011-06-10

题记: 使用了jquery时间有两年了, 使用js也有3年了。 自认为略懂了一些, 不再是门外汉。 那么我应该也写写博客了, 系统地梳理一次学习过的知识。 温故而知新嘛,也养成自己写博客的习惯,提高写作水平, 为以后可能的转型做准备。

一切从简

$(document).ready(function () {
            var jqObj = $("div");
        });

这里的jqobj到底是一个什么对象呢?firebug得到它是一个这样的对象。通过jqobj.constructor得到的是object而不是array。 那么肯定它是一个伪数组。(什么的伪数组?伪数组)。 好, 让我们深入进去, 看看jquery到底返回一个什么对象。

下面是我从jquery中摘下来的简略版的中心代码:

(function () {
    var jquery = window.jquery = $ = window.$ = function (selector, context) {
        return new jquery.fn.init(selector, context);
    }
    $.prototype = jquery.fn = jquery.prototype = {
        init: function (selector, context) {
            if (selector.nodeType == 1) {
                this[0] = selector;
                this.length = 1;
                return this;
            }
 
        }
    }
    jquery.prototype.init.prototype = $.prototype;
 
})();

返回的也是一个和jquery一样的对象。 不过目前还没有jquery那样多的属性和支持方法。我们来分解一下 $(“div”)这个动作.

执行到function (selector, context) {        return new jquery.fn.init(selector, context);     }. context为上下文, 不填的话jquery默认为document. 在此我们暂时忽略.return new jquery.fn.init(selector, context); 这样我们可以初步得出结论. 返回的是jquery.fn.init方法类的实例.

 

这时候, 我们疑问了. 因为jquery返回回来的对象有很多的方法, 比如html(), each(),等等. 嗯. 关键在于jQuery.fn.init.prototype = jQuery.fn;这句话,相当于init类原型式继承了jQuery类. 不过这里不是完全继承. 只是获取了jQuery的原型方法.

我们给jquery.prototype加上如下方法:

, css: function (cssjson) {
            for (var i = 0; i < this.length; i++) {
                for (var stylename in cssjson) {
                    this[i].style[stylename] = cssjson[stylename];
                }
            }
            return this;
        } 
这样我们发现$(document)对象有css方法了.(现在我们的类库还只能支持dom元素, 以后再加上其他的selector)
 
 
 

总结:

1. jquery对象是一个伪数组, 是jquery.fn.init类的实例.

2. jquery对象的成员是init类this的成员 + jquery.prototype成员

3. 通过jquery.fn.extend({……});扩展的成员.