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

Why can't use document.getElementById to replace $ in JavaScript?

本文关键字：替换 JavaScript 中的 getElementById 不能 document 为什么      更新时间：2023-09-26

我是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函数一样，在我使用document.getElementById替换元素 HTML.So 中找到一个元素。但是当我这样做时，代码不再起作用了。那么有人可以解释一下document.getElementById(excelDataTable)和$("#excelDataTable")有什么区别吗？为什么我不能使用document.getElementById(excelDataTable)作为替代品？

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

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

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

$("#excelDataTable")

同时使用 

document.getElementById(excelDataTable)

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

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

$(document.getElementById(excelDataTable))

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

  1. 我们可以给它传递一个选择器，从 DOM 获取包装到 jquery 对象集合中的匹配元素集合。像$('.btnClass'),$('#id'),$('table').

  2. 我们可以传递给它一串 HTML 以转换为 DOM 元素，然后您可以将其用于文档中。

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

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

相关文章：