jQuery四种选择器使用及示例

文章标题：jQuery选择器详解：四种方法及其示例

介绍：本文将为大家汇总介绍jQuery的四种选择器的使用方法及示例，非常简单实用，希望对学习jQuery的朋友有所帮助。

一、jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素。例如：

$("p") 选取所有段落元素。

$("ptro") 选取所有class为“intro”的段落元素。

$("pdemo") 选取id为“demo”的段落元素。

以下是相关的示例代码：

html部分：

```html

```

jquery部分和函数部分：

```javascript

$(document).ready(function(){ // 页面加载完成后执行

tagName(); // 调用tagName函数

// idName(); // 调用idName函数（注释掉暂时不执行）

// className(); // 调用className函数（注释掉暂时不执行）

});

function tagName(){

$('p').addClass('highlight'); // 给所有段落元素添加类名highlight

}

jQuery中的CSS选择器

在jQuery的世界里，CSS选择器扮演着至关重要的角色。它们像魔法一样，让我们能够精确地定位到页面上的元素。让我们一起这些强大的选择器！

想象一下，你想给所有带有特定属性的元素添加高亮显示。你可以使用`$('[href=""]').addClass('heighlight');`来实现。这样的选择器能够迅速定位到带有特定href值的元素，并将其赋予一个新的类名。

自定义选择符的魅力

还有许多其他类型的选择器等待你去。例如，你可以使用元素选择器来选择所有的`

`元素，或者使用ID选择器来选择具有特定ID的元素。还有类选择器、属性选择器等等。这些选择器为jQuery提供了无限的可能性。

附表

选择器 | 示例 | 选取

| | --

$("") | 所有元素 | 选取页面上的所有元素

id | $("lastname") | 选取id为"lastname"的元素

.class | $("tro") | 选取class为"intro"的所有元素

element | $("p") | 选取所有的`

`元素

.class.class | $("tro.demo") | 选取同时拥有class="intro"和class="demo"的元素

:first | $("p:first") | 选取第一个`

`元素

:last | $("p:last") | 选取最后一个`

`元素

:even | $("tr:even") | 选取所有偶数行的``元素

:odd | $("tr:odd") | 选取所有奇数行的``元素

:eq(index) | $("ul li:eq(3)") | 选取列表中的第四个元素（index从0开始）

:gt(no) | $("ul li:gt(3)") | 选取index大于3的`