常用的 jQuery 选择器
基本选择器
- $("element")：选择所有指定的元素。
- $("#id")：选择具有指定 ID 的元素。
- $(".class")：选择所有具有指定类名的元素。
层次选择器
- $("selector1 selector2")：选择作为父元素的 selector1 下的所有 selector2 元素。
- $("selector1 > selector2")：选择直接子元素 selector2 的 selector1 元素。
- $("selector1 + selector2")：选择紧接在 selector1 元素之后的 selector2 元素。
- $("selector1 ~ selector2")：选择 selector1 元素之后的所有 selector2 元素。
属性选择器
- $("[element]")：选择具有指定属性的所有元素。
- $("[element='value']")：选择属性值等于指定值的所有元素。
- $("[element^='value']")：选择属性值以指定值开头的所有元素。
- ("[element
- $("[element*='value']")：选择属性值包含指定值的所有元素。
内容选择器
- :contains("text")：选择包含指定文本的所有元素。
- :empty：选择所有没有子节点的元素。
- :has(selector)：选择所有包含指定元素的父元素。
表单选择器
- :input：选择所有表单元素。
- :checkbox：选择所有复选框元素。
- :radio：选择所有单选按钮元素。
- :text：选择所有文本输入框元素。
- :password：选择所有密码输入框元素。
- :submit：选择所有提交按钮元素。
- :image：选择所有图像输入框元素。
- :reset：选择所有重置按钮元素。
伪类选择器：
- :first：选择每个集合中的第一个元素。
- :last：选择每个集合中的最后一个元素。
- :even：选择索引为偶数的元素。
- :odd：选择索引为奇数的元素。
- :gt(n)：选择集合中索引大于 n 的元素。
- :lt(n)：选择集合中索引小于 n 的元素。
- :eq(n)：选择集合中索引等于 n 的元素。
- :not(selector)：选择不匹配指定选择器的所有元素。
- :gt(n)：选择集合中索引大于 n 的元素。
- :lt(n)：选择集合中索引小于 n 的元素。
- :eq(n)：选择集合中索引等于 n 的元素。
过滤选择器：
- :first-child：选择每个集合中的第一个子元素。
- :last-child：选择每个集合中的最后一个子元素。
- :only-child：选择每个集合中唯一的子元素。
- :nth-child(n)：选择每个集合中索引为 n 的子元素。
- :nth-last-child(n)：选择每个集合中倒数第 n 个子元素。
例如，$("#myDiv .myClass") 选择 ID 为 myDiv 的元素内所有类名为 myClass 的元素。
列举基本选择器，层次选择器，属性选择器
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery 选择器示例</title>
<script src=".7.1.min.js"></script>
<style type="text/css">
/* 为选中的元素添加一些样式以便于观察效果 */
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// 基本选择器示例
$("p").addClass("highlight"); // 将所有 <p> 元素添加 highlight 类
// ID 选择器示例
$("#unique").addClass("bold"); // 将 ID 为 unique 的元素添加 bold 类
// 类选择器示例
$(".highlighted").addClass("underline"); // 将所有 class 为 highlighted 的元素添加 underline 类
// 层次选择器示例
$("div > p").css("color", "blue"); // 将直接在 <div> 下的 <p> 元素文字颜色设置为蓝色
// 相邻兄弟选择器示例
$("p + ul").css("border", "1px solid red"); // 将紧跟在 <p> 后的 <ul> 元素添加红色边框
// 通用兄弟选择器示例
$("p ~ ul").css("border", "1px dashed green"); // 将所有在 <p> 后的 <ul> 元素添加绿色虚线边框
// 属性选择器示例
$("[href]").css("text-decoration", "none"); // 移除所有带有 href 属性的 <a> 元素的下划线
});
</script>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p id="unique">This is a unique paragraph.</p>
<p class="highlighted">This is a highlighted paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<p>This is another paragraph.</p>
<ul>
<li>List item A</li>
<li>List item B</li>
</ul>
<a href=";>This is a link.</a>
</body>
</html>
发布评论