当前位置：首页 > jquery

jquery 选择器

2026-03-17 13:13:13jquery

jQuery 选择器

jQuery 选择器用于快速定位和操作 HTML 元素，语法简洁且功能强大。以下是一些常见的选择器及其用法：

基本选择器

$("element")
选择所有指定标签的元素，例如 $("div") 选中所有 <div> 元素。

$("#id")
通过 ID 选择元素，例如 $("#header") 选中 ID 为 header 的元素。

$(".class")
通过类名选择元素，例如 $(".menu") 选中所有类名为 menu 的元素。

层级选择器

$("parent > child")
选择直接子元素，例如 $("ul > li") 选中 <ul> 下的直接 <li> 子元素。

$("ancestor descendant")
选择所有后代元素，例如 $("div p") 选中 <div> 内的所有 <p> 元素。

属性选择器

$("[attribute]")
选择具有指定属性的元素，例如 $("[href]") 选中所有带有 href 属性的元素。

$("[attribute='value']")
选择属性值等于指定值的元素，例如 $("[type='text']") 选中所有 type 为 text 的元素。

表单选择器

$(":input")
选择所有表单元素（<input>, <textarea>, <select> 等）。

$(":text")
选择所有文本输入框（type="text"）。

$(":checked")
选择所有被选中的复选框或单选按钮。

过滤选择器

$(":first")
选择匹配的第一个元素，例如 $("p:first") 选中第一个 <p> 元素。

$(":last")
选择匹配的最后一个元素，例如 $("div:last") 选中最后一个 <div> 元素。

$(":even") 和 $(":odd")
选择偶数或奇数索引的元素，例如 $("tr:even") 选中表格中偶数行的 <tr> 元素。

组合选择器

$("selector1, selector2")
同时匹配多个选择器，例如 $("div, p") 选中所有 <div> 和 <p> 元素。

jquery 选择器

示例代码

// 选中所有类名为 "item" 的元素并隐藏
$(".item").hide();

// 选中 ID 为 "submit" 的按钮并绑定点击事件
$("#submit").click(function() {
    alert("按钮被点击");
});

// 选中所有带有 "data-toggle" 属性的元素
$("[data-toggle]").css("color", "red");