jquery 选择器
jQuery 选择器基础
jQuery 选择器用于查找和选择 HTML 元素,基于元素的名称、ID、类、属性、值等。语法类似于 CSS 选择器,但功能更强大。
基本语法:
$("selector")
常见选择器类型
元素选择器 通过 HTML 元素名称选择元素。
$("p") // 选择所有 <p> 元素
ID 选择器 通过元素的 ID 属性选择元素。
$("#myId") // 选择 ID 为 "myId" 的元素
类选择器 通过元素的类属性选择元素。
$(".myClass") // 选择所有类为 "myClass" 的元素
属性选择器 通过元素的属性选择元素。
$("[href]") // 选择所有带有 href 属性的元素
$("[href='example.com']") // 选择 href 属性值为 "example.com" 的元素
复合选择器 组合多个选择器以更精确地选择元素。
$("p.myClass") // 选择类为 "myClass" 的 <p> 元素
层次选择器
后代选择器 选择指定元素的所有后代元素。
$("div p") // 选择 <div> 内的所有 <p> 元素
子元素选择器 选择指定元素的直接子元素。
$("div > p") // 选择 <div> 的直接子元素 <p>
相邻兄弟选择器 选择紧接在指定元素后的兄弟元素。
$("div + p") // 选择紧接在 <div> 后的 <p> 元素
通用兄弟选择器 选择指定元素之后的所有兄弟元素。

$("div ~ p") // 选择 <div> 之后的所有 <p> 兄弟元素
过滤选择器
首尾过滤
$("p:first") // 选择第一个 <p> 元素
$("p:last") // 选择最后一个 <p> 元素
偶数/奇数过滤
$("tr:even") // 选择偶数位置的 <tr> 元素
$("tr:odd") // 选择奇数位置的 <tr> 元素
索引过滤
$("p:eq(2)") // 选择索引为 2 的 <p> 元素(从 0 开始)
$("p:gt(2)") // 选择索引大于 2 的 <p> 元素
$("p:lt(2)") // 选择索引小于 2 的 <p> 元素
表单选择器
输入类型选择器
$(":input") // 选择所有输入元素
$(":text") // 选择所有文本输入框
$(":password") // 选择所有密码输入框
$(":checkbox") // 选择所有复选框
$(":radio") // 选择所有单选按钮
表单状态选择器
$(":checked") // 选择所有被选中的复选框或单选按钮
$(":selected") // 选择所有被选中的下拉选项
$(":disabled") // 选择所有被禁用的元素
$(":enabled") // 选择所有可用的元素
内容过滤选择器
包含文本

$("p:contains('text')") // 选择包含 "text" 的 <p> 元素
空元素
$("p:empty") // 选择空的 <p> 元素
父元素
$("p:parent") // 选择有子元素的 <p> 元素
可见性选择器
$("p:hidden") // 选择隐藏的 <p> 元素
$("p:visible") // 选择可见的 <p> 元素
示例代码
选择并隐藏所有类为 "hideMe" 的元素
$(".hideMe").hide();
选择并修改所有 元素的文本
$("p").text("新的文本内容");
选择并高亮表格中的偶数行
$("tr:even").css("background-color", "#f2f2f2");
选择并禁用所有文本框
$(":text").prop("disabled", true);






