jquery 之选择符

时间:2022-09-04 14:49:50

css:选择符
$('#selected-plays > li') 使用了子元素组合符,查找 ID 为 selected-plays 的元素的子元素( > )中所有的列表 li
$('#selected-plays li:not(.horizontal)') 取得 #selected-plays 的后代元素,没有 horizontal类( :not(.horizontal))添加 类 sub-level

属性选择符:通过HTML 元素的属性选择元素,例如,链接的 title 属性,图像 alt 属性,如选择带有 alt 属性的所有图像元素  $('img[alt]'),允许类似正则表达式的语法来标识字符串的开始( ^ )和结束 ( $ ),使用 ( * ) 表示任意位置,使用 叹号 ( ! ) 表示相反的值

$('a[href^=mailto:]') 表示选择所有带 href 属性 ( [href ) 且以 mailto:开头 ( ^=mailto:]) 的锚元素 a

$('a[href$=.pdf]') 表示选择所有 href 属性以 .pdf 结尾的链接

$('a[href*=henry][href!=mailto:henryiv@king.co.uk]') 表示查找 所有 a 中 的 href 属性中带有 henry 元素且 href不是 mailto:henryiv@king.co.uk 的元素

$(div.horizontal:eq(1)) 表示带有 horizontal 类的 div 集合中选择第二个项, javascript 数组采用从 o 开始编号方式,所以 eq(1) 表示选择第二个元素,但只有 $('div:nth-child(1)') 是从 1 开始编号的,jquery 只有这个元素是从 1 编号开始,所以此表示选择第一个 div 元素

:odd奇数 index, :even 偶数 index
$('tr:odd') $('tr:even') 如果这样用会有一个问题,就是如果同一页面有多个表格的话,就是按照连续的表格处理,即相当于把反面的表格也放到第一个表格中处理,为了避免这种情况,可用 $('tr:nth-child(odd)') 就是分别单独处理同一个页面的每个表格

$('td:contains(Henry)') 表示 td 中包含有 Henry 内容的元素,区分大小写

基本表单的选择
<input type="text" /> $(':text')
<input type="radio" /> $(':radio')
$(':checkbox') , $(':image')
$(':submit') , $(':reset'), $(':password'),
$(':checked'), $(':selected'), $(':enabled')

DOM 遍历法
连缀(少用)
$('td:contains(Henry)') // 包含 Henry 的单元格
.parent()  // 取得其父元素
.find('td:eq(1)') // 在父元素中查找第二个元素
.addClass('highlight') // 为该元素添加 highlight 类
.end()  // 恢复到包含 Henry 单元格的父元素
.find('td:eq(2)')  // 在父元素中查找第三个元素
.addClass('highlight'); // 为该单元格添加 highlight