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;
    });
}