Question

当jQuery返回一个DOM元素数组时，我很难理解它与jQuery返回单个DOM元素的方式有何不同，如下面的代码所示：

<html>
<head>
<title>A simple login form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
function validateInput() {
    var input = $('input');
    var passwordById = $("#password1");
    var passwordByIndex = input[0];
    // What's the difference between these?
    passwordById.val(); // Value of password field
    passwordByIndex.val(); // Undefined!
}
</script>
</head>
<body>
<form>
    <h2>Username</h2>
    <input type="text" id="username" required>
    <h2>Password</h2>
    <input type="password" id="password" required>
    <input type="button" value="Submit" onClick="validateInput()">
</form>
</body>

我想使用passwordByIndex，因为我希望迭代数组$（'input'）。

Answer 1

这里的区别在于一个是jQuery对象，一个是DOM元素。请使用以下代码段来提供帮助：

// this gives me a jQuery object. Might reference one element, might reference multiple
var jQueryElement = $(".myclass");

// I can just call jQuery routines on the jQuery element:
var innerHtml = jQueryElement.html();

// this would give me a dom element
var domElement = jQueryElement[0];

// ... to call jQuery routines on a traditional element I need get back
//     to a jQuery object:
var myHTML = $(domElement).html();

希望这有助于解释其中的差异。如上面的评论所述，您可能会发现以下问题很有用：

有关差异的更多信息 - jQuery object and DOM element
将DOM转换为jQuery对象 - How can I convert a DOM element to a jQuery element?
将jQuery对象转换为DOM元素 - http://api.jquery.com/get/

Answer 2

input[0]返回一个不是jQuery对象的DOM元素。 $('#password1')使用其ID标记获取password1 DOM元素，并将其转换为jQuery对象。 jQuery对象是一个特殊的类数组对象，添加了一些方法，允许您执行$('#password1').val()之类的操作。（阅读有关jQuery对象HERE）

的更多信息

如果你做$('input')[0]，就像你做的那样，甚至是$('#password1')[0]，它会在特殊的jQuery类数组对象的索引0处获得普通（非jQuery）DOM元素。因此，您无权访问.val()等特殊jQuery方法。

如果要将其重新转换为jQuery对象以便能够使用$(input[0])，则可以执行.val()。在这种情况下，您需要$(input[0]).val()。

使用jQuery通过id和数组索引进行选择

2 个答案: