学习jquery必不可少的一项技能就是需要学会使用jquery查找和操作html元素，这就是jquery选择器，小叶总结了下面一篇文章在我们开发中常用的jquery选择器的方法，欢迎收藏。
以下是一些常用的 jQuery 选择器及其实例代码：
1. 基本选择器
- $("element"): 选择所有指定的元素。
$("p").css("color", "red"); // 将所有 <p> 元素的文本颜色设置为红色
2. ID 选择器
- $("#id"): 选择具有指定 ID 的元素。
$("#myId").hide(); // 隐藏 ID 为 myId 的元素
3. 类选择器
- $(".class"): 选择具有指定类的所有元素。
$(".myClass").addClass("newClass"); // 给所有 class 为 myClass 的元素添加 newClass
4. 属性选择器
- $("[attribute]"): 选择具有指定属性的所有元素。
- $("[attribute=value]"): 选择具有指定属性值的元素。
$("input[type='text']").val("Hello"); // 将所有 type 为 text 的 input 元素的值设置为 "Hello"
$("a[href='https://example.com']").css("font-weight", "bold"); // 将所有 href 为 https://example.com 的 a 元素的字体加粗
5. 组合选择器
- $(selector1, selector2): 在第二个选择器中查找第一个选择器。
$("div p").css("background-color", "yellow"); // 选择所有在 <div> 内的 <p> 元素，并设置背景色为黄色
6. 层级选择器
- $(ancestor descendant): 选择祖先元素下的所有后代元素。
$("div > p").css("border", "1px solid black"); // 选择所有直接在 <div> 下的 <p> 元素，并设置边框
7. 相邻兄弟选择器
- $(prev + next): 选择紧接在 prev 元素后的 next 元素。
$("h1 + p").css("margin-top", "0"); // 选择紧跟在 <h1> 后面的 <p> 元素，并设置其上边距为 0
8. 通用兄弟选择器
- $(prev ~ siblings): 选择 prev 元素之后的所有 siblings 元素。
$("h1 ~ p").css("color", "blue"); // 选择所有在 <h1> 之后的 <p> 元素，并设置其文本颜色为蓝色
9. 子元素选择器
- $(parent > child): 选择父元素下的所有子元素。
$("ul > li").css("list-style-type", "none"); // 选择所有直接在 <ul> 下的 <li> 元素，并移除列表样式
10. 表单选择器
- $(":input"): 选择所有表单输入元素（如 input、textarea、select）。
$(":input").css("border", "1px solid gray"); // 给所有表单输入元素设置灰色边框
11. 表单对象选择器
- $(":text"): 选择所有单行文本框。
- $(":password"): 选择所有密码框。
- $(":radio"): 选择所有单选按钮。
- $(":checkbox"): 选择所有复选框。
- $(":submit"): 选择所有提交按钮。
- $(":reset"): 选择所有重置按钮。
$(":text").val("Enter your name"); // 设置所有单行文本框的默认值为 "Enter your name"
$(":checkbox").prop("checked", true); // 选中所有复选框
12. 内容过滤选择器
- $(":contains(text)"): 选择包含指定文本的元素。
- $(":empty"): 选择不包含子元素或文本的元素。
- $(":has(selector)"): 选择包含特定后代元素的元素。
- $(":parent"): 选择至少有一个子元素的元素。
$("div:contains('Hello')").css("background-color", "lightgreen"); // 选择包含 "Hello" 文本的 <div> 元素，并设置背景色为浅绿色
$("div:empty").remove(); // 删除所有不包含子元素或文本的 <div> 元素
$("div:has(p)").css("border", "2px solid red"); // 选择包含 <p> 元素的 <div>，并设置红色边框
$("div:parent").css("padding", "10px"); // 选择至少有一个子元素的 <div>，并设置内边距为 10px
如果你觉得这篇文章对你有用，欢迎点赞收藏加关注哦。