4

我目前正在学习 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);        
    }
}

问题一：

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

问题2：

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

该函数的目的：

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

这是一个单词生成游戏，所以你点击一个字母，它就会被添加到一个'currentWord' div 中。瓦片的字母嵌入在第三个 css 类中，因此 attr 分裂。

谢谢！

4

6 回答 6

2 
document.getElementById('currentWord')

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

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

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

所以

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

应该管用。

于 2012-08-22T15:59:44.087 回答
1

问题一：

jQuery 返回一个 jQuery 对象。要将其返回给常规的 javascript 对象$(object)[0]，您可以将其视为普通的 javascript（或 DOM）对象。

问题2：

效率对我来说看起来不错。尽管您可能想使用跨度而不是p元素。

我想您可以做的一件事（即使您的看起来运行得非常快）是缓存 dom 元素：

function addLetter(foo) {
 $(foo).unbind('click');
 var tileLetter = $(foo).attr('class').split(' ');
 var letter = tileLetter[2].charAt(1);
 var currentWord = document.getElementById('currentWord');
 if (currentWord.childNodes.length > 0) {
    $(currentWord).find('p').append(letter);
 } else {
    var p = document.createElement('p');    
    p.innerHTML = letter;
    currentWord.appendChild(p);        
 }
}
于 2012-08-22T16:03:53.623 回答
1

对jQuery()函数 ( $()) 的调用返回一个包含匹配元素的 jQuery 对象，而不是元素本身。

然后，调用$('#some-id')将返回一个 jQuery 对象，其中包含将通过执行选择的元素document.getElementById('some-id')。为了直接访问该元素，您可以使用.get()函数或数组索引语法从该 jQuery 对象中获取它：（$('#some-id')[0]它是 0-indexed）。

于 2012-08-22T16:00:00.490 回答
0

1：使用$.get(0)or$[0]获取 DOM 元素。前$('#currentWord')[0].childNodes.length。

2：试试这个：

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if ($('#currentWord p').length > 0) {
        $('#currentWord p').append(letter);
    } else {
        $('#currentWord').append(
            $('<p />', { text: letter })
        );        
    }
}
于 2012-08-22T16:01:48.053 回答
0

我认为您可以通过调用 text 函数来替换所有这些。

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    var currentWordP = $('#currentWord p');
    if (currentWordP.size() > 0) {
        currentWordP.text(currentWordP.text() + letter);
    } else {
        $('#currentWord').append("<p>" + letter + "</p>");       
    }
}
于 2012-08-22T15:59:56.087 回答
0

问题一：

document.getElementById 返回 DOM 对象。更多的

childNodes.length 是由 document.getElementById 返回的 Node 对象的属性。

jQuery 选择器返回 jQuery 对象more。您可以使用.get从 jQuery 对象获取 DOM 对象

$('#IDselector').get(0) = document.getElementById('IDselector')

问题2：

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if ($('currentWord p').length > 0) {
        $('#currentWord p').append(letter);
    } else {
        var p = $('<p />').text(letter);
        $('#currentWord').append(p);        
    }
}
于 2012-08-22T16:06:54.897 回答