jquery独特的选择器
最近开始学习jquery,发现jquery的强大真的不是一两句话就能概括的。jquery是一个用原生JS写出来的类库,它强调的理念是写得少,做的多。jquery独特的选择器、链式操作、事件处理机制和封装完善的Ajax都是其他类库望尘莫及的。
要使用jquery的话,只需要在jquery.com官网下下载源代码,并且用<script></script>标签进行引用就能使用了。
类似:
1 <script src="../scripts/jquery.js" type="text/javascript"></script>
在jquery当中,很重要的一个是它的独特的选择器,相比于javascript中的getELementById或者getElementsBytTagName的选择器而言,jquery的选择器就相对简单得多了,代码也少的多了。只需要一个$()就能获取无论是通过ID还是class还是标签名等等,当然,jquery()也可以,因为在jquery中$相当于jquery。
总结的选择器:
一、基本选择器
通过id:#id;示例$("#wrap"),意思是获取id为wrap的元素。
通过class:.class;示例$(".wrap"),意思是获取class为wrap的元素。
*:通配符;$("*"),意思是获取所有元素。
二、层次选择器
$("ancestor desendant"),意思获取ancestor里面的desendant元素。
$("parent>child"),意思获取parent下的child子元素。
$("prev+next"),意思获取prev元素后下一个的next元素。
$("prev~sibling"),意思获取prev元素之后的所有sibling元素。
三、过滤选择器
1.基本过滤选择器
$("div.c:first"),意思是选取class名为c的所有div中的第一个div。
$("div.c:last"),意思是选取class名为c的所有div中的最后一个div。
$("div.c:not(.a)"),意思是选取class名为c的所有div中的不含有a这个class的div。
$("div.c:even"),意思是选取class名为c的所有div中的索引为偶数的div(从0开始算,0算偶数)。
$("div.c:odd"),意思是选取class名为c的所有div中的索引为奇数的div(从0开始算)。
$("div.c:eq(2)"),意思是选取class名为c的所有div中的索引为2的div(从0开始算)。
$("div.c:gt(2)"),意思是选取class名为c的所有div中的索引大于2的div(从0开始算,不包括2)。
$("div.c:lt(2)"),意思是选取class名为c的所有div中的索引小于2的div(从0开始算,不包括2)。
$("div.c:header"),意思是选取class名为c的所有标题标签。
$(":animated"),意思是选取当前正在执行动画的元素。
$(":focus"),意思是选取当前获取焦点的元素。
2.内容过滤器
$(":contains(text)"),意思是文本内容包含”text“的元素。
$(":empty"),意思是选取不包含子元素或者文本内容为空的元素。
$(":has(p)"),意思是选取含有p元素的元素。
$(":parent"),意思是选取含有子元素或者文本的元素。
3.可见性过滤选择器
$(":hidden"),意思是选取所有不可见的元素。
$(":visible"),意思是选取所有可见的元素。
4、属性过滤器
[attribute],意思是选取所有拥有此属性的元素。
[attribute=value],意思是选取所有拥有此属性值为value的元素。
[attribute!=value],意思是选取所有拥有此属性值不为value的元素。
[attribute^=value],意思是选取此属性的值以value为开始的元素。
[attribute$=value],意思是选取此属性的值以value为结束的元素。
[attribute*=value],意思是选取此属性值含有value的元素。
[attribute|=value],意思是选取此属性的值等于value或者以value为前缀的元素。
[attribute~=value],意思是选取此属性的值用空格分隔并且含有value的元素。
5、子元素过滤选择器
$("div.a:nth-child(1)"),意思是选取class为a下的索引为1的子元素(索引从1开始算起,索引可以是even,odd,n的函数)。
$("div.a:first-child"),意思是选取class为a下的第一个子元素。
$("div.a:last-child"),意思是选取class为a下的最后一个子元素。
$("ul li:only-child"),意思是选取ul下的是唯一子元素的li元素。
6、表单对象属性过滤选择器
$("form:enabled"),意思是选取form下的所有可用子元素。
$("form:disabled"),意思是选取form下的所有不可用子元素。
$("form:checked"),意思是选取form下的所有选中的input元素。
$("form:selected"),意思是选取form下的所有被选中的选项option元素。
$(":parent"),意思是选取含有子元素或者文本的元素。