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"),意思是选取含有子元素或者文本的元素。

posted @ 2017-08-29 15:37  JavaScriptBUG  阅读(207)  评论(0编辑  收藏  举报