jQuery $("#someId) vs document.getElementById('someId')，访问相同的 DOM 元素看到不同的结果

我是javascript和jQuery的新手，所以这可能是一个愚蠢的问题 -

我

正在尝试将行附加到 html 表中，我看到了一些让我感到奇怪的东西：

当我使用 document.getElementById（'my_table'）访问我的 html 表时，我得到对象 HTMLTableElement，然后我可以做一些事情，比如 insertRow（-1）等，但是当我通过 jquery - $（'#my_table'）访问同一个 html 表时，我得到了对象 Object，它显然没有任何我需要的方法。什么给？

谢谢！

代码如下：

<html>
  <head>
    <title>FOO </title>
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        console.log('ready');
        var data = [
          { "amount":"medium",
            "notes":"chicken teriyaki bento box",
            "date_time":"1391029200",
            "type":"lunch",
            "id":18},
          { "amount":"small",
            "notes":"bread, meat balls",
            "date_time":"1391645306",
            "type":"lunch",
            "id":24}
        ]; 
        data.forEach(function(row) {
            for (var key in row) {
              $('body').append(row[key] + ' ');
            }
            $('body').append('<br>');
          });
        // append to table
        (function() {
          var my_table_jq = $("#my_table");
          $('body').append(Object.prototype.toString.call(my_table_jq));
          var my_table_js = document.getElementById('my_table');
          $('body').append(Object.prototype.toString.call(my_table_js));
        })();

      });
    </script>
  </head>
  <body>
    <table id="my_table" border="1">
      <tr>
        <th>Date</th><th>Meal</th><th>Amount</th><th>Notes</th>
      </tr>
    </table>
  </body>
</html>

你通过jQuery id选择器得到的对象是jQuery对象而不是DOM对象，你必须将其转换为DOM对象。可以使用索引器将其转换为DOM对象。你也可以使用 jQuery .get（ index）来获取 DOM 对象。

改变

$('#my_table')

自

$('#my_table')[0]

或

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

调用 jQuery（）（或 $（））并使用 id 选择器作为其参数将返回一个包含零或一集合的 jQuery 对象 DOM 元素，jQuery doc。

当你访问像$('#my_table')这样的对象时，你会得到一个jQuery对象。您可以使用 jQuery API 来操作此对象。例如，如果您希望将删除行添加到表中，则可以使用"append"等函数来实现。你可以参考这里的jQuery api文档。例如，我编辑了您的代码以将 JSON 对象数据添加到表中

<!DOCTYPE html>
<html>
<head>
    <title>FOO </title>
    <script src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            console.log('ready');
            var data = [
              {
                  "amount": "medium",
                  "notes": "chicken teriyaki bento box",
                  "date_time": "1391029200",
                  "type": "lunch",
                  "id": 18
              },
              {
                  "amount": "small",
                  "notes": "bread, meat balls",
                  "date_time": "1391645306",
                  "type": "lunch",
                  "id": 24
              }
            ];
            data.forEach(function (row) {
                $('#my_table tbody').append('<tr>');
                $('#my_table tbody').append('<td>' + row['date_time'] + '</td>');
                $('#my_table tbody').append('<td>' + row['type'] + '</td>');
                $('#my_table tbody').append('<td>' + row['amount'] + '</td>');
                $('#my_table tbody').append('<td>' + row['notes'] + '</td>');
                $('#my_table tbody').append('</tr>');
            });
        });
    </script>
</head>
<body>
    <table id="my_table" border="1">
        <tr>
            <th>Date</th>
            <th>Meal</th>
            <th>Amount</th>
            <th>Notes</th>
        </tr>
    </table>
</body>
</html>

尝试这样的事情

document.getElementById('my_table'); //returns a HTML DOM Object
$('#my_table');  //returns a jQuery Object
$('#my_table')[0]; //returns a HTML DOM Object

document.getElementById（'id'）将返回一个原始 DOM 对象。
$（'#id'）将返回一个 jQuery 对象，该对象包装 DOM 对象并提供 jQuery 方法。

相关内容

最新更新

热门标签：