jQuery选择器简述

在jQuery中，选择器是获取文档中某个元素的一种方式。可以通过选择器来获取需要的元素，并对其进行操作。本文将简单介绍jQuery选择器的使用方法和常见选择器类型。

基础选择器

jQuery支持各种基础选择器，如元素选择器、id选择器、类选择器等。

元素选择器

元素选择器是通过标签名来选取元素的，比如说选取HTML文档中所有的段落元素，可以使用以下选择器：

$('p')

ID选择器

ID选择器是通过元素的id属性来选取元素的，比如说选取页面中ID为“myDiv”的元素，可以使用以下选择器：

$('#myDiv')

类选择器

类选择器是通过元素的class属性来选取元素的，比如说选取页面中class为“highlight”的所有元素，可以使用以下选择器：

$('.highlight')

层次选择器

层次选择器可以通过元素之间的关系进行选取，如父子关系、兄弟关系等。

后代选择器

后代选择器可以选取某个父元素下的所有子元素，比如说选取某个div元素下所有的段落元素，可以使用以下选择器：

$('div p')

子元素选择器

子元素选择器可以选取某个父元素的直接子元素，比如说选取某个div元素下直接的段落元素，可以使用以下选择器：

$('div > p')

兄弟选择器

兄弟选择器可以选取与某个元素处在同一层的其他元素，比如说选取页面中某个元素后面的所有相邻元素，可以使用以下选择器：

$('input + label')

过滤选择器

过滤选择器可以通过元素属性、子元素、内容等条件来过滤选取元素。

:first选择器

选取第一个匹配的元素，比如说选取页面中第一个段落元素，可以使用以下选择器：

$('p:first')

:last选择器

选取最后一个匹配的元素，比如说选取页面中最后一个段落元素，可以使用以下选择器：

$('p:last')

:even选择器

选取所有偶数位置的元素，比如说选取页面中偶数行的表格行元素，可以使用以下选择器：

$('tr:even')

:odd选择器

选取所有奇数位置的元素，比如说选取页面中奇数行的表格行元素，可以使用以下选择器：

$('tr:odd')

示例说明

示例1

HTML代码：

<p class="intro">jQuery选择器简介</p>
<p class="intro">jQuery选择器入门</p>
<p class="text">jQuery是一款流行的JavaScript框架</p>

JavaScript代码：

$('.intro').css('text-decoration', 'underline');

上述代码使用类选择器选取所有class为“intro”的元素，并给它们添加下划线。效果是将两个段落文字添加下划线。

示例2

HTML代码：

<div>
  <p>第一段</p>
  <span>中间段</span>
  <p>最后一段</p>
</div>

JavaScript代码：

$('div p:last').css('font-weight', 'bold');

上述代码使用后代选择器选取div元素下的最后一个段落元素，并将其字体加粗。效果是将最后一段文字的字体加粗。