jQuery选择器的使用

前言

jQuery的选择器大部分还是沿用了CSS的选择器，在这些选择器当中增添了一些其他选择器。

1.ID选择器

特点：根据标签的ID属性值进行选择，只能选中一个元素。

示例代码如下：

将ID值为box的标签设置为红色的背景颜色，ID值唯一
$(function() {
			$('#box').css('background', 'red');
		})

2.class选择器（类名选择器）

特点：根据标签的class属性值进行选择，类名可重复选择多个元素。

示例代码如下：

将class类名为.on的标签设置为红色的背景颜色
$(function() {
			$('.on').css('background', 'red');
		})

3.标签选择器

特点：直接使用标签名作为选择器的名字，可选择多个

示例代码如下：

将所有div标签设置为红色的背景颜色
$(function() {
			$('div').css('background', 'red');
		})

4.*选择器（通配符选择器）

特点：会遍历指定元素的所有子元素

示例代码如下：

将ul下面的所有字体设置为红色
$(function() {
			 $('ul *').css('color', 'red');
		})

5.后代选择器

特点：多个选择器，以空格进行分割

示例代码如下：

将div下面的p标签里的字体设置为红色
$(function() {
			 $('div p').css('color', 'red');
		})

6.子选择器

特点：多个选择器， 以   >  进行分割。

示例代码如下：

将div的p标签里的字体设置为红色
$(function() {
			 $('div>p').css('color', 'red');
		})

7.同胞选择器

特点：以  +  进行分割，选中紧邻的兄弟元素
	 以 ~  进行分割，选中后面的所有兄弟元素

示例代码如下：

选中紧邻的兄弟元素div设置红色字体
$(function() {
			 $('p + div').css('color', 'red');
		})
选中所有的兄弟元素
$(function() {
			 $('p ~ div').css('color', 'red');
		})

8.分组选择器

特点：以逗号为分割，同时选中多个元素

示例代码如下：

同时选中ID为box，class为.on和.s1的标签设置字体为红色
$(function() {
			 $('#box,.on,.s1').css('color', 'red');
		})

9.子元素选择器

1.1 :first-child / :last-child

特点：选中父级元素下第一个/最后一个子元素

代码如下：

选中父级元素下的第一个元素
$(function() {
			 $('ul :first-child').css('color', 'red');
		})
选中父级元素下的最后一个元素		
$(function() {
			 $('ul :last-child').css('color', 'red');
		})

1.2 :first-of-type / :last-of-type

特点：选中父级元素下的同类型的第一个/最后一个子元素

代码如下：

选中父级元素下的同类型的第一个元素
$(function() {
			 $('div :first-of-type').css('color', 'red');
		})
选中父级元素下的同类型的最后一个元素
$(function() {
			 $('div :last-of-type').css('color', 'red');
		})

1.3 :nth-child() / :nth-last-child()

特点：正数父元素下的子元素/倒数父元素下的子元素，括号内填写元素顺序

代码如下：

选中父级元素下的第二个元素
$(function() {
			 $('div :nth-child(2)').css('color', 'red');
		})
选中父级元素下的倒数第二个元素
$(function() {
			 $('div :nth-last-lchild(2)').css('color', 'red');
		})

1.4 :nth-of-type()/ :nth-last-of-type()

特点：正数父元素下的同类型子元素/倒数父元素下的同类型子元素，括号内填写元素顺序

代码如下：

选中父级元素下的第二个元素
$(function() {
			 $('div :nth-of-type(2)').css('color', 'red');
		})
选中父级元素下的倒数第二个元素
$(function() {
			 $('div :nth-last-of-type(2)').css('color', 'red');
		})

1.5 :only-child

特点：获取父元素中的唯一一个子元素

代码如下：

$(function() {
			 $('div :only-child').css('color', 'red');
		})