jQuery 选择器 – BuildCodePro

jQuery选择器知识大全

编程小白也能看懂的选择器详细指南，大白话解析，轻松上手

📖 jQuery选择器是什么？

jQuery选择器就像是网页元素的”定位器”，用一种简单的方式找到你想要的网页元素（HTML标签）。就像使用遥控器选择电视频道一样，jQuery选择器可以帮你快速准确地选中页面上的按钮、图片、文字等各种元素。

使用jQuery选择器的好处：代码简洁、写法简单、兼容各种浏览器，让JavaScript操作网页元素变得轻松愉快！

🌟 基本选择器

ID选择器

根据元素的ID找到特定元素。ID就像每个人的身份证号，是独一无二的。

$(“#elementId”)

例子：
HTML中有 <div id=”header”>…</div> 使用 $(“#header”) 就能找到这个div

类选择器

根据class名称选择元素。class就像班级名称，可以有多个学生（元素）属于同一个班级（class）。

$(“.className”)

例子：
选择所有class为”menu”的元素：
$(“.menu”)

元素选择器

根据HTML标签名称选择元素。比如选择所有段落、所有图片等。

$(“tagName”)

例子：
选择所有段落：$(“p”)
选择所有图片：$(“img”)

通配符选择器

选择页面上的所有元素，就像扑鱼时一网打尽。

$(“*”)

例子：
选中页面所有元素：$(“*”)

🔍 层级选择器

后代选择器

选择某个元素内部的所有特定后代元素（包括子孙元素）。

$(“ancestor descendant”)

例子：
选择id为container的内部所有p元素：
$(“#container p”)

子元素选择器

选择元素的直接子元素（只包括儿子，不包括孙子）。

$(“parent > child”)

例子：
选择ul的所有直接li子元素：
$(“ul > li”)

相邻兄弟选择器

选择紧接在另一个元素后的元素，而且是同级元素（同一个父亲）。

$(“prev + next”)

例子：
选择紧接在h2后面的一个p元素：
$(“h2 + p”)

一般兄弟选择器

选择某个元素之后的所有同级元素。

$(“prev ~ siblings”)

例子：
选择h2元素后面所有的同级p元素：
$(“h2 ~ p”)

🎯 过滤选择器

元素1

元素2

元素3

元素4

元素5

元素6

首尾元素选择器

选择第一个或最后一个元素。

$(“selector:first”)
$(“selector:last”)

例子：
选择第一个div：$(“div:first”)
选择最后一个p：$(“p:last”)

奇偶选择器

选择偶数或奇数位置的元素（索引从0开始）。

$(“selector:even”)
$(“selector:odd”)

例子：
选择所有偶数位置的tr：$(“tr:even”)
选择所有奇数位置的tr：$(“tr:odd”)

索引选择器

根据元素的索引位置选择。

$(“selector:eq(index)”)
$(“selector:gt(index)”)
$(“selector:lt(index)”)

例子：
选择第三个li：$(“li:eq(2)”)
选择索引大于3的div：$(“div:gt(3)”)
选择索引小于2的p：$(“p:lt(2)”)

属性选择器

根据元素的属性进行选择。

$(“[attribute]”)
$(“[attribute=’value’]”)
$(“[attribute^=’value’]”)
$(“[attribute$=’value’]”)
$(“[attribute*=’value’]”)

例子：
选择有title属性的元素：$(“[title]”)
选择target=”_blank”的链接：$(“[target=’_blank’]”)

📝 表单选择器

表单元素选择器

专门用于选择表单元素。

$(“:input”)
$(“:text”)
$(“:password”)
$(“:radio”)
$(“:checkbox”)
$(“:submit”)
$(“:button”)

例子：
选择所有输入框：$(“:text”)
选择所有单选按钮：$(“:radio”)

表单状态选择器

根据表单元素的状态进行选择。

$(“:enabled”)
$(“:disabled”)
$(“:checked”)
$(“:selected”)

例子：
选择所有禁用的输入框：$(“:disabled”)
选择所有选中的复选框：$(“:checked”)

💻 实战代码示例

// 选择ID为header的元素并添加边框

$(“#header”).css(“border”, “2px solid red”);

// 选择所有按钮并添加点击事件

$(“button”).click(function() {

  alert(“按钮被点击了!”);

});

// 选择表格中所有奇数行并添加背景色

$(“tr:odd”).css(“background-color”, “#f2f2f2”);

// 选择所有包含”important”类的元素

$(“.important”).addClass(“highlight”);

🚀 试试选择器效果

在下面输入jQuery选择器，查看效果（在左侧演示区域）

结果将在这里显示…