jQuery使用注意点技巧2——jQuery 选择器详解

作者:nsrainbow

要用好jQuery首先要用好选择器,连元素都获取不了的话,就谈不上什么特效什么插件了,而且jQuery的选择器用法简单全部学会也不会花你多少时间的,不过有一点还是需要注意的:

通过jQuery的选择器获得的是jQuery对象集合,不能直接使用dom对象的方法,如果要使用dom的方法要取出其中意向,比如:$('#msg')[0].innerHTML或$('#msg')[0].value。jQuery对象有自己的方法比直接调用dom方法更方便。

1、基本选择器

1、$('#msg')  :选中id为msg的元素
2、$('div')        :所有div
3、$('*')           :所有对象
4、$('p,div,a') :p或div或a标签都被选出来

2、层次选择

1、$('p div ul li'):p标签下的div标签下的ul标签下的li......
2、$('p>div'):所有父节点为p的div
3、$('p+div'):所有与p节点同层并且紧邻其后的div,比如 <p></p><div id="1"></div>< id="2"div></div>,用了$('p+div')之后会取到id为2的div
4、$('p~div'):所有与p节点同层并且尾随其后的所有div,还是上面那个例子,这次使用了$('p~div')会得到id为1和2的两个div的集合
需要注意的一点是:

> + ~ 这三个层次运算符是可以连着用的。举个例子:

<ul>
    
<li>
        
<span class="text"></span>
        
<ul>
             
<li>
                   
<ul>
                          
<li>aaa</li>
                   
</ul>
                  </li>
        
</ul>
        
<ul>
            
<li>
                
<ul>
                    
<li>bbb</li>
                
</ul>
            
</li>
        
</ul>
    
</li>
</ul>
<script>
alert($(
'.text+ul~ul>li>ul>li')[0].innerHTML);
</script>

会打印出来的内容是:bbb

3、基本滤镜

基本滤镜的使用我举个例子,接下来的就套这个例子就好理解了

比如:

<ul>
      
<li>aaa</li>
</ul>
<script>
$(
'ul:first')   //会获得<li>aaa</li>对象
</script>

:first 返回: <jQuery对象>
匹配第一个元素
:last 返回: <jQuery对象>
匹配最后一个元素
:not(selector) 返回: <jQuery对象> 数组
匹配不满足selector的元素
:has(selector) 返回: <jQuery对象> 数组
匹配包含满足selector的元素。此选择器为1.2新增
:even 返回: <jQuery对象> 数组
从匹配的元素集中取序数为偶数的元素。
:odd 返回: <jQuery对象> 数组
从匹配的元素集中取序数为奇数的元素。
:eq(index) 返回: <jQuery对象> 数组
从匹配的元素集中取第index个元素
:gt(index) 返回: <jQuery对象> 数组
从匹配的元素中取序数大于index的元素
:lt(index) 返回: <jQuery对象> 数组
从匹配的元素中取序数小于index的元素
:header 返回: <jQuery对象> 数组
匹配所有的标题元素,例如h1,h2,h3……hN。此选择器为1.2新增
:animated 返回: <jQuery对象> 数组
匹配正在执行动画的元素。此选择器为1.2新增
:empty 返回: <jQuery对象> 数组
匹配所有没有子元素(包括文本内容)的元素
:parent 返回: <jQuery对象> 数组
匹配包含子元素(包含文本内容)的所有元素
:contains(text) 返回: <jQuery对象> 数组
匹配所有含有text的元素
:hidden 返回: <jQuery对象> 数组
匹配所有隐藏的元素,包含属性type值为hidden的元素
:visible 返回: <jQuery对象> 数组
匹配所有非隐藏的元素

4、子元素滤镜

E:nth-child(index/even/odd/equation) 返回: <jQuery对象> 数组
匹配所有E在其父元素下满足(index/even/odd/equation)条件的集合。注:下标从1开始
E:first-child 返回: <jQuery对象> 数组
匹配所有E在其父元素下是第一个子元素的集合。例如:HTML(<div><p id="p1"></p></div><div><p id="p2"></p><p id="p3"></p></div>"),使用$("p:first-child"),选取:<p id="p1"></p><p id="p2"></p>
E:last-child 返回: <jQuery对象> 数组
匹配所有E在其父元素下是最后一个子元素的集合。例如:同上的HTML,使用$("p:last-child"),选取:<p id="p1"></p><p id="p3"></p>
E:only-child 返回: <jQuery对象> 数组
匹配所有E是其父元素的唯一子元素的集合。例如:同上的HTML,使用$("p:only-child"),选取:<p id="p1"></p>

5、表单滤镜

:input 返回: <jQuery对象> 数组
匹配所有的input、textarea、select、button
:text 返回: <jQuery对象> 数组
匹配文本域。注:在IE浏览器下,选择的对象是所有type属性为text的元素,在非IE浏览器下,选择的对象是input元素type属性为text的元素
:password 返回: <jQuery对象> 数组
匹配密码域。注:在IE浏览器下,选择的对象是所有type属性为password的元素,在非IE浏览器下,选择的对象是input元素type属性为password的元素
:radio 返回: <jQuery对象> 数组
匹配单选按钮。注:在IE浏览器下,选择的对象是所有type属性为radio的元素,在非IE浏览器下,选择的对象是input元素type属性为radio的元素
:checkbox 返回: <jQuery对象> 数组
匹配复选框。注:在IE浏览器下,选择的对象是所有type属性为checkbox的元素,在非IE浏览器下,选择的对象是input元素type属性为checkbox的元素
:submit 返回: <jQuery对象> 数组
匹配提交按钮。注:在IE浏览器下,选择的对象是所有type属性为submit的元素,在非IE浏览器下,选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素
:image 返回: <jQuery对象> 数组
匹配图像域。注:在IE浏览器下,选择的对象是所有type属性为image的元素,在非IE浏览器下,选择的对象是input元素type属性为image的元素
:reset 返回: <jQuery对象> 数组
匹配重置按钮。注:在IE浏览器下,选择的对象是所有type属性为reset的元素,在非IE浏览器下,选择的对象是input或button元素type属性为reset的元素
:button 返回: <jQuery对象> 数组
匹配按钮。注:在IE浏览器下,选择的对象是所有type属性为button的元素和元素名为button的元素,在非IE浏览器下,选择的对象是input元素type属性为button的元素和元素名为button的元素
:file 返回: <jQuery对象> 数组
匹配文件域。注:在IE浏览器下,选择的对象是所有type属性为file的元素,在非IE浏览器下,选择的对象是input元素type属性为file的元素
:enabled 返回: <jQuery对象> 数组
匹配所有可用的元素。注:即:not(:disabled),参考:disabled的注释
:disabled 返回: <jQuery对象> 数组
匹配所有禁用的元素。注:在非IE浏览器下,选择的对象是禁用的表单元素
:checked 返回: <jQuery对象> 数组
匹配所有被选中的表单。注:在IE浏览器下,选择的对象是含有checked属性的所有元素
:selected 返回: <jQuery对象> 数组
匹配所有选择的表单。注:在IE浏览器下,选择的对象是含有selected属性的所有元素

5、属性滤镜

[attribute] 返回: <jQuery对象> 数组
匹配拥有attribute属性的元素
[attribute=value] 返回: <jQuery对象> 数组
匹配属性attribute为value的元素
[attribute!=value] 返回: <jQuery对象> 数组
匹配属性attribute不为value的元素
[attribute^=value] 返回: <jQuery对象> 数组
匹配属性attribute的值以value开始的元素
[attribute$=value] 返回: <jQuery对象> 数组
匹配属性attribute的值以value结尾的元素
[attribute*=value] 返回: <jQuery对象> 数组
匹配属性attribute的值包含value的元素
[selector1][selector2][selectorN] 返回: <jQuery对象> 数组
匹配满足属性选择器selector1、selector2、selectorN的元素

属性滤镜我举个例子:

<div id='1' rel='mydiv'></div>
<div id='2' rel='mydiv'></div>
<div id='3' rel='mydiv'></div>
<div id='4' rel='mydiv'></div>
<div id='5' rel='mydiv'></div>
<script>
  $(
'div[@rel*=mydiv]')      //获得所有rel属性为mydiv的div
</script>

 

 

发表评论

2个评论

  • huage_L

    3、$('p+div'):所有与p节点同层并且紧邻其后的div,比如 <p></p><div id="1"></div>< id="2"div></div>,用了$('p+div')之后会取到id为2的div这个就写错了,应该是取第一个div, 不知道你是写蒙了,还是什么。。。。

    2017-04-13 15:17:32回复

  • u013047005

    很具有实践意义 感谢分享

    2017-03-27 13:08:51回复

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?