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

  • 相关阅读:
    下一代的前端构建工具:parcel打包react
    vue or react mvvm里的文字上下滚动
    CSS grid layout demo 网格布局实例
    js页面可视区域懒加载
    Vue双向绑定简单实现
    React Router 4.0中文快速入门
    Array.isArray() 和 isObject() 原生js实现
    60分钟课程: 用egg.js实现增删改查,文件上传和restfulApi, webpack react es6 (一)
    mirror.js 整合redux的好工具
    React-redux及异步获取数据20分钟快速入门
  • 原文地址:https://www.cnblogs.com/jianjialin/p/2077859.html
Copyright © 2011-2022 走看看