CSS、JS、jQuery中选择器总结

合集 - 前端(9)

1.CSS、JS、jQuery中选择器总结2023-05-12

2.JS中得到自定义属性值2023-05-123.为选中的按钮添加特定属性2023-05-134.Tab栏切换2023-05-135.event 和 this 的区别2023-05-146.下拉菜单的实现2023-05-147.mouse事件2023-05-148.Vue中watch监听属性新旧值相同问题解决方案2023-12-019.export、exports以及export default 的导入导出2023-12-05

收起

CSS、JS、jQuery中选择器总结

CSS中选择器：

1.元素选择器：根据标签名来选中指定元素
语法：标签名{}

2.将被指定的元素设为不同样式
ID选择器，根据元素的ID属性值选中一个元素
语法：#ID属性值{}
设置了重复的ID也可设置同样的效果

3.class 标签属性；每个标签都有和ID类似但其可以重复使用
ID像身份证号；class像班级
用class为元素分组
类选择器：根据元素的class属性值选中一组元素；可以为一个元素添加多个class值在“ ”内；用空格隔开
语法：.class属性值

4.通配选择器：选中页面中的所有元素
语法：*

/*5、属性选择器*/
/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

属性选择器 - CSS：层叠样式表 | MDN (mozilla.org)

JS中选择器
JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()
只要是 elements 带 s 则返回的是一个列表

A： getElementById('ID'): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()
document.getElementById("ID")
B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。
C: getElementsByTagName(tagname): 返回文档中指定标签的元素
D: getElementsByClassName():返回文档中所有指定类名的元素
E: querySelector():返回文档中匹配指定css选择器的第一个元素
F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素
JS属性选择器
属性选择器

const agree = document.querySelector('[name = agree]')

jQuery选择器

Js选择器总结 - 一个坚果 - 博客园 (cnblogs.com)

使用自定义属性选择元素

在 CSS 中使用
在 CSS 中，我们可以使用方括号来选取具有特定自定义属性的元素。例如：

css
/* 选取所有具有 data-myattr 属性的元素 /
[data-myattr] {
/ 在这里定义样式 */
}

/* 选取所有 data-myattr 值为 red 的元素 /
[data-myattr="red"] {
/ 在这里定义样式 */
}
在 JavaScript 中使用
在 JavaScript 中，我们可以使用 getAttribute() 方法检索元素的自定义属性值。例如：

js
// 获取具有 data-myattr 属性的第一个元素
var element = document.querySelector('[data-myattr]');

// 获取某个具有 data-myattr 属性元素的属性值
var myAttrValue = element.getAttribute('data-myattr');
我们还可以通过 querySelectorAll() 方法选取所有具有特定自定义属性的元素。例如：

js
// 获取所有具有 data-myattr 属性的元素
var elements = document.querySelectorAll('[data-myattr]');
注意：在设置自定义属性时，请确保遵守 HTML 规范，并使用 data-* 格式。如果你不遵循这个规范，可能会出现一些问题，比如取消 HTML5 的有效性验证。