jQuery type选择器

jQuery type选择器

在jQuery中，type选择器用于选择所有指定类型的元素。它以:开头，后跟元素的类型。例如，:input用于选择所有 <input> 元素。

语法

$(":type")

• type：指定元素的类型，如input、text、radio等。

示例

假设我们有以下HTML结构：

<form>
    <input type="text" id="username" />
    <input type="email" id="email" />
    <input type="checkbox" id="agree" />
    <input type="button" id="submit" value="Submit" />
</form>

我们可以使用type选择器来选择指定类型的元素。

选择所有输入框

$("input").css("background", "yellow");

结果：所有输入框背景颜色变为黄色。

选择所有文本输入框

$("input:text").css("border", "1px solid red");

结果：所有文本输入框的边框变为红色实线。

选择所有复选框

$("input:checkbox").prop("checked", true);

结果：所有复选框被选中。

常见的type选择器

以下是一些常见的type选择器及其用法。

:input

选择所有 <input>、<select>、<textarea> 和 <button> 元素。

$(":input").val("Hello");

:text

选择所有文本输入框。

$("input:text").attr("placeholder", "Enter text here");

:radio

选择所有单选框。

$("input:radio").change(function() {
    console.log($(this).val());
});

:checkbox

选择所有复选框。

$("input:checkbox").click(function() {
    alert("Checkbox state: " + $(this).prop("checked"));
});

:button

选择所有按钮元素。

$(":button").on("click", function() {
    alert("Button clicked!");
});

总结

通过本文的介绍，您应该了解了jQuery中type选择器的用法和一些常见的示例。使用type选择器可以轻松选择指定类型的元素，从而方便对其进行操作和管理。