jQuery 选择元素

1.$()函数

在jQuery中，$()函数充当一个工厂，可以接受标签名，ID和CSS类作为参数，返回包含页面中对应元素的jQuery对象

这些选择符可以单独使用，也可以与其他选择符组合使用。下面展示了这3种基本的选择符。

选　择　符	CSS	jQuery	说明
标签名	P	$('p')	取得文档中 所有的段落
ID	#some-id	$('#some-id')	取得文档中 ID为some-id 的一个元素
类	.some-class	$('.some-class')	取得文 档中类为 some-class 的所有元素

 

2.CSS选择符

$(document).ready(function(){

//查找ID为selected-plays的元素（#selected-plays）的子元素（>）中所有的列表项（li）。

$('#selected-plays > li').addClass('horizontal');

});

$(document).ready(function(){

//查找ID为selected-plays元素的子元素的所有的列表项(li)，并且没有horizontal类(not(. horizontal))

$('#selected-plays  li:not(. horizontal)').addClass('sub-level');

});

 

3.属性选择符

属性选择符允许以类似正则表达式的语法来标识字符串的开始（^）和结尾（$）。而且，也可以使用星号（*）表示位于字符串中任意位置的值，使用叹号（!）表示相反的值。

要为所有电子邮件链接添加类，需要构造一个选择符，用来寻找所有带href属性（[href）且以mailto开头（^="mailto:"]）的锚元素（a）。结果如下所示：

$(document).ready(function(){

$('a[href^=mailto:]').addClass('mailto');

});

要为所有指向PDF文件的链接添加类，需要使用美元符号（$）而不是脱字符号（^）。这是因为我们要选择所有href属性以.pdf结尾的链接：

$(document).ready(function(){

$('a[href$=.pdf]').addClass('pdflink');

});

属性选择符也可以组合使用。例如，可以为href属性既以http开头且任意位置又包含henry的所有链接添加一个henrylink类：

$(document).ready(function(){

$('a[href^=http][href*=henry]').addClass('henrylink');

});

 

4.自定义选择符

自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以一个冒号（:）开头。例如，我们想要从匹配的带有horizontal类的div集合中选择第2个项，那么应该使用下面的代码：

$('div.horizontal:eq(1)')

注意，因为JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始的，因此CSS选择 符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div（在此，其实也可以使用$('div:first- child')来代替）。

 

5.每隔一行表格添加样式

jQuery库中的两个十分有用的自定义选择符是:odd和:even。为表格中的偶数行添加样式

$(document).ready(function(){

$('tr:odd').addClass('alt');

});

修改表格中包含Henry单元格的样式

$(document).ready(function(){

$('tr:nth-child(even)').addClass('alt');

$('tr:contains(Henry)').addClass('highlight');

});