Question

我是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")的用法。我认为它就像document.getElementById函数一样在HTML中查找元素。所以我使用document.getElementById来替换它。但是当我这样做时，代码不再起作用。所以有人可以解释document.getElementById(excelDataTable)和$("#excelDataTable")之间的区别是什么？为什么我不能使用document.getElementById(excelDataTable)作为替代？

Answer 1

使用$()实际上不仅仅是一个选择器，它还将它包装在一个jQuery对象中。稍后在您的脚本中使用jQuery函数，如.append，这些函数不适用于vanilla对象。你可以做的是定期选择它，当你需要jQuery函数时，你再次包装它（$()）。

此外，选择器应该是一个字符串（'element'）而不是变量（element），就像Fred提到的那样。

Answer 2

下面的行将返回一个jQuery对象

$("#excelDataTable")

同时使用

document.getElementById(excelDataTable)

将返回一个DOMElement对象，它显然没有jQuery方法。

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

$(document.getElementById(excelDataTable))

Answer 3

$()是jQuery（）的简写。它实际上是一个函数，它返回jquery兼容对象的集合，以便jquery函数可以用在这些元素上，如append（），empty（）等。$（）通常用作Jquery中的选择器函数，但它不仅仅是选择者......

我们可以传递一个选择器来获取包含在DOM的jquery对象集合中的匹配元素的集合..像$('.btnClass'),$('#id'),$('table')。
我们可以将一串HTML传递给一个DOM元素，然后您可以将其用于文档中。

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

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

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

3 个答案: