jQuery标签选择器是jQuery库中最常用的选择器之一,它允许我们通过HTML元素的标签名来选取元素,在jQuery中,有多种方法可以实现标签选择器的功能,以下是一些常用的标签选择器及其用法。
1、基本标签选择器
基本标签选择器是通过标签名来选取元素的,
$("p") // 选取所有<p>标签的元素
2、类选择器
类选择器是通过元素的class属性来选取元素的,
$(".myClass") // 选取所有class为myClass的元素
3、ID选择器
ID选择器是通过元素的id属性来选取元素的,
$("#myId") // 选取id为myId的元素
4、后代选择器
后代选择器是通过空格分隔的方式来选取某个元素的后代元素,
$("#myId p") // 选取id为myId的元素内部的<p>标签的元素
5、子元素选择器
子元素选择器是通过“>”符号来选取某个元素的直接子元素,
$("#myId > p") // 选取id为myId的元素的直接<p>标签的元素
6、兄弟元素选择器
兄弟元素选择器是通过“+”符号来选取某个元素紧邻的下一个兄弟元素,
$("#myId + p") // 选取id为myId的元素紧邻的下一个<p>标签的元素
7、群组选择器
群组选择器是将多个选择器组合在一起,用逗号分隔,
$("p, h1, h2") // 选取所有<p>、<h1>和<h2>标签的元素
8、属性选择器
属性选择器是通过HTML元素的属性来选取元素的,
$("[href]") // 选取所有具有href属性的元素 $("[href='#']") // 选取所有href属性值为'#'的元素 $("[class~='myClass']") // 选取所有class属性包含myClass的元素 $("[class^='my']") // 选取所有class属性以my开头的元素 $("[class$='Class']") // 选取所有class属性以Class结尾的元素
9、内容选择器
内容选择器是通过HTML元素的内容来选取元素的,
$(":contains('Hello')") // 选取包含文本'Hello'的元素 $(":empty") // 选取没有任何内容的元素(包括文本、图片等)
10、可见性选择器
可见性选择器是根据元素的可见性来选取元素的,
$(":visible") // 选取可见的元素(不包括隐藏、透明度为0的元素) $(":hidden") // 选取隐藏的元素(包括display为none、visibility为hidden的元素)