理解jQuery返回对象

Question

我试图了解jQuery在搜索DOM元素时如何创建返回对象.我已经浏览了消息来源,但我并不完全确定我理解,并且希望有人在这里能给我一些见解.

从我可以收集的内容中读取源代码,在查询jQuery DOM时,jQuery找到匹配的DOM元素,然后使用元素的索引作为新对象的键,将匹配的DOM元素添加为对象.

if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
    for ( match in context ) {
       // Properties of context are called as methods if possible
       if ( jQuery.isFunction( this[ match ] ) ) {
             this[ match ]( context[ match ] );    
            // ...and otherwise set as attributes
       } else {
            this.attr( match, context[ match ] );
       }
    }
}    
return this;

返回this,返回包含所有方法的整个jQuery对象.我是否正确到了这一点？

现在,它出现了所有的功能,如css,find,ajax,hide等.在jQuery.fn对象中.

不知何故(我认为这是我没有看到的地方),这些函数被调用,而不是在DOM元素本身,而是通过access.js https://github.com/jquery/jquery/blob/master/ SRC /核心/ access.js

var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {

以css为例,我们有

jQuery.extend({
    css: function( elem, name, extra, styles ) {...

jQuery.fn.extend({
css: function( name, value ) {
        return access( this, function( elem, name, value ) {
            var styles, len,
                map = {},
                i = 0;

            if ( jQuery.isArray( name ) ) {
                styles = getStyles( elem );
                len = name.length;

                for ( ; i < len; i++ ) {
                    map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
                }

                return map;
            }

            return value !== undefined ?
                jQuery.style( elem, name, value ) :
                jQuery.css( elem, name );
        }, name, value, arguments.length > 1 );

我认为我缺少的是我们如何从调用$('div').css(...)调用jQuery.fn.extend.css方法,并从那里,使用与核心jQuery中初始化的访问方法不同的签名调用访问方法？

另外,如果我们不断更换jQuery[0],jQuery[1],我怎么能拥有:

var divs = $('div');
var spans = $('span');

如果它们都返回相同的jQuery对象,则维护两组不同的文档标记？我以为该对象会更新.

我完全误解了这一切是如何起作用的吗？

Answer 1

\n

从我收集到的阅读源代码来看，当查询 jQuery\n DOM 时，jQuery 会找到匹配的 DOM 元素，然后使用元素的索引作为\n new 的键将匹配的 DOM\n 元素添加为对象。目的。

\n

\n\n

是的。jQuery 实例基本上是类似数组的对象。

\n\n

\n

if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {\n    for ( match in context ) {\n       // Properties of context are called as methods if possible\n       if ( jQuery.isFunction( this[ match ] ) ) {\n             this[ match ]( context[ match ] );    \n            // ...and otherwise set as attributes\n       } else {\n            this.attr( match, context[ match ] );\n       }\n    }\n}    \nreturn this;\n

\n

\n\n

但这并不是代码中引用的部分所发生的情况。jQuery(html, attributes)您在这里看到的是处理签名的代码- 当第二个参数是一个对象并且第一个参数是独立的 html 标记时，然后调用相应的方法或在新集合 ( ) 上设置属性this。

\n\n

\n

返回这个，就是返回整个 jQuery 对象，其中包括所有方法。现在，它出现了所有的功能，如css，find，ajax，hide等。位于 jQuery.fn 对象中。

\n

\n\n

是的。jQuery 构造函数返回的对象确实从$.fn原型对象继承了这些方法。

\n\n

\n

不知何故（我认为这是我没有看到的地方），这些函数不是在 DOM 元素本身上调用，而是通过 access.js https://github.com/jquery/jquery /blob/master/src/core/access.js

\n

\n\n

access只是一个内部辅助函数。所有 jQuery 方法都在 jQuery 实例上调用。

\n\n

\n

以 css 为例，我们有

\n\n

jQuery.extend({\n    css: function( elem, name, extra, styles ) {...\n

\n

\n\n

jQuery.css()只是一个“静态”内部辅助函数，用于获取计算的 css 值。没有任何东西是你自己直接使用的。

\n\n

\n

jQuery.fn.extend({\n    css: function( name, value ) {\n        return access( this, function( elem, name, value ) {\n            \xe2\x80\xa6\n        }, name, value, arguments.length > 1 );\n    }\n

\n\n

我想我缺少的是我们如何从调用\n $(\'div\').css(...) 到调用 jQuery.fn.extend.css 方法

\n

\n\n

没有jQuery.fn.extend.css办法。该调用jQuery.fn.extend()确实定义了该jQuery.fn.css方法。这就是您调用的方法 - 它的原型是由$(\'div\').

\n\n

\n

然后，使用与核心 jQuery 中初始化的访问方法不同的签名来调用访问方法？

\n

\n\n

不，你为什么这么想？

\n\n

// the signature:\naccess = function( elems, fn, key, value, chainable, emptyGet, raw )\n// the call:\naccess( this, // array-like collection\n        function(\xe2\x80\xa6){\xe2\x80\xa6}, // callback\n        name, // string\n        value, // whatever\n        arguments.length > 1 // boolean whether it\'s a getter\n        // undefined, implicit\n        // undefined, implicit\n      )\n

\n\n

\n

另外，如果我们不断替换 jQuery[0]、jQuery[1]

\n

\n\n

不，我们不是？你在哪里看到的？

\n\n

\n

我怎么能拥有：var divs = $(\'div\'); var spans = $(\'span\');\n 维护两组不同的文档标签（如果它们都返回相同的 jQuery 对象）？

\n

\n\n

他们不是。这两个调用都会创建新的 jQuery 实例。

\n\n

\n

我以为该对象会被更新。

\n

\n\n

不，jQuery 实例是相当不可变的。

\n