1.基本选择器
$('#id') $('.class') $("p") //选取所有p元素 $("*") $("div,span,p.myClass") //div和span和拥有class属性为myClass的p标签
2.层次选择器
$("div span") // div里的所有span $("div > span") // div下元素名是span的子元素 $(".one + div") // 等价于 $(".one").next("div"); class为one的下一个div元素 $("#two~div") // 等价于 $("two").nextAll ("div"); id为two的元素后面的所有div兄弟元素
3.过滤选择器
a.基本过滤选择器
$("div:first") //选取所有div元素中第一个div元素 $("div:last") //选取所有div元素中的最后一个div元素 $("input:not(.myClass)") //选取class不是myClass的input元素 $("input:even") //选取索引是偶数的input元素 $("input:odd") //选取索引是奇数的input元素 $("input:eq(1)") //选取索引等于1的input元素(索引值从0开始) $("input:gt(1)") //选取索引大于(不包括)1的input元素(索引值从0开始) $("input:lt(1)") //选取索引小于(不包括)1的input元素(索引值从0开始) $(":header") //选取所有标题元素如(h1,h2,h3...) $("div:animated") //选取当前正在执行动画的所有div元素
b.内容过滤选择器
$("div:contains('我')") //选取内容含有文本'我'的div元素 $("div:empty") //选取没有子元素(含文本元素)div元素 $("div:has(p)") //选取含有p元素的div元素 $("div:parent") //选取拥有子元素(含文本元素)的div元素
c.可见性过滤选择器
$(":hidden") //选取所有不可见元素 $("div:visible") //选取所有可见的div元素
d.属性过滤选择器
$("div[id") //选取有id属性的元素 $("div[title=test]") //选取title属性为"test"的div元素 $("div[title!=test]") //title属性不等于"test"(含无该属性元素)的div元素 $("div[title^=test]") //title属性以"test"开头的div元素 $("div[title$=test]") //title属性以"test"结束的div元素 $("div[title*=test]") //title属性含有"test"的div元素 $("div[id][title$='test']") //选取用有id属性,且title属性以test结束的div元素
e.子元素过滤选择器
$(":nth-child(index)") $(":nth-child(even)") //选取每个父元素下的索引值是偶数的元素 $("div:nth-child(odd)") //选取div下的索引值是奇数的元素 $(":nth-child(2)") //选取每个父元素下的索引值等于2的元素 $("div:nth-child(3n)") //选取div下索引值是三的倍数的元素(n从0开始) $(":nth-child(3n+1)") //选取每个父元素下索引值是(3n+1)的元素(n从0开始) $("div.one:first-child") //选取每个class为one的div元素下的一个子元素 $("div:last-child") //选取每个div元素下的最后一个元素 $("div:only-child") //选去只有一个子元素的div元素
f.表单元素过滤选择器
$("form1 :enabled") //选取id为"form1"的表单内的所有可用元素 $("form2:disabled") //选取id为"form2"的表单中的所有不可用元素 $("input:checked") //选取所有被选中的input元素 $("select :selected") //选取所有被选中的选项元素
4.表单选择器
$(":input") //选取所有<input>,<textarea>,<select>,<button>元素 $(":text") //选取所有单行文本框 $(":password") $(":radio") //选取所有单选框 $(":checkbox") //选取所有复选框 $(":image") $(":submit") $(":reset") //选取所有重置按钮 $(":button") $(":file") //选取所有上传域 $(":hidden") //选取所有不可见元素
注意事项
1.特殊符号用转义符
<div id='id#b'>bb</div> $('#id\\#b') <div id='id[1]'>bb</div> $('#id\\[1\\]')
2.选择器中的空格(后代选择器与过滤选择器的不同引起的问题)
$('.test :hidden') //选取class为"test"的元素里面的隐藏元素 $('test:hidden') //选取隐藏的class为"test"的元素