在该章节会给大家介绍一些常用的jQuery选择器。
一、CSS选择器
(1)$("#id") //id选择器
(2)$(".className") //类选择器 用于选择引用了该样式类的元素
例:$(".myClass") 选择所有应用了myClass样式的元素
(3)$("tagName") //HTML标签选择器 用于选择某些标签元素
例:$("p") 选择所有的p标签元素
(4)$("selector1,selector2,...,selectorN") //群组选择器
例:$("div,span,p.myClass") //选择所有的div、span以及应用了myclass样式的p元素
(5)$("*") //通用选择器 该写法则获取文档中所有元素
例:$("*",$("#div1")) 获取id为div1中的所有子元素;
二、层级选择器
(1)$("parent>child") //子元素选择器 其中parent是任何有效的选择器,child也是一个选择器,用于筛选子元素
例:$("ul.myClass>li") 选择应用了myclass样式类下面的所有li元素
(2)$("ancestor descendant") //后代选择器 其中ancestor是任何有效的选择器 descendant也是一个选择器用于筛选后代元素,其中以空格分隔。
例:$("ul.myClass li") 选择应用了myclass样式类下面的所有li元素
注:该选择器与子元素选择器不同之处在于,子元素选择器只负责筛选当前父级下的第一层子集。而后代选择器则筛选当前父级下面的所有子集。
(3)$("prev+next") //紧邻同辈元素选择器 其中prev和next都是有效的选择器 两者之间用"+"相连
例:$("#id+li") //表示选择紧跟在#id标签后面的并且为同级的li标签
(4)$("prev~siblings") //相邻同辈元素选择器 其中prev和siblings都是有效的选择器 两者之间用“~”相连
例:$("#prev~div") //表示选择在#prev元素后面 同辈的div元素
三、表单域选择器
(1)$(":input") //input选择器 用于选择所有的input标签
(2)$(":text") //text选择器 用于选择所有的单行文本框 如:(<input type="text"/>)
(3)$(":password") //password选择器 用于选择所有的密码框 如:(<input type="password"/>)
(4)$(":radio") //radio选择器 用于选择所有单选按钮
(5)$(":checkbox") //checkbox选择器 用于选择所有的复选框
(6)$(":file") //file选择器 用于选择所有的文本域 如:(<input type="file"/>)
(7)$(":image") //image选择器 用于选择所有的图像域 如:(<input type="image"/>)
(8)$(":hidden") //hidden选择器 用于选择所有不可见元素 如:display:none 以及 <input type="hidden" />
(9)$(":button") //button选择器 用于选择所有按钮
(10)$(":submit") //submit选择器 用于选择所有提交按钮
(11)$(":reset") //reset选择器 用于选择所有重置按钮
在本章节中给大家介绍了一些比较常用的选择器,但在实际当中往往需要在选择的集合中进行筛选才能得到真正想要操作的元素。所以在下一章节中我会给大家介绍一些常用的过滤选择器。