常用选择器
#id 选择匹配ID的元素 单个元素 $( “test”) 取Id为test的元素
.class 选择给定类名的元素 集合元素 $(“ .test”) 取所有class 为test的元素
Element 选择给定元素名的元素 集合元素 $(“P”) 取所有<p>元素
* 匹配所有元素 集合元素 略
Selector1, selector2, … ,selectorN 将每个选择器匹配的元素合并后一起返回 集合元素 $(“div , span, p.myclass “) 选择所有<div>, <span>和拥有class为myclass的<p>标签的一组元素
层次选择器
$(“ancestor descendant”) 选择ancestor元素里的所有descendant(后代)元素 集合元素 $( “div span”) 选择div里的所有span元素
$(“parent > child”) 选择parent元素下的child元素 集合元素 $(“ div >span ”) 取div下元素名是<span>的子元素
$(“prev + next “)或 $(“prev”).next() 取prev元素后的next元素 集合元素 $(“.one + div”) 或$(“.one”).next(“div”)取class为one的下一个div元素
$( “prev ~siblings”)
或 $(“prev”).nextAll(); 取prev元素后的所有siblings元素 集合元素 $(“#two ~ div”)取id为two元素后面的所有div兄弟元素$(“prev”).nextAll(“div”)
$(“prev”) . siblings () 取prev元素的所有同辈元素 集合元素 $(“#prev”).siblings(“div”)取所有与prev同辈的元素,无论前后位置
过滤选择器
:first 选择第一个元素 单个元素 $(“div :first”)取所有div中第1个div元素
:last 选择最后一个元素 单个元素 $(“div:last”)所有div中最后一个div元素
:not(selector) 去除与给定选择器匹配的元素 集合元素 $(“input:not(.myclass)”)选取class不是myclass的input元素
:even 取索引是偶数的元素 集合元素 $(“input:even”)取索引是偶数的input元素
:odd 选择索引是奇数的元素 集合元素 $(“input:odd”)
:eq (index) 取索引等于index的元素 单个元素 $(“input :eq(1)”)索引等于1的元素
:gt (index) 取索引大于index的元素索引都从0开始计算 集合元素 $(“input :gt(1)”)取索引大于1而不包括1的元素
:lt (index) 取索引小于index的元素 集合元素 $(“input :lt(1)”)
:header 取所有标题元素 集合元素 $(“:header”)
:animated 取当前正在执行动画的所有元素 集合元素 $(“div :animated”)取正在执行动画的div元素内容过滤
:contains(text) 取内容为text的元素 集合元素 $(“div:contains(‘我’)”)
:empty 取不包含子元素或文本的空元素 集合元素 $(“div :empty”)
:has(selector) 取含有选择器所匹配的元素的元素 集合元素 $(“div :has(p)”)取含有<p>元素的<div>元素
:parent 取含有子元素或文本元素 集合元素 $(“div: parent”) 注意与parent()方法的区别可见过滤
:hidden 取所有不可见元素 集合元素 $(“:hidden”) 包括hiden和none
:visible 取所有可见元素 集合元素 $(“div :visible”)属性过滤器 描述 返回 示例
[attribute] 取有此属性的元素 集合元素 $(“div[id]”) 取有id属性的元素
[attribute=value] 取属性值为value的元素 集合元素 $(“div[title=test]”)
[attribute!=value] 取值不等于value的元素 集合元素 $(“div [title!=test]”)
[attribute^=value] 取值以value开始的元素 集合元素 $(“div[title^=test]”)
[attribute$=value] 取值以value结束的元素 集合元素 略
[attribute*=value] 取值含有value的元素 集合元素 略
[slector1][selector2]….. 用属性选择器合并成一个复合属性选择器 集合元素 $(“div[id][title$=’test’]取有属性id且属性title以test结束的<div>元素子元素过滤
:nth-child (index/even/odd/equation)取每个父元素下第index个子元素或奇偶元素,index从1开始 集合元素 注意与 :eq(index)的区别
很常用的过滤器 :nth-child(2n);取索引值是2的倍数的元素,n从0开始
:first-chile 取父元素下第1个子元素 集合元素 注意与:first的区别
:last-child 取每个父元素的最后一个子元素 集合元素 注意与:last的区别
:only-child 如果某个元素是它父元素的中的惟一子元素,则匹配 集合元素 $(“ul li:only-child”) 选择<ul>中是惟一子元素的<li>
表单属性过滤
:enabled 取所有可用元素 集合元素 $(“#form1 :enabled”)取id为form1的表单内的所有可用元素
:disabled 取所有不可用元素 集合元素 略
:checked 取所有被选中的元素 集合元素 $(“input :checked”)
:selected 取所有被选中的选项元素(下拉列表) 集合元素 $(“select :selected”)
表单选择器
:input 所有的<input><textarea><select>和<button>元素 集合元素 $(“:input”)
:text 取所有单行文本框 集合元素 $(“:text”)
:password 取所有密码框 集合元素 略
:radio 取所有单选框 集合元素 略
:checkbox 取所有多选框 集合元素 略
:submit 取所有提交按钮 集合元素
:image 取所有图像按钮 集合元素
:reset 取所有按钮 集合元素
:file 取所有上传域 集合元素
:hidden 取所有不可见元素 集合元素
【注意:选择器出现空格表示为后代选择器,与过滤选择器是不同的结果,例:
Var $t_a = $(‘ .test :hidden’); //表示选取 class 为”test”的元素里面的隐藏元素
而var $t_b = $(‘ .test:hidden’); //表示选中隐藏的class为”test”的元素】