javascript - 在单个函数中使用 JavaScript 和 jQuery (Nodes & Stuff)

Question

我目前正在学习 jQuery。我知道 jQuery 是 JavaScript 的自定义库。

我正在做一些仅使用 JavaScript 的书中的学习示例，为了进一步提高我的学习经验，我正在尝试将 jQuery 用于任何可能更高效的事情。

所以，我有这段代码:

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if (document.getElementById('currentWord').childNodes.length > 0) {
        $('#currentWord p').append(letter);
    } else {
        var p = document.createElement('p');    
        var txt = document.createTextNode(letter);
        p.appendChild(txt);
        $('#currentWord').append(p);        
    }
}

问题 #1:

如果我将 document.getElementById('currentWord').childNodes.length 更改为 $('#currentWord').childNodes.length 它不起作用。我认为 jQuery 选择器与 JS document.getElementById 是一样的，因为它让我返回了 DOM 元素。如果是这样，那么能够在其上使用 .childNodes.length 函数就有意义了；但它不起作用。我想这不是一回事吧？

问题 #2:

代码为教科书代码。我已经添加了其中的所有 jQuery。我的 jQuery 知识有限，有没有更有效的方法来执行该函数？

函数的用途:

这个函数应该创建一个 p 元素并在它第一次运行时用一个文本节点填充它。如果已经创建了 p 元素，它只是将字符附加到其中。

这是一个单词生成游戏，所以您点击一个字母，它就会被添加到“currentWord”div 中。 tile 的字母嵌入在第 3 个 css 类中，因此进行了 attr 拆分。

谢谢!

Answer 1

document.getElementById('currentWord')

返回一个 DOM 对象，而 $('#currentWord') 返回一个包裹在 jQuery 对象中的 DOM 对象。

要获取普通的 DOM 对象，您可以这样做

$('#currentWord').get(0)

所以

$('#currentWord').get(0).childNodes.length

应该可以。