Question

Javascript选择的元素与使用jQuery选择的相同元素之间的区别是什么？

我遇到了这个问题，试图从一个带有jQuery的元素中选择Html5数据属性，即使数据集已经明确设置，数据集也会返回undefined。然而，选择具有常规javascript的元素完全正常。所以幕后的不同就是阻止这个例子的运作。

＆＃13;

var jsSelect = document.getElementById("jsSelect");
alert(jsSelect.dataset.name);

var jqSelect = $("#jsSelect");
alert(jqSelect.dataset.name);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsSelect" data-name="Javascript"></div>

＆＃13;

Answer 1

Javascript选择的元素与使用jQuery选择的相同元素之间的区别是什么？

元素没有区别，但是jQuery会返回包含在jQuery对象中的元素，而DOM会为您提供对元素本身的引用。 jQuery对象是元素的集（因为它允许您选择多个元素并将它们视为一组）。

要从jQuery对象获取元素本身，可以像数组一样索引它：

var rawElement = jqSelect[0];
alert(rawElement.dataset.name);

var jsSelect = document.getElementById("jsSelect");
snippet.log(jsSelect.dataset.name);

var jqSelect = $("#jsSelect");
var rawElement = jqSelect[0];
snippet.log(rawElement.dataset.name);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsSelect" data-name="Javascript"></div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

要处理data-*属性，您还可以使用jQuery的attr函数：

alert(jqSelect.attr("data-name"));

var jsSelect = document.getElementById("jsSelect");
snippet.log(jsSelect.dataset.name);

var jqSelect = $("#jsSelect");
snippet.log(jqSelect.attr("data-name"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsSelect" data-name="Javascript"></div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

你可以使用jQuery的data函数，但阅读文档很重要 - data 不只是{{{}的便利包装1}}。 dataset管理一个完全独立的数据缓存，该缓存仅来自data属性已初始化（它不会更新它们）。

data-*

var jsSelect = document.getElementById("jsSelect");
snippet.log(jsSelect.dataset.name);

var jqSelect = $("#jsSelect");
snippet.log(jqSelect.data("name"));

// Note that `data` doesn't change the attribute:
jqSelect.data("name", "new name");
snippet.log("Attribute after changing with data: " +
            jqSelect.attr("data-name"));

// But you can retrieve the updated info via `data`
snippet.log("Data value after changing with data: " +
            jqSelect.data("name"));

您可能想知道为什么，如果jQuery对象是 set 元素，您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="jsSelect" data-name="Javascript"></div>  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>从元素中获取attr属性 - 该元素执行它得到的属性？像data-name这样的jQuery访问器函数是不对称的：如果你检索信息，他们会从集合中的第一个元素中检索它;如果您设置信息（attr），则会将其设置为所有元素中的元素。这听起来很疯狂，但效果出奇的好。

Answer 2

如果jQuery jqSelect是一个jQuery对象，所以它没有dataset属性，但你可以使用data api

＆＃13;

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();

var jsSelect = document.getElementById("jsSelect");
log('native api:' + jsSelect.dataset.name);

var jqSelect = $("#jsSelect");
log('jquery api:' + jqSelect.data('name'));

var jqSelect = $("#jsSelect");
log('Using prop:' + jqSelect.prop('dataset').name);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsSelect" data-name="Javascript"></div>
<div id="log"></div>

＆＃13;

选择元素| Javascript vs Jquery

2 个答案: