zoukankan      html  css  js  c++  java
  • [学习jquery]深入了解jquery(1)jquery对象

    题记: 使用了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({……});扩展的成员.

    参考资料http://www.cnblogs.com/snandy/category/285213.html

  • 相关阅读:
    LeetCode 515. 在每个树行中找最大值(Find Largest Value in Each Tree Row)
    LeetCode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)
    LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)
    LeetCode 1022. 从根到叶的二进制数之和(Sum of Root To Leaf Binary Numbers)
    LeetCode 897. 递增顺序查找树(Increasing Order Search Tree)
    LeetCode 617. 合并二叉树(Merge Two Binary Trees)
    LeetCode 206. 反转链表(Reverse Linked List) 16
    LeetCode 104. 二叉树的最大深度(Maximum Depth of Binary Tree)
    LeetCode 110. 平衡二叉树(Balanced Binary Tree) 15
    LeetCode 108. 将有序数组转换为二叉搜索树(Convert Sorted Array to Binary Search Tree) 14
  • 原文地址:https://www.cnblogs.com/jianjialin/p/2077859.html
Copyright © 2011-2022 走看看