选择标签、替换值 (JavaScript)

Question

在今天之前我从未使用过 JavaScript，所以我一边学习一边学习。

在网页上，我想选择所有带有“exampleClass”类的 html 输入标签，并且我想替换该值。谁能向我展示一个关于如何执行此操作的良好/快速的代码片段，或者为我指明另一个线程或教程的正确方向？

谢谢你！

Answer 1

如果您使用 jQuery，

$('input.exampleClass').val('New Value');

或者不需要 IE7 支持 querySelectAll

elementList = document.querySelectorAll('input.exampleClass');
for(var i = 0; i < elementList.lenght; i++) {
    elementList[i].value = "New Value";
}

或使用 getElementsBytagName：

var element,
  elementList = document.getElementsByTagName('input');
for(var i = 0; i < elementList.lenght; i++) {
    element = elementList[i];
    if(element.className == "exampleClass") {
         element.value = "New Value";
    }
}

Answer 2

var elements = document.getElementsByClassName('myClass');

for ( var x = 0, len = elements.length; x < len; x += 1 )
{
    elements[x].value = 'your value here';
}

如果您想更好地了解其工作原理，请务必检查 这个答案。

Answer 3

纯 Javascript

在纯 javascript（没有类似 jQuery 的框架）中，您可以这样做：

var list = document.getElementsByClassName('exampleClass');

for (var i = 0, len = list.length; i < len; i++) {
    list[i].value = "foo";
}

但是，旧版本的 IE 不支持 getElementsByClassName()（直到 IE9）。如果您想让纯 JS 版本适用于较旧的浏览器，那么您必须获得 getElementsByClassName() 的替代品，以便在不支持它时使用。您可以通过 Google 找到许多实现。这是其中之一： http://robertnyman.com/2008 /05/27/the-ultimate-getelementsbyclassname-anno-2008/。

像 jQuery 这样的jQuery

框架对于这种操作非常非常有用，并且它们具有更好的跨浏览器和旧浏览器支持。在 jQuery 中，这个操作几乎在任何地方都可以工作，而且只是这一行。

$(".exampleClass").val("foo");

Sizzle

如果您想要良好的跨浏览器支持，但想要比 jQuery 更轻量级的东西，您可以只使用 Sizzle 选择器库（这是 jQuery 内部使用的），在这种情况下，代码将是这样的：

var list = Sizzle('.exampleClass');

for (var i = 0, len = list.length; i < len; i++) {
    list[i].value = "foo";
}

Answer 4

var exClass = document.getElementsByClassName('exampleClass');

for(var i = 0; i < exClass.length; i++) {
    exClass[i].value = "new Value";
}

小提琴演示：http://jsfiddle.net/maniator/4aWje/

Answer 5

好吧，既然你是 JavaScript 新手，那么 jQuery 会很容易上手，因为它有非常强大的选择器 与普通 JavaScript 相比相对容易编写。 jQuery 示例如下所示：

试试这个：

<!-- Uses jQuery library hosted by Google -->
<script language="javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

$('.exampleClass').val('replacedValue');