为什么不能在JavaScript中使用document.getElementById替换$？_Javascript_Jquery_Html

为什么不能在JavaScript中使用document.getElementById替换$？

javascript jquery html

为什么不能在JavaScript中使用document.getElementById替换$？,javascript,jquery,html,Javascript,Jquery,Html,我是JavaScript的新手，我使用一段代码将JSON转换为HTML表下面是JavaScript代码： function buildHtmlTable(myList,printSource,tablename) { var columns = addAllColumnHeaders(myList); var title = document.getElementsByTagName("caption"); title.innerHTML="<h>"+

我是JavaScript的新手，我使用一段代码将JSON转换为HTML表

下面是JavaScript代码：

function buildHtmlTable(myList,printSource,tablename) {
     var columns = addAllColumnHeaders(myList);
     var title = document.getElementsByTagName("caption");
     title.innerHTML="<h>"+printSource+"</h>";
     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];

             if (cellValue == null) { cellValue = ""; }

             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
     }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(myList) {
     var columnSet = [];
     var headerTr$ = $('<tr/>');

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);

     return columnSet;
}

以下是我的HTML代码：

<body onload="buildHtmlTable(data_epgd, epgd);">
    <table id="excelDataTable" border="1">
        <caption>sn</caption>
    </table>
</body>

如您所见，$excelDataTable有一个用法。我认为在HTML中查找元素就像document.getElementById函数一样，所以我使用document.getElementById来替换它。但是当我这样做的时候，代码不再工作了。那么有人能解释document.getElementByIdexcelDataTable和$excelDataTable之间的区别吗？为什么我不能使用document.getElementByIdexcelDataTable作为替代？

使用$实际上不仅仅是一个选择器，它还将其包装在jQuery对象中。稍后在脚本中，您将使用jQuery函数，如.append，而这些函数对普通对象不起作用。您可以做的是定期选择它，当您需要jQuery函数时，再次包装$it

此外，选择器应该是字符串“element”，而不是Fred提到的可变元素。

下面的行将返回jQuery对象

$("#excelDataTable")

同时使用

document.getElementById(excelDataTable)

将返回一个DomeElement对象，该对象显然没有jQuery方法

jQuery还接受传递给构造函数的DOM元素。因此，最终你可以这样做

$(document.getElementById(excelDataTable))

$是jQuery的缩写。它实际上是一个返回jquery兼容对象集合的函数，因此jquery函数可以用于这些元素，如append、empty等。在jquery中，$通常用作选择器函数，但它不仅仅是选择器

我们可以向它传递一个选择器，以从DOM获取包装到jquery对象集合中的匹配元素集合。例如$'.btnClass'，$'id'，$'table'

我们可以向它传递一个HTML字符串，将其转换为DOM元素，然后将其用于文档中

3.我们可以向它传递一个或多个要用jQuery对象包装的DOM元素

有关更多详细信息，请参阅文档

jQuery中的$'selector'返回一个jQuery对象，而getElementById'id'返回一个元素对象。它们是行为稍有不同的不同对象。$更像document.querySelectorAll。它应该是$document.getElementByIdexcelDataTable或$document.getElementByIdexcelDataTable？第二个，$document.getElementByIdexCeldataTable执行$document.getElementById是我读过的最糟糕的事情。你在使用jquery？使用它。如果不想使用jquery，请使用纯js。不要使用这两个感谢你的帮助和详细的答案@FredMaggiowski，我们听到我们想听到的。。。我没说把它组合成一个表达式是有意义的。这只是上面语句的一个例子，jQuery也接受DOM元素。因此，如果有一个DOM元素对象，您总是可以将其转换为jQuery对象。使用它代替它有什么关系吗。我有点困惑，在大多数情况下，它们都工作得很好吗？而且都很好。不过，最好在整个代码库中使用一种样式。另外值得注意的是，如果您在json文件中，则只允许使用。感谢您的有用且详细的回答！我注意到FredMaggiowski说$document.getElementById是一个糟糕的表达式，但是如果我希望$excelDataTable中的字符串excelDataTable是一个变量，我可以用一个变量替换字符串，比如$variable吗？>选择器应该是一个字符串“element”，而不是一个变量元素。您的语句不正确。getElementById'element'可以重写为var element='element'；document.getElementByIdeElement。应该使用JavaScript字符串。类似“string”的文本或其值/返回值计算为JavaScript字符串的变量/函数