3

これは実際にはあまり実用的な質問ではなく、より理論的な質問ですが、現在書いているコードに影響を与えるので、先に進んで質問します.

JQuery を使用して XML フィードを解析し、返された XML 要素に基づいてページ要素を作成しています。XML は JQuery オブジェクトに変換され、要素へのアクセスはすべてうまくいっています。

ある時点で、値を取得するときに、要素が存在するかどうかをテストし、 を使用してその内容を取得します.text()。テキストをチェックする前に、セレクターが何かを返したことを確認するために注意してチェックしたかったのですが、何かおかしいことに気付きました。. . .text()気にしないようです。セレクターによって返された JQuery オブジェクトが空の場合、それを使用.text()すると返さ""れます。

「カッコイイ」と思っていたら、 と で挙動が違うことに気が付きまし.html()た.val()。. . returnと.html()returns (Firefox では . . . IE では、両方とも return )。null.val()undefinedundefined

やってみて：

var tempVal = $("#noWayThisIsAnElement");
window.console.log(tempVal.text());          // returns ""
window.console.log(tempVal.html());          // returns null (undefined, in IE)
window.console.log(tempVal.val());           // returns undefined

それで、誰かがこれの背後にある理由が何であるか知っていますか?

私が尋ねる主な理由は、彼らが（概念的に）同様の種類の値を探していることを考えると、「おっと、それはできない」という結果が同じになると思うからです。

.val()3 つのデータ型のいずれかを返すことができるため、他の 2 つとは異なる可能性があることがわかると思いますが、それを削除しても、両方とも文字列.text()を返し、それらの文字列は DOM ノードのコンテンツを表します。.html(). . JQuery オブジェクトがノードへの参照を保持していない場合、どちらも同様の結果になると思われます。

ですから、今のところ 2 つの状況に応じて別の方法でコーディングすると思いますが、それまでの間、ここで何か洞察を持っている人はいますか?

更新: ケビン B は、定義されていない属性.val()を探しているという点で、良い点を指摘しています (なぜ私がそれを考えなかったのか、実際には:D ) 。これは、この状況でvalueの の動作とも一致しています。.attr()

.text()ただし、との違い.html()はまだ開いています。:)

4

1 に答える 1

1

それは実装から来ています：

val()

val: function( value ) {
        var ret, hooks, isFunction,
            elem = this[0];

        if ( !arguments.length ) {
            if ( elem ) {
                hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

                if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                    return ret;
                }

                ret = elem.value;

                return typeof ret === "string" ?
                    // handle most common string cases
                    ret.replace(rreturn, "") :
                    // handle cases where value is null/undef or number
                    ret == null ? "" : ret;
            }

            return;
        }

ご覧のとおり、elem がない場合 (つまり、空の jquery オブジェクト)、直接関数をreturn;実行します。undefined

文章（）

jQuery.fn.extend({
    text: function( value ) {
        return jQuery.access( this, function( value ) {
            return value === undefined ?
                jQuery.text( this ) :
                this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
        }, null, value, arguments.length );
    },

getTextjQuery.text()関数の実装です

getText = Sizzle.getText = function( elem ) {
    var node,
        ret = "",
        i = 0,
        nodeType = elem.nodeType;

    if ( !nodeType ) {
        // If no nodeType, this is expected to be an array
        for ( ; (node = elem[i]); i++ ) {
            // Do not traverse comment nodes
            ret += getText( node );
        }
    } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
        // Use textContent for elements
        // innerText usage removed for consistency of new lines (see #11153)
        if ( typeof elem.textContent === "string" ) {
            return elem.textContent;
        } else {
            // Traverse its children
            for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
                ret += getText( elem );
            }
        }
    } else if ( nodeType === 3 || nodeType === 4 ) {
        return elem.nodeValue;
    }
    // Do not include comment or processing instruction nodes

    return ret;
};

ご覧のとおり、空のオブジェクトでは、どの条件にも入りません。ret"" に初期化されているため、"" を返します。

html()

html: function( value ) {
return jQuery.access( this, function( value ) {
    var elem = this[0] || {},
        i = 0,
        l = this.length;

    if ( value === undefined ) {
        return elem.nodeType === 1 ?
            elem.innerHTML.replace( rinlinejQuery, "" ) :
            undefined;
    }

ここでも、それが戻ってくるのを見ることがundefinedできます。null が返される理由はわかりませんが、そのとおりです。Chrome でテストしました。

他の人がこの投稿を完了できる場合。

于 2013-11-14T23:19:44.513 に答える