了解jQuery返回对象 [英] Understanding jQuery return object

问题描述

我试图了解jQuery在搜索DOM元素时如何创建返回对象.我已经看过源代码，但是我不确定自己是否理解，并希望这里的人可以给我一些见识.

I'm trying to understand how jQuery creates the return object when searching for DOM elements. I've gone through the source, but I'm not completely sure I understand, and was hoping somebody here could give me some insight.

根据我的阅读资料，在查询jQuery DOM时，jQuery找到匹配的DOM元素，然后使用元素的索引作为新对象的键将匹配的DOM元素添加为对象.

From what I can gather reading the source, when querying for a jQuery DOM, jQuery finds matching DOM elements, and then adds the matched DOM element as an object using the index of the element as the key for the new object.

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对象.我现在正确了吗?

Returning this, is returning the entire jQuery object which includes all the methods. Have I got it right to this point?

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

Now, it appears all the functions like css,find,ajax,hide,etc. are in the jQuery.fn object.

以某种方式(我认为这是我没有看到的地方)，这些函数的调用不是在DOM元素本身上，而是通过access.js进行 https://github.com/jquery/jquery/blob/master/src/core/access.js

Somehow (and I think this is where I'm not seeing it), these functions are called, not on the DOM element itself, but through the access.js https://github.com/jquery/jquery/blob/master/src/core/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中初始化?

What I think I'm missing is how did we get from calling $('div').css(...) to that calling the jQuery.fn.extend.css method, and from there, the access method being called with a different signature to the access method initialized in the core jQuery?

此外，如果我们不断更换jQuery[0],jQuery[1]，那我该怎么办:

Also, if we're constantly replacing the jQuery[0],jQuery[1], how is it that I can have:

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

如果两个文档标签都返回相同的jQuery对象，则要维护两个不同的文档标签集?我以为该对象将被更新.

Maintaining two different set of document tags if they are both returning the same jQuery object? I thought the object would be updated.

我完全误解了这是怎么回事吗?

Am I completely misunderstanding how this is all working?

推荐答案

查询jQuery时，据我所读的资料 DOM，jQuery找到匹配的DOM元素，然后添加匹配的DOM 元素作为对象，使用元素的索引作为键 新对象.

From what I can gather reading the source, when querying for a jQuery DOM, jQuery finds matching DOM elements, and then adds the matched DOM element as an object using the index of the element as the key for the new object.

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

Yes. jQuery instances are basically array-like objects.

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;

但是在代码的此引用部分中不会发生这种情况.您在这里看到的是用于处理 jQuery(html, attributes)签名的代码-当第二个参数是一个对象，而第一个参数是独立的html标记时，则调用各自的方法或在新集合(this)上设置属性.

But that's not what happens in this cited section of the code. What you see here is the code for handling the jQuery(html, attributes) signature - when the second argument is an object and the first is standalone html tag, then call the respective methods or set the attributes on the new collection (this).

返回此结果，将返回整个jQuery对象，其中包括 所有方法.现在，出现了所有功能，如css，find，ajax，hide等.在 jQuery.fn对象.

Returning this, is returning the entire jQuery object which includes all the methods. Now, it appears all the functions like css,find,ajax,hide,etc. are in the jQuery.fn object.

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

Yes. The objects that are returned by the jQuery constructor do inherit these methods from the $.fn prototype object.

以某种方式(我认为这是我没看到的地方)，这些功能 被调用，不是在DOM元素本身上，而是通过access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

Somehow (and I think this is where I'm not seeing it), these functions are called, not on the DOM element itself, but through the access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

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

access is just an internal helper function. All the jQuery methods are called on jQuery instances.

以css为例，我们有

using css as an example, we have

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

jQuery.css()只是一个静态"内部帮助函数，用于获取计算出的CSS值.您根本不会直接使用自己的东西.

jQuery.css() is just a "static", internal helper function for getting computed css values. Nothing you'd ever directly use yourself.

jQuery.fn.extend({
    css: function( name, value ) {
        return access( this, function( elem, name, value ) {
            …
        }, name, value, arguments.length > 1 );
    }

我想我想念的是我们从打电话中得到了什么 $('div').css(...)调用jQuery.fn.extend.css方法

What I think I'm missing is how did we get from calling $('div').css(...) to that calling the jQuery.fn.extend.css method

没有jQuery.fn.extend.css方法.对 jQuery.fn.extend() 的调用确实定义了 jQuery.fn.css方法.这就是您调用的方法-它通常是$('div')继承的.

There is no jQuery.fn.extend.css method. That call to jQuery.fn.extend() does define the jQuery.fn.css method. And that's just the method you call - it's prototypically inherited by $('div').

并从那里调用具有不同签名的访问方法 到在核心jQuery中初始化的访问方法?

and from there, the access method being called with a different signature to the access method initialized in the core jQuery?

不，你为什么这么认为?

No, why do you think that?

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

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

Also, if we're constantly replacing the jQuery[0],jQuery[1]

不，我们不是吗?您在哪里看到的?

No, we aren't? Where did you see that?

我怎么能拥有:var divs = $('div'); var spans = $('span'); 如果它们都是两个，则维护两个不同的文档标签集 返回相同的jQuery对象?

how is it that I can have: var divs = $('div'); var spans = $('span'); Maintaining two different set of document tags if they are both returning the same jQuery object?

不是.这两个调用均会创建新的jQuery实例.

They aren't. Both calls do create new jQuery instances.

我认为该对象将被更新.

I thought the object would be updated.

不，jQuery实例是完全不变的.

No, jQuery instances are quite immutable.

这篇关于了解jQuery返回对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！