Javascript 使用jQuery按id与数组索引进行选择_Javascript_Jquery

Javascript 使用jQuery按id与数组索引进行选择

javascript jquery

Javascript 使用jQuery按id与数组索引进行选择,javascript,jquery,Javascript,Jquery,当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> functio

当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'。

这里的区别是一个是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();

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

更多关于差异的信息- 将DOM转换为jQuery对象- 将jQuery对象转换为DOM元素- 输入[0]返回一个不是jQuery对象的DOM元素。$'password1'使用其ID标记获取password1 DOM元素，并将其转换为jQuery对象。jQuery对象是一个特殊的类似数组的对象，添加了一些方法，允许您执行$'password1'.val之类的操作。阅读有关jQuery对象的更多信息

如果您像以前一样执行$'input'[0]，甚至执行$'password1'[0]，它将在特殊的类似jQuery数组的对象的索引0处获取普通的非jQuery DOM元素。因此，您无权访问特殊的jQuery方法，如.val

如果希望将$input[0]转换回jQuery对象以使用.val，则可以执行该操作。在这种情况下，您需要执行$input[0].val.

passwordByIndex是从输入中提取的一个字符，它没有任何属性，例如.val。如果要对元素执行基于索引的查找，请不要挂接数组。相反，请使用.eq或：eq。例如：$'input:eq0'或$'input'。eq0input[0]获取第一个dom元素。如果希望将其作为Jquery对象，可以执行$input[0]并从中获取val。那么它和passwordById是相同的。最好的选择完全取决于你的情况Dom和Jquery对象是非常不同的东西：尝试这样做：var passwordByIndex=$input[0]；因此，如果我正确理解了这一点，那么通过索引获取本例中的DOM元素是一个坏主意，因为这是特定于浏览器的，而jQuery对象不是。@petehern DOM元素不是特定于浏览器的，只是它们上的某些属性。有许多属性可以在几乎所有主要浏览器中使用。在MDN上查找您想要获取或设置的属性，您可能会找到一种在大多数主流浏览器上实现这一点的方法。jQuery只是简化了这个检查过程，并为处理真正奇怪的情况提供了一个很好的框架。祝你好运！