📅 最后修改于: 2023-12-03 15:01:48.358000 🧑 作者: Mango
在JavaScript中，有许多类似于jQuery的选择器可以方便地查找和操作DOM元素。这些选择器包括基本选择器、层次选择器、属性选择器、伪类选择器等等。下面我们来一一介绍。
基本选择器以元素名、类名、ID名来选择DOM元素。
元素选择器选择HTML元素的类型，例如选择所有的div元素：
document.querySelectorAll("div");
类选择器选择具有特定类的元素，例如选择所有具有.active类的元素：
document.querySelectorAll(".active");
ID选择器选择具有特定ID的元素，例如选择ID为"header"的元素：
document.querySelector("#header");
层次选择器可以选择DOM中的父元素、子元素、兄弟元素等。
后代选择器选取某个元素内的所有子元素，例如选择"div"元素内的所有"p"元素：
document.querySelectorAll("div p");
子元素选择器选取某个元素的所有直接子元素，例如选择"div"元素的所有直接"p"子元素：
document.querySelectorAll("div > p");
相邻兄弟选择器选取紧接在另一元素后的元素，例如选择"p"元素后的第一个"div"元素：
document.querySelector("p + div");
兄弟选择器选取指定元素的所有兄弟元素，例如选择"div"元素后的所有"p"元素：
document.querySelectorAll("div ~ p");
属性选择器可以选择具有指定属性或属性值的元素。
选取具有特定属性的元素，例如选择所有具有"href"属性的"a"元素：
document.querySelectorAll("a[href]");
选取具有指定属性且属性值等于特定值的元素，例如选择所有"input"元素中"type"属性值为"checkbox"的元素：
document.querySelectorAll('input[type="checkbox"]');
选取具有指定属性且属性值以特定值开头的元素，例如选择所有"img"元素中"src"属性值以"https:"开头的元素：
document.querySelectorAll('img[src^="https:"]');
选取具有指定属性且属性值以特定值结尾的元素，例如选择所有"a"元素中"href"属性值以.pdf结尾的元素：
document.querySelectorAll('a[href$=".pdf"]');
选取具有指定属性且属性值包含特定值的元素，例如选择所有"div"元素中"class"属性值包含"active"的元素：
document.querySelectorAll('div[class*="active"]');
伪类选择器可以选择DOM元素的状态或位置，例如选择第一个元素、最后一个元素、鼠标悬停等。
选取处于鼠标悬停状态的元素，例如选择所有处于鼠标悬停状态的"a"元素：
document.querySelectorAll('a:hover');
选取第一个元素，例如选择"ul"元素中的第一个"li"元素：
document.querySelector('ul li:first-child');
选取最后一个元素，例如选择"ul"元素中的最后一个"li"元素：
document.querySelector('ul li:last-child');
选取第N个元素，例如选择"ul"元素中的第3个"li"元素：
document.querySelector('ul li:nth-child(3)');
选取偶数元素，例如选择"ul"元素中的偶数"li"元素：
document.querySelectorAll('ul li:nth-child(even)');
选取奇数元素，例如选择"ul"元素中的奇数"li"元素：
document.querySelectorAll('ul li:nth-child(odd)');
上述就是JavaScript中类似jQuery的选择器的一些介绍，包括基本选择器、层次选择器、属性选择器、伪类选择器等等。我们可以根据自己的需要来选择不同的选择器来方便地操作DOM元素。