jquery - 为什么在空 JQuery 对象上使用 .text()、.html() 和 .val() 时，JQuery 会给出不同的结果？

Question

这确实不是一个实际问题，更多的是理论问题，但它确实影响了我目前正在编写的一些代码，所以我会继续问。

我正在使用 JQuery 来解析 XML 提要并根据返回的 XML 元素构建页面元素。 XML 被转换为 JQuery 对象并且获取元素一切顺利。

有一次，当我检索值时，我测试一个元素是否存在并使用 .text() 检索它的内容。我想小心并检查以确保我的选择器在检查文本之前返回了一些东西，但发现了一些有趣的东西。 . . .text() 似乎并不关心。如果选择器返回的 JQuery 对象为空，.text() 在其上使用时将返回 ""。

“很酷”，我想，直到我意识到 .html() 和 .val() 的行为不同。 . . .html() 返回 null 并且 .val() 返回 undefined(在 Firefox 中......在 IE 中，它们都返回 undefined)。

尝试一下:

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() 可能与其他两个不同，因为它可以返回三种数据类型之一，但即使你删除了它，两个 。 text() 和 .html() 返回字符串，这些字符串表示 DOM 节点的内容。 . .你会认为当 JQuery 对象不持有对节点的引用时，它们都会给出相似的结果。

所以，我想我现在只是针对这两种情况编写不同的代码，但与此同时，有人对此有任何见解吗？

---

更新:Kevin B 提出了一个关于 .val() 的好观点(不知道为什么我没有想到它，实际上 :D )正在寻找未定义的 value 属性。这也与 .attr() 在这种情况下的行为一致。

不过，.text() 和 .html() 之间的区别仍然存在。 :)

Answer 1

它来自实现:

验证()

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

getText是jQuery.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 上测试过它。

如果其他人可以完成这篇文章。