基本选择器$("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运行复制
/* 为选中的元素添加一些样式以便于观察效果 */
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
$(document).ready(function() {
// 基本选择器示例
$("p").addClass("highlight"); // 将所有
元素添加 highlight 类
// ID 选择器示例
$("#unique").addClass("bold"); // 将 ID 为 unique 的元素添加 bold 类
// 类选择器示例
$(".highlighted").addClass("underline"); // 将所有 class 为 highlighted 的元素添加 underline 类
// 层次选择器示例
$("div > p").css("color", "blue"); // 将直接在
元素文字颜色设置为蓝色
// 相邻兄弟选择器示例
$("p + ul").css("border", "1px solid red"); // 将紧跟在
后的
- 元素添加红色边框
- List item 1
- List item 2
- List item A
- List item B
// 通用兄弟选择器示例
$("p ~ ul").css("border", "1px dashed green"); // 将所有在
后的
- 元素添加绿色虚线边框
// 属性选择器示例
$("[href]").css("text-decoration", "none"); // 移除所有带有 href 属性的 元素的下划线
});
This is a paragraph.
This is a unique paragraph.
This is a highlighted paragraph.
This is another paragraph.
最新发布