选择中的特殊符号: # 指示 id . 指示 class * 全选 , 多选 空格 后代 > 子 ~ 兄弟 + 下一个 : 子(多功能) () 函数式的过滤与查找 获取 div 下的所有标题对象: $(“div :header”) 代码如下: <body> <h3>AAA</h3> <p>BBB</p> <h4>CCC</h4> <div> <h3>DDD</h3> <p>EEE</p> <h4>FFF</h4> </div> </body> 获取所有标题对象: $(“:header”) 代码如下: <body> <h3>AAA</h3> <p>BBB</p> <h4>CCC</h4>
在jQuery中，选择和操作DOM元素是其核心功能之一。本篇将详细解析如何通过jQuery选取和定位HTML页面中的特定对象，以及如何针对这些对象进行更深入的操作。
jQuery选择器是基于CSS选择器扩展的，使得选取DOM元素变得更加灵活和强大。以下是几种常用的选择器：
1. **ID选择器**: 使用`#`，如`$("#myID")`，选取具有指定ID的元素。
2. **类选择器**: 使用`.`，如`$(".myClass")`，选取具有指定类名的元素。
3. **全选和多选**: `*`用于选取所有元素，多个选择器之间用逗号分隔，如`$("div, p")`选取所有`<div>`和`<p>`元素。
4. **后代选择器**: 使用空格，如`$("div p")`选取`<div>`内的所有`<p>`元素。
5. **子元素选择器**: 使用`>`，如`$("ul > li")`选取`<ul>`下的直接子`<li>`元素。
6. **兄弟元素选择器**: 使用`~`和`+`，`$("element1 ~ element2")`选取`element1`之后的所有同级`element2`，`$("element1 + element2")`选取紧接在`element1`后的第一个`element2`。
7. **功能选择器**: 如`:header`，选取所有标题元素（`<h1>`到`<h6>`）。
在给定的示例中，`$("div :header")`选取了`<div>`内的所有标题元素，而`$(":header")`则选取了整个文档中的所有标题元素。
除此之外，jQuery还提供了一些方法来定位特定的元素：
- **`:first`**: `$("li:first")`选取每个`<ul>`列表的第一个`<li>`元素。
- **`:last`**: `$("li:last")`选取每个`<ul>`列表的最后一个`<li>`元素。
- **`:first-child`**: `$("li:first-child")`选取每个`<ul>`列表的第一个子`<li>`元素。
- **`:last-child`**: `$("li:last-child")`选取每个`<ul>`列表的最后一个子`<li>`元素。
- **`:eq(index)`**: `$("li:eq(2)")`选取索引为2（从0开始计数）的`<li>`元素。
- **`:gt(index)`**: `$("li:gt(2)")`选取索引大于2的`<li>`元素。
- **`:lt(index)`**: `$("li:lt(2)")`选取索引小于2的`<li>`元素。
除了基本的选择器和方法，jQuery还支持更复杂的过滤和查找操作，如使用函数进行自定义过滤，例如：
```javascript
$("li").filter(function(index) {
return $(this).text().startsWith("A");
});
```
这段代码会选取所有文本以"A"开头的`<li>`元素。
jQuery提供的强大选择器和方法使得我们可以精确地定位和操作网页上的任何元素，极大地简化了DOM操作，提高了开发效率。熟练掌握这些技巧对于编写高效、可维护的前端代码至关重要。在实际开发中，根据需求灵活运用这些选择器和方法，可以实现各种复杂的效果和交互。
