jQuery选择器总结之常用元素查找方法

在jQuery中，选择器是非常重要的，它可以用来查找DOM中的元素，让我们可以方便地对其进行操作。本文将详细介绍jQuery常用的元素查找方法。

基本选择器

jQuery的基本选择器是通过元素名来查找元素，语法如下:

$('element')

示例1: 选取页面上所有div元素。

$('div')

示例2: 选取页面上所有p元素。

$('p')

id选择器

id选择器通过元素id查找元素，语法如下:

$('#id')

示例1: 选取id为'container'的元素。

$('#container')

示例2: 选取id为'header'的元素。

$('#header')

class选择器

class选择器通过元素class查找元素，语法如下:

$('.class')

示例1: 选取class为'main'的元素。

$('.main')

示例2: 选取class为'item'的元素。

$('.item')

属性选择器

属性选择器通过元素属性查找元素，语法如下:

$('element[attribute]')

示例1: 选取所有具有href属性的a元素。

$('a[href]')

示例2: 选取所有具有alt属性的img元素。

$('img[alt]')

组合选择器

组合选择器通过将多个选择器组合在一起来查找元素：

• *选择器: 选取所有元素。
• ,选择器: 选择多个元素。
• 空格选择器: 选择含有特定后代元素的元素。

• 选择器: 选择直接子元素。

示例1: 选取页面上所有h1和h2元素。

$('h1, h2')

示例2: 选取页面上所有含有class为'side'的div元素的后代元素a。

$('div.side a')

过滤选择器

过滤选择器根据不同的条件筛选元素：

• :first: 选择第一个元素。
• :last: 选择最后一个元素。
• :eq: 选择指定索引位置的元素。
• :gt: 选择所有大于指定索引位置的元素。
• :lt: 选择所有小于指定索引位置的元素。
• :even: 选择所有偶数索引位置的元素。
• :odd: 选择所有奇数索引位置的元素。
• :not: 选择不符合条件的元素。

示例1: 选取页面上第一个div元素。

$('div:first')

示例2: 选取页面上所有大于2的索引位置的div元素。

$('div:gt(2)')

总结

本文介绍了jQuery中常用的元素查找方法，包括基本选择器、id选择器、class选择器、属性选择器、组合选择器和过滤选择器。同时，给出了多个具体的示例，方便读者理解和实践。