今天抽时间看了下jq,里面的选择器还是很丰富的,下面分别来对他进行分类下:
1)首先是基本的选择器,可选择标签 ,样式,id,通配符4种属性的,
eg:$(div) 是选择dom文档下所有的div元素,$(.class) 是选择所有dom文档下的所有样式为class的元素,id则必须通过$(#id)这种方式来使用,通配符是指 * ,能匹配所有的元素。
2)组合选择器,就是通过各种方法选择的元素组合在一起,返回一个数组元素,各个选择器以,号分隔。
3)层级选择器:
$(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素,即子孙元素,例如:$(“div span.num”);
$(“parent > child”):在给定的父元素下匹配所有的子元素,不包括子元素的子元素,例如:$(“div>span”);
$(“prev + next”):匹配所有紧接在 prev 元素后的 next 元素,即第一个跟着的兄弟元素,例如:$(“p+span”);
$(“prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素,即一群跟着它的兄弟元素(当然也有可能是一个兄弟元素,那就和$(“prev + next”)等价了),例如:$(“p~span”);
4)过滤选择器:
:animated:匹配所有正在执行动画效果的元素集合;
:eq(index):匹配索引为 index 的一个元素,例如:$(“div:eq(0)”)//第一个div;
:even:匹配索引为偶数(双数)的元素集合,例如:$(“div:even”);
:odd:匹配索引为奇数(单数)的元素集合,例如:$(“div:odd”);
:first:匹配找到的第一个元素,等价于:eq(0),例如:$(“div:first”);
:gt(index) :匹配索引大于 index 的 元素集合,例如:$(“div:gt(0)”)//除了第一个div外的所以div;
:lt(index):匹配索引小于于 index 的 元素集合,例如:$(“div:lt(0)”);
:header:匹配h1-h6的所有 元素集合;
:last:匹配找到的最后一个元素,例如:$(“div:last”)//最后一个div;
:not(selector):去除所有与给定选择器匹配的元素,例如:$(“input:not(:checked)”)//除了被选中的所有input
[name=value] 属性选择器,选择所有属性为name,值为value的元素
[name^=value]属性选择器,选择所有属性为name,值为value的开头元素
[name$=value] 属性选择器,选择所有属性为name,值为value的结尾元素
[name~=value]属性选择器,选择所有属性为name,值为空格分隔包含value元素
[name*=value] 属性选择器,选择所有属性为name,值为包含value元素
:button 选择所有button的元素
:checkbox 选择所有为checkbox的元素
:checked 选择所有勾选的元素
:contains(text)选择所有包含指定文本的元素
:disabled,:enabled 选择所有可用和不可用的元素
:empty 选择没有子元素的节点,包括文本节点
5)子元素选择器
:first-child :匹配每个父元素的第一个子元素,相当于E:nth-child(0),例如:$(“ul li:first-child”);
:last-child :匹配每个父元素的最后一个子元素,例如:$(“ul li: last -child”);
:nth-child(index/even/odd/equation):匹配每一个父元素的第N个子或奇偶元素,例如:$(“ul li:nth-child(2)”);
:only-child :如果某个元素是父元素中唯一的子元素,那将会被匹配$(“ul li:only-child”);