达蒙

导航

jQuery--选择器总结

传统选择器:
$('#test') id选择器 
$('.test') class选择器
$('p') 标签选择器
$('*') 通配符选择器
$('div,span,.myclass') 多个元素选择器
层次选择器:
$('div span') 选取div 里所有的span 元素
$('div>span') 选取div元素下的子span
$('div+span') 选择div后紧接着的span元素
$('div~span') 选择div 后面所有的span兄弟元素
过滤选择器:
$('div:first') 第一个div元素
$('div:last') 最后一个div元素
$('input:not(.myclass)') 选取class 不是myclass 的input元素
$('input:even') 选取索引为偶数的input元素
$('input:odd') 选取索引为奇数的input元素
$('input:eq(1)') 选取索引为1的input元素
$('input:gt(1)') 选取索引大于1的input元素
$('input:lt(1)') 选取索引小于1的input元素
$(':header') 选取网页中所有的标题元素
$('div:animated') 选取正在执行动画的div元素
内容过滤选择器:
$('div:contains("test")') 选择所有含有文字 test 的div元素
$('div:empty') 选择不包含子元素的 div空元素
$('div:has(p)') 选择含有 p标签的div元素
$('div:parent')选择含有子元素的div元素
可见性过滤选择器:
$('input:hidden') 选择所有隐藏的input
$('div:visible') 选择所有可见的div元素
属性过滤器:
$('div[id]') 选择拥有属性id 的选择器
$('div[id=test]') 选择属性id 为test 的div选择器
$('div[id!=test]') 选择属性id 不为test 的div选择器
$('div[id^=test]') 选择属性id 值以test开头 的div选择器
$('div[id$=test]') 选择属性id 值以test结尾 的div选择器
$('div[id*=test]') 选择属性id 值包含test 的div选择器
$('div[id][title$="test"]') 选择有属性id 并且title属性以test 结尾的div
子元素过滤选择器:
$('div:nth-child(1)') 选取每个父元素第index 的元素
$('ul li:first-child') 选取每个ul 中第一个li元素
$('ul li:last-child') 选取每个ul 中最后一个li元素
$(ul li:only-child) 选取是唯一子元素的li元素
$(div:nth-child(even)) 选择偶数的div元素
$(div:nth-child(odd)) 选择基数的div元素
$(div:nth-child(3n)) 选择3的倍数的div元素
表单对象属性过滤器:
$('#form1 :enabled') 选取id为form1 的表单内所有可用元素(注意:这里是有空格的)
$('#form1 :disabled') 选取id为form1 的表单内所有不可用元素(注意:这里是有空格的)
$('input:checked') 选取所有被选中的input 元素
$('select :selected') 选取所有被选中的下拉列表

posted on 2014-09-09 16:10  达蒙  阅读(120)  评论(0编辑  收藏  举报