掌握jQuery中各种选择器种类及用途

原创

ithorizon 6个月前 (10-19) 阅读数 42 #Javascript

jQuery是一款流行的JavaScript库，它简化了在网页上操作HTML元素、事件处理、动画效果和Ajax等操作的过程。在使用jQuery进行开发时，熟练掌握各种选择器种类及其用途是至关重要的。选择器是jQuery中用于选取指定元素的方法，可以根据需要精准选择想要操作的元素，从而实现更加灵活的开发。

1. 基础选择器

元素选择器：选择所有指定元素，语法为$("element")。例如，$("p")选取所有段落元素。
```
$("p").css("color", "red");
```
ID选择器：选择特定id的元素，语法为$("#id")。例如，$("#myId")选取id为"myId"的元素。
```
$("#myId").hide();
```
类选择器：选择指定类的元素，语法为$(".class")。例如，$(".myClass")选取类为"myClass"的元素。
```
$(".myClass").fadeIn();
```

2. 层级选择器

后代选择器：选择指定元素的后代元素，语法为$("parent descendant")。例如，$("div p")选取所有div元素内的段落元素。
```
$("div p").addClass("highlight");
```
子元素选择器：选择指定元素的直接子元素，语法为$("parent > child")。例如，$("ul > li")选取ul元素下的直接子元素li。
```
$("ul > li").hover(function(){
 $(this).toggleClass("hover");
});

### 3. 过滤选择器
```
第一个元素：选择第一个匹配的元素，语法为:first。例如，$("li:first")选取第一个li元素。
```
$("li:first").css("font-weight", "bold");
```
最后一个元素：选择最后一个匹配的元素，语法为:last。例如，$("li:last")选取最后一个li元素。
```
$("li:last").css("color", "blue");
```
4. 内容选择器
包含指定文本内容的元素：选择包含指定文本内容的元素，语法为:contains(text)。例如，$("p:contains('Hello')")选取包含文本"Hello"的段落元素。
```
$("p:contains('Hello')").addClass("highlight");
```
空元素：选择没有子元素的空元素，语法为:empty。例如，$("div:empty")选取空的div元素。
```
$("div:empty").text("This div is empty");
```
5. 状态选择器
可见元素：选择可见的元素，语法为:visible。例如，$("div:visible")选取可见的div元素。
```
$("div:visible").fadeOut();
```
隐藏元素：选择被隐藏的元素，语法为:hidden。例如，$("div:hidden")选取被隐藏的div元素。