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');
});