jQuery中的选择器

CSS选择符:

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

子元素组合符(>)将horizontal类添加到ID为selected-plays的元素(#selected-plays)的子元素(>)中的所有的列表项(li)。注意这里使用子元素选择符选择的只是ID为selected-plays的元素的直接子元素,不包括更深层的子元素。

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

否定式伪类选择符识别没有horizontal类的所有列表项,并为其添加sub-level这种类型的样式。注意,这里取得的每个列表项(<li>)是ID为selected-plays的元素(#selected-plays)的后代元素,不只是直接子元素,且这些子元素没有horizontal类(:not(.horizontal))。


属性选择符:

要选择带有alt属性的所有图像元素:

$(‘img[alt]’)

寻找所有带href属性([href])且以mailto开头(^=”mailto:”])的锚元素(a),并为其添加mailto这个类型的样式:

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

(属性选择符使用一种从正则表达式中借鉴来的通配符语法,以^表示值在字符串的开始,以$表示值在字符串的结尾,也是用星号*表示要匹配的值可以出现在字符串中的任意位置,用叹号!表示对值取反。)

要为所有指向PDF文件的链接添加类型,需要使用美元符号($)而不是脱字符号(^),这是因为要选择所有href属性以.pdf结尾的链接:

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

属性选择符可以组合使用,例如可以为href属性既以http开头且任意位置包含henry的所有链接添加一个henrylink类型的样式:

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


 自定义选择符:

l  jquery中的多数自定义选择符都可以让我们从已经找到的元素中选出一或多个元素。自定义选择符通常跟在一个CSS选择符后面,基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同,即选择符以冒号(:)开头。

想从带有horizontal类的<div>集合中选择第二项:

$(‘div.horizontal:eq(1)’)

注意,因为JavaScript数组采用从0开始的编号方式,所以eq(1)取得的是集合中的第2个元素。(而CSS中数组则是从1开始编号,因此CSS选择符$(‘div:nth-child(1)’取得的是作为其父元素第1个子元素的所有div元素。)


每隔一行为表格添加样式:

为表格的奇数行(<tr>标签)添加alt类型的样式:

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

(:eq()选择符、:odd和:even选择符都使用JavaScript内置从0开始的编号方式,因此,第一行的编号为0(偶数),第二行的编号为1(奇数),也就是说奇数行的编号为偶数,偶数行的编号为奇数。)

在存在多个表格的情况下,如果上一个表格的最后一行恰好以有样式的形式结束,则下一个表格的第二行会被添加样式,因为只考虑所有<tr>项,想让后一个表格也以第一行有样式的形式存在,解决方法是使用nth-child()选择符,这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置,它可以接受数值,odd或even作为参数,且nth-child()jquery中唯一从1开始计算的选择符:

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

为所有是其父元素奇数个子元素的tr元素添加样式,这样的话每个表格都会以开头第一行有样式的形式出现,注意这里使用的参数是odd,因为nth-child()是从1开始计数的选择符。


 基于上下文内容选择元素:

希望突出显示(添加highlight类型的样式)所有提到Henry的表格单元,使用:contain()选择符:

$('td:contain(Henry)').addClass('highlight');

注意,:contain()选择符区分大小写。


基于表单的选择符:

选择所有选中的单选按钮(而不是复选框):

$(‘input[type=”radio”]:checked’);

选择所有密码输入字段和禁用的文本输入字段:

$(‘input[type=”password”],input[type=”text”]:disabled’);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值