javascript - 如何从 jQuery 选择器访问 javascript 方法

Question

我有这个简单的js:

var innerText  = document.getElementById("TaskId").options[0].text;

我想知道如何将它转换为 jQuery:

var innerS = $("#TaskId");
var innerText = innerS.options[0].text;

这会引发错误:

innerS.options is undefined

编辑

根据一些争论，我进行了快速速度测试:

js:

var startDat = Date.now();
for (var c = 0; c < 100000; c++) {
    var com = $("#TaskId").get(0);
}
var endDat = Date.now();
alert("jQ.get(0) took " + (endDat - startDat) + "ms");


var startD = Date.now();
for (var co = 0; co < 100000; co++) {
    var com = $("#TaskId")[0];
}
var endD = Date.now();
alert("jQ[0] took " + (endD - startD) + "ms");

var startDa = Date.now();
for (var comp = 0; comp < 100000; comp++) {
    var compa = document.getElementById("TaskId");
}
var endDa = Date.now();
alert("js took " + (endDa - startDa) + "ms");

结果:

jQ.get(0) took 1042ms
jQ[0] took 1057ms
js took 136ms

Answer 1

一个 jQuery 对象包含一个 DOM 元素数组。如果您想直接访问 DOM 元素，有多种方法可以实现直接访问。例如，您可以使用以下命令直接获取第一个 DOM 元素:

var innerS = $("#TaskId").get(0);

现在 innerS 是实际的 DOM 元素，不再是 jQuery 对象。

要获得最快的执行时间，请使用:

var innerS = document.getElementById("TaskId");

jQuery 的编码速度很快，但执行时间并不总是最快，因为 jQuery 对象会带来一些开销(构造它们、对 DOM 元素进行排序等......)。

你可以像这样获取整个 DOM 数组:

var optionElements = $("option").get();

当然，使用 jQuery 对象的原因之一是它们有一组跨浏览器方法，可以在某些情况下轻松使用它们的方法而不是直接 DOM 方法。在您的特定情况下，您可以获得像这样的innerText:

var text = $("#TaskId").text();