当前位置：首页 > jquery

jquery元素选择器

2026-02-03 13:37:29jquery

jQuery 元素选择器

jQuery 提供了多种选择器来选取 DOM 元素，以下是常见的几种方法：

基本选择器

$("tagName")：选取所有指定标签的元素，如 $("div") 选取所有 <div> 元素。
$("#id")：选取具有指定 ID 的元素，如 $("#header") 选取 ID 为 header 的元素。
$(".className")：选取所有具有指定类名的元素，如 $(".menu") 选取所有类名为 menu 的元素。
$("*")：选取所有元素。

组合选择器

jquery元素选择器

$("selector1, selector2")：选取匹配任一选择器的元素，如 $("div, .menu") 选取所有 <div> 和类名为 menu 的元素。
$("parent > child")：选取直接子元素，如 $("ul > li") 选取 <ul> 下的直接 <li> 子元素。
$("ancestor descendant")：选取后代元素，如 $("div p") 选取 <div> 内所有 <p> 元素。

属性选择器

$("[attribute]")：选取具有指定属性的元素，如 $("[href]") 选取所有带有 href 属性的元素。
$("[attribute='value']")：选取属性值等于指定值的元素，如 $("[type='text']") 选取所有 type="text" 的元素。
$("[attribute^='value']")：选取属性值以指定字符串开头的元素，如 $("[href^='https']") 选取 href 以 https 开头的元素。

过滤选择器

jquery元素选择器

$("selector:first")：选取匹配的第一个元素，如 $("p:first") 选取第一个 <p> 元素。
$("selector:last")：选取匹配的最后一个元素，如 $("div:last") 选取最后一个 <div> 元素。
$("selector:even") 和 $("selector:odd")：选取偶数或奇数位置的元素，如 $("tr:even") 选取表格中偶数行。

表单选择器

$(":input")：选取所有表单元素（<input>, <select>, <textarea>, <button>）。
$(":text")：选取所有 type="text" 的 <input> 元素。
$(":checked")：选取所有被选中的复选框或单选按钮。

示例代码

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

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

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

jQuery 选择器功能强大且灵活，能够满足各种 DOM 操作需求。