jquery - .fadeIn() 作用于什么？| $("#id") 返回什么？

Question

这是fadeIn() 的 jQuery API。

如果我使用这样的简单 id。

$("#id").fadeIn();

返回什么$("#id")，它是一个简单的 DOM 元素吗？

我再次查看了 jQuery API，但他们没有注意到函数原型中的返回类型：

http://api.jquery.com/jQuery/

作为一个附带问题：

如果是简单的 DOM 元素，jQuery 是如何将fadeIn() 与返回的元素关联起来的呢？编译器如何知道找到元素的 fadeIn()？

Answer 1

这是一个 jQuery选择器，它返回一个包裹在jQuery 对象中的 DOM 元素数组。您可以使用以下方法解开原始 DOM 元素：

$("#id")[0]

包装对象的好处在于它将方法委托给包装数组的每个元素，例如，如果您使用：

$('div.content').fadeIn();

它将淡入您文档中找到的所有<div>元素。class="content"

Answer 2

What does $("#id") return, is it a simple DOM element?

不，它是一个包裹在 jQuery 对象中的 DOM 元素。

有几种方法可以打开它，例如$("#id").get(0)或$("#id")[0]。从基准测试来看，$("#id")[0]似乎是最快的。

What does .fadeIn() act on?

fadeIn 调用这个 jquery 代码：

http://api.jquery.com/animate/

function (d, e, f) {
 //.animate( properties [, duration] [, easing] [, complete] )
 return this.animate(b, d, e, f);
}

然后调用动画代码：

animate: function( prop, speed, easing, callback ) {
    var optall = jQuery.speed(speed, easing, callback);

    if ( jQuery.isEmptyObject( prop ) ) {
        return this.each( optall.complete );
    }

    return this[ optall.queue === false ? "each" : "queue" ](function() {
        // XXX 'this' does not always have a nodeName when running the
        // test suite

        var opt = jQuery.extend({}, optall), p,
            isElement = this.nodeType === 1,
            hidden = isElement && jQuery(this).is(":hidden"),
            self = this;

        for ( p in prop ) {
            var name = jQuery.camelCase( p );

            if ( p !== name ) {
                prop[ name ] = prop[ p ];
                delete prop[ p ];
                p = name;
            }

            if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) {
                return opt.complete.call(this);
            }

            if ( isElement && ( p === "height" || p === "width" ) ) {
                // Make sure that nothing sneaks out
                // Record all 3 overflow attributes because IE does not
                // change the overflow attribute when overflowX and
                // overflowY are set to the same value
                opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

                // Set display property to inline-block for height/width
                // animations on inline elements that are having width/height
                // animated
                if ( jQuery.css( this, "display" ) === "inline" &&
                        jQuery.css( this, "float" ) === "none" ) {
                    if ( !jQuery.support.inlineBlockNeedsLayout ) {
                        this.style.display = "inline-block";

                    } else {
                        var display = defaultDisplay(this.nodeName);

                        // inline-level elements accept inline-block;
                        // block-level elements need to be inline with layout
                        if ( display === "inline" ) {
                            this.style.display = "inline-block";

                        } else {
                            this.style.display = "inline";
                            this.style.zoom = 1;
                        }
                    }
                }
            }

            if ( jQuery.isArray( prop[p] ) ) {
                // Create (if needed) and add to specialEasing
                (opt.specialEasing = opt.specialEasing || {})[p] = prop[p][1];
                prop[p] = prop[p][0];
            }
        }

        if ( opt.overflow != null ) {
            this.style.overflow = "hidden";
        }

        opt.curAnim = jQuery.extend({}, prop);

        jQuery.each( prop, function( name, val ) {
            var e = new jQuery.fx( self, opt, name );

            if ( rfxtypes.test(val) ) {
                e[ val === "toggle" ? hidden ? "show" : "hide" : val ]( prop );

            } else {
                var parts = rfxnum.exec(val),
                    start = e.cur() || 0;

                if ( parts ) {
                    var end = parseFloat( parts[2] ),
                        unit = parts[3] || "px";

                    // We need to compute starting value
                    if ( unit !== "px" ) {
                        jQuery.style( self, name, (end || 1) + unit);
                        start = ((end || 1) / e.cur()) * start;
                        jQuery.style( self, name, start + unit);
                    }

                    // If a +=/-= token was provided, we're doing a relative animation
                    if ( parts[1] ) {
                        end = ((parts[1] === "-=" ? -1 : 1) * end) + start;
                    }

                    e.custom( start, end, unit );

                } else {
                    e.custom( start, val, "" );
                }
            }
        });

        // For JS strict compliance
        return true;
    });
}