為什么不能使用document.getElementById替換JavaScript中的$？

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對象集合中的匹配元素的集合.. like $('.btnClass'),$('#id'),$('table') 。
我們可以將一串HTML傳遞給一個DOM元素，然后您可以將其用於文檔中。
3.我們可以傳遞一個或多個要用jQuery對象包裝的元素。
有關詳細信息，請參閱文檔文檔

為什么不能使用document.getElementById替換JavaScript中的$？

問題描述

3 個解決方案

解決方案1
3 2016-04-23 07:46:41

解決方案2
0 2016-04-23 07:48:37

解決方案3
0 2016-04-23 08:15:33

為什么不能使用document.getElementById替換JavaScript中的$？

問題描述

3 個解決方案

解決方案1 3 2016-04-23 07:46:41

解決方案2 0 2016-04-23 07:48:37

解決方案3 0 2016-04-23 08:15:33

解決方案1
3 2016-04-23 07:46:41

解決方案2
0 2016-04-23 07:48:37

解決方案3
0 2016-04-23 08:15:33