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

时间:2012-05-01 23:03:52

标签: javascript jquery

我有这个简单的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

3 个答案:

答案 0 :(得分:4)

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();

答案 1 :(得分:3)

jQuery对象本质上只是DOM元素的包装器,因此为了访问DOM元素本身,您可以使用.get(0)或[0]:

$('#TaskId').get(0).options[0].text;

// OR

$('#TaskId')[0].options[0].text;

答案 2 :(得分:2)

两种可能的解决方案:

var innerText = innerS[0].options[0].text; 
// Are you sure about .text? I never used it.

var innerText = $("#TaskId option:first").text();