使用 jQuery 选择具有特定类名的输入框

jQuery 是一款流行的 JavaScript 库，用于简化 HTML 文档的遍历、操作和事件处理。在实际开发中，我们常常需要通过选择器来选择特定的元素，本文主要介绍如何使用 jQuery 选择具有特定类名的输入框。

选择器语法

在 jQuery 中，类选择器以 "." 开头，后面跟类名。例如，要选择具有 "input-class" 类名的所有输入框，可以使用以下选择器：

$('input.input-class')

这里的 "$" 符号是 jQuery 的快捷方式，相当于调用 jQuery() 方法，选择器中的字符串则表示要选择的元素。

示例代码

以下是一个简单的示例，选择具有 "input-class" 类名的输入框，并将其 value 属性设置为 "Hello World"：

$('input.input-class').val('Hello World');

如果页面上有多个输入框具有 "input-class" 类名，上述代码将会将它们的 value 属性都设置为 "Hello World"。

过滤选择器

如果希望只选择特定类型的输入框，可以使用过滤选择器。例如，要选择具有 "input-class" 类名且 type 为 "text" 的输入框，可以使用以下选择器：

$('input.input-class[type="text"]')

这里的 "[type="text"]" 是一个属性过滤选择器，表示只选择 type 属性为 "text" 的元素。

使用回调函数

在某些情况下，可能需要使用回调函数来处理选定的输入框。例如，要在具有 "input-class" 类名的输入框中添加一个具有当前日期的水印，可以使用以下代码：

$('input.input-class').each(function() {
    var date = new Date().toLocaleDateString();
    $(this).attr('placeholder', date);
});

这里的 each 方法用于迭代选择的输入框，对每个输入框执行回调函数，将当前日期赋值给 placeholder 属性。

总结

本文介绍了如何使用 jQuery 选择具有特定类名的输入框，并通过示例代码说明了不同类型的选择器和回调函数的使用方法。在实际开发中，可以根据具体需求选择合适的方法来操作和处理输入框。