1:基本选择器:基本选择器是Jquery中最常用的选择器,也是最简单的选择器。,它通过元素ID、class和标签名等来查找Dom元素。在玩野中每个Id名称只能使用一次,class允许重复使用。
Demo:#ID $("#test"), .class $(".test"), element $("P")
还有一个集合元素,将每一个选择器匹配到的元素合并后一起返回,$("div,span,p.myClass")
2:层次元素:如果想通过Dom元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素,那么同辈元素是一个非常好的选择。
Demo:后代元素 $("div span") 选取div中的所有span 常用
子元素 $("div>span") 选取div下元素名是span的子元素 常用
同辈元素 $(".one+div") 选取class为one的下一个div同辈元素 不常用 因为等价于$(".one").next("div");
$("#two~div") 选取id为two的元素后面的所有div元素 不常用 因为等价于$(".one").nextall("div");
$("#two~div") 选取id为two的元素所有div元素,无乱前后,只要是同辈节点就都能匹配 $("#prev").siblings("div");
3:过滤选择器:通过特定的过滤规则来筛选出所需的Dom元素
基本过滤选择器
Demo: :first 选取第一个元素 $("div:first") 选取所有的div元素中的第一个div
:last 选取最后一个元素 选取所有的div元素中的最后一个div
:not(selector) $("div:not(.myClass)") 选取class不是myClass的div
:even $("div:even") 选取索引是偶数的div元素,索引从0开始
:old 奇数
:eq(index) $("div:eq(1)") 索引为1的div
:gt(index) 大于;
:lt("index") 小于;
:header 选取所有的标题元素
:animated 选取正在执行的动画
:focus 选取当前获取焦点的元素
内容过滤选择器
:contains(text) $("div:contains('我')") 选取含有文本"我"的div元素
:has(p) $("div:has(p)") 选取含有P元素的div元素
:parent $("div:parent") 选取拥有子元素(包括文本元素)的div元素
:empty $("div:empty") 选取不包含子元素(包括文本元素)的div元素
可见性过滤选择器
:hidden 选取所有不可见的元素,包括<input type="hidden"/>,<div style="display:none">/<div style="visibility:hidden">
:visible 选取所有可见的元素
4:属性过滤选择器
$("div[id]") 选取拥有属性id的元素 Demo:$("div[title]").css("background"."#bbffaa"); 改变含有属性title的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[title*=test]") 获取属性title的值含有test的div元素
$('div[title|="en"]') 改变属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素的背景色
$("div[title~='uk']") 改变属性title用空格分隔的值中包含字符uk的元素的背景色
6:表单对象属性过滤器 主要是对所选择的表单元素经行过滤
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素(单选框,复选框) $("input:checked") 选取所有被选中的<input>元素
:selected 选取所有被选中的选项元素 $(select:selected) 选取所有被选中的选项元素