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 splitting。

谢谢！

Answer 1

document.getElementById('currentWord')

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

要获取普通DOM对象，您可以

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

所以

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

应该有用。

Answer 2

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

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

Answer 3

问题＃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);        
 }
}

Answer 4

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

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

Answer 5

1：使用$.get(0)或$[0]获取DOM元素。 e.x. $('#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 })
        );        
    }
}

Answer 6

问题＃1：

document.getElementById返回DOM对象。 more

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

使用JavaScript＆amp;单个函数中的jQuery（Nodes＆amp; Stuff）

6 个答案: