jQuery 选择器是一种强大的工具,允许您对 HTML 元素组或单个元素进行操作。它基于元素的 id、类、类型、属性、属性值等查找(或选择)HTML 元素。除了基于现有的 CSS 选择器外,jQuery 还提供了一些自定义的选择器。在 jQuery 中,所有选择器都以美元符号($)开头。
以下是一些常见的 jQuery 选择器示例:
1. 元素选择器:基于元素名选取元素。例如,要选取页面中的所有 `
` 元素,可以使用以下代码:
```javascript
$("p")
```
2. #id 选择器:通过 HTML 元素的 id 属性选取指定的元素。由于页面中的元素 id 应保持唯一性,因此需要使用 #id 选择器来选取唯一的元素。例如,当用户点击按钮后,有 id=“test”属性的元素将被隐藏,可以使用以下代码:
```javascript
$("#test")
```
3. .class 选择器:可以通过指定的 class 查找元素。例如,用户点击按钮后,所有带有 class=“test”属性的元素都隐藏,可以使用以下代码:
```javascript
$(".test")
```
4. $(“*”):选取所有元素。例如,当某个元素被选中时,可以使用以下代码获取该元素:
```javascript
$(this)
```
尝试一下 »
选取当前 HTML 元素:
1. 选取所有 class 为 `intro` 的 `
` 元素:`$("p.intro")`
2. 选取第一个 `
` 元素:`$("p:first")`
3. 选取第一个 `
- ` 元素的第一个 `
- ` 元素:`$("ul li:first")`
4. 选取每个 `
- ` 元素的第一个 `
- ` 元素:`$("ul li:first-child")`
5. 选取带有 href 属性的元素:`$("a[href]")`
6. 选取所有 target 属性值等于 `_blank` 的 `` 元素:`$("a[target='_blank']")`
7. 选取所有 target 属性值不等于 `_blank` 的 `` 元素:`$("a[target!='_blank']")`
8. 选取所有 type=`button` 的 `` 元素和 `
9. 选取偶数位置的 `
` 元素:`$("tr:even")` 10. 选取奇数位置的 `
` 元素:`$("tr:odd")` 独立文件中使用 jQuery 函数:
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。当我们在教程中演示 jQuery 时,会将函数直接添加到 `
` 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):以下是对提供的内容进行重构后的结果,同时保持段落结构:
```html
```
- ` 元素:`$("ul li:first-child")`