jquery 选择器用法大全附实例代码

大家好，欢迎来到IT知识分享网。

学习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 

如果你觉得这篇文章对你有用，欢迎点赞收藏加关注哦。