选择元素| Javascript vs Jquery

Question

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

我遇到了这个问题,试图从一个带有jQuery的元素中选择一个Html5数据属性,即使它被清楚地设置,数据集也会返回undefined.然而,使用常规javascript选择元素完全正常.那么幕后的不同就是阻止这个例子的运作.

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

var jqSelect = $("#jsSelect");
alert(jqSelect.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>

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是不是只是一个方便的包装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"));

<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对象是一组元素,您可以使用从元素attr获取data-name属性 - 它从哪个元素获取属性？jQuery的访问器函数就像attr是不对称的:如果你正在检索信息,他们会从集合中的第一个元素中检索它; 如果您正在设置信息(jqSelect.attr("data-name", "newvalue")),则会将其设置在集合中的所有元素上.这听起来很疯狂,但效果出奇的好.