jQuery选择器(Selectors,或译为选择符?)可以说是甚为强大,jQuery能够得以如此之名气,选择器的功劳是功不可没的.利用 CSS和XPath选择符的能力,加上自己的”自定义选择符”,几乎无所不能的操作DOM,轻松的获取DOM中的任意元素和元素组.So,掌握好 jQuery选择器,对于jQuery的学习就前进了一大步,最终发挥你的想象力,即可写出优雅高效的CODE;而对于新手而言,如何选择DOM中的元素 是一个问的最多的问题.
    jQuery官方API中有列出详细的信息,可以移步至:Selectors.

一、jQuery选择器 – 基本(Basics)
在继续学习之前,我们必须具备一些jQuery的基本知识,至少要知道jQuery是使用”$”作为替代符,而且要了解HTML与CSS知识等.
这个Basics在jQuery选择器中是最好掌握,也是使用最多的部分了.因为我们在制作简单的页面效果时是不需要采取多么的复杂的dom选择的.
API文档中把它分为了六部分:

引用
#id
element
.class
.class.class
*
selector1, selector2, selectorN

#id
用法: $("#myDiv");
说 明: 这个就是直接选择html中的id=”myDiv”,值得注意的是:如果选择器中包含特殊字符,可以用两个斜杠(\\)转义,至少,”.”, “[", "]” 是特殊字符.选择符内可以把双引号改为单引号,不过在复杂点的获取DOM的时候,单引号总是会引发歧义或错误,还是使用双引号吧.

element
用法: $("div");
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.

.class
用法: $(".myClass");
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

.class.class
用法: $(".myClass.myOtherClass");
说明: 这个用法貌似是新的,意思就是仅匹配html中class=”myClass myOtherClass”的元素,而class=”myClass”和class=”myOtherClass”这样的class是不匹配的.

*
用法: $("*");
说明: 匹配所有元素,多用于结合上下文来搜索.目前我还没用上它,不过看说明说是用来结合搜索用的,那么肯定会在大规模应用中用到吧.

selector1, selector2, selectorN
用法: $("div,span,p.myClass")
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素p class=”myClass”
※ 注意
选择器中,逗号表示“或”,空格表示“和”。例如,$("div,span")表示搜索div或span标记的所有元素;$("div span")表示同时满足两个要求,及匹配div块中span的元素,其他的span元素不匹配。

二、jQuery选择器 – 层次(Hierarchy)
我对层次(Hierarchy)的理解:使用构造的选择符来层层过滤DOM元素.
Hierarchy包括了四部分:

引用
ancestor descendant
parent > child
prev + next
prev ~ siblings
ancestor descendant
用法: $("form input") ;

说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

parent > child
用法: $("form > input") ;
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用XPath选择符的.

prev + next
用法: $("label + input") ;
说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的.

prev ~ siblings
用法: $("form ~ input") ;
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

三、jQuery选择器 – 基础过滤(Basic Filters)
基础过滤(Basic Filters)是相对于以后要学习的其他的过滤方法而言的,基础过滤(我小学没毕业,不知道是不是这样翻译)所过滤的内容都是利用jQuery获得到的DOM元素,我的理解就是像一个大筛子,把利用那些基本选择器获得到的集合进行按规则剔除.
Basic Filters包括了十部分,稍稍有点多:

引用
:first
:last
:not(selector)
:even
: odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated

:first
用法: $("tr:first") ;
说明: 匹配找到的第一个元素.我以前就遇到了取第一个和最后一个的情况.

:last
用法: $("tr:last") ;
说明: 匹配找到的最后一个元素.与 :first 相对应.

:not(selector)
用法: $("input:not(:checked)") ;
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

:even
用法: $("tr:even") ;
说明: 匹配所有索引值为偶数的元素,从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

: odd
用法: $("tr:odd") ;
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

:eq(index)
用法: $("tr:eq(0)") ;
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

:gt(index)
用法: $("tr:gt(0)") ;
说明: 匹配所有大于给定索引值的元素.

:lt(index)
用法: $("tr:lt(2)") ;
说明: 匹配所有小于给定索引值的元素.

:header
用法: $(":header").css("background", "#EEE") ;
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

:animated
例子:

引用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
  $(document).ready(function(){

$("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

});
  </script>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
  </style>
</head>
<body>
  <button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>
</body>
</html>

说 明: 匹配所有正在执行动画效果的元素.这个需要好好理解下,因为看起来比之前的理解上都难一点.其中,toggleClass是添加/移除 class;slideToggle是收缩/伸展块级元素.也就是说slideToggle让其中的一个div在不断的执行动画(收缩/伸展),当点击 button时,就用div:animated匹配到了这个元素上,所以改变了颜色.

四、jQuery选择器 – 内容过滤(Content Filters)
对于jQuery的学习,最好的办法就是实际使用它,并多多的使用!不然很快就会忘记的.

引用
:contains(text)
:empty
:has(selector)
:parent

:contains(text)
用法: $("div:contains('John')") ;
说明: 匹配包含给定文本的元素.这个选择器比较有用(话说都很有用),当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

:empty
用法: $("td:empty") ;
说明: 匹配所有不包含子元素或者文本的空元素.嗯,这个看名字就大概知道是什么意思了,就是元素里面没有任何东西(子元素/内容)的时候就匹配.

:has(selector)
用法: $("div:has(p)").addClass("test") ;
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

:parent
用法: $("td:parent") ;
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

五、jQuery选择器 – 可见度过滤(Visibility Filters)
可见度过滤(Visibility Filters),无非就是能看见和不能看见.所以Visibility Filters只包括了两部分:

引用
:hidden
:visible

:hidden
用法: $("tr:hidden")
说 明: 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

:visible
用法: $("tr:visible")
说明: 匹配所有的可见元素.

六、jQuery选择器 – 属性过滤(Attribute Filters)
属 性过滤(Attribute Filters)的内容就是html元素中的属性,例如 name, id, class, 但是不是指的其值,是指属性本身.我在每篇文章里面都讲一下自己对这个选择器系列的理解,原因其一是方便理解其含义并记忆,其二就是”混个脸熟”,即便记 不住,在以后用到的时候也可以很快的查找api并应用上.

其包括以下几个选择器:

引用
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attributeFilter1][attributeFilter2][attributeFilterN]

[attribute]
用法: $("div[id]") ;
说明: 匹配包含给定属性的元素.注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可.是的,新版必须去掉@符号,这个改变相信使用老版本的童鞋会习惯的.例子中是选取了所有带”id”属性的div标签.

[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true);
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.

[attribute!=value]
用法: $("input[name!='newsletter']").attr("checked", true);
说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用场.

[attribute^=value]
用法: $("input[name^='news']") ;
说明: 匹配给定的属性是以某些值开始的元素.嗯,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

[attribute$=value]
用法: $("input[name$='letter']") ;
说明: 匹配给定的属性是以某些值结尾的元素.

[attribute*=value]
用法: $("input[name*='man']") ;
说明: 匹配给定的属性是以包含某些值的元素.

[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']") ;
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导致什么宇宙飞船爆炸还是什么的事了.有点耸人听闻,但是等我们使用的非常非常多了以后,自然就很容易分开区别了.

七、jQuery选择器 – 后代过滤(Child Filters)
后代过滤(Child Filters)的意思就是利用其他jQuery选择器选择到了一组dom,而其都具有相同的属性与特征,无法再细化选择的时候,Child Filters 此时就派上了用场了.它就是用来选择此组元素中的第几个.

其包括以下几个选择器:

引用
:nth-child(index/even/odd/equation)
:first-child
:last-child
: only-child

:nth-child(index/even/odd/equation)
用法: $("ul li:nth-child(2)") ;
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

:first-child
用法: $("ul li:first-child") ;
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

:last-child
用法: $("ul li:last-child") ;
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

: only-child
用法: $("ul li:only-child") ;
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

八、jQuery选择器 – 表单(Forms)
这组表单(Forms)选择器内容稍稍多了点,有十一个,其实也就是input的那些type啦,但是熟悉html的童鞋快速的掌握这些一点问题都没有!
其包括以下几个选择器:

引用
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

:input
用法: $(":input") ;
说明: 这个自然就是选择所有的input类型了,不管type等于何值(首先得是符合游戏规则的).

:text
用法: $(":text") ;
说明: 匹配所有的单行文本框.

:password
用法: $(":password") ;
说明: 匹配所有密码框.

:radio
用法: $(":radio") ;
说明: 匹配所有单选按钮.

:checkbox
用法: $(":checkbox") ;
说明: 匹配所有复选框

:submit
用法: $(":submit") ;
说明: 匹配所有提交按钮.

:image
用法: $(":image") ;
说明: 匹配所有图像域.

:reset
用法: $(":reset") ;
说明: 匹配所有重置按钮.

:button
用法: $(":button") ;
说明: 匹配所有按钮.这个包括直接写的元素button.

:file
用法: $(":file") ;
说明: 匹配所有文件域.

:hidden
用法: $("input:hidden") ;
说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,看个例子:

引用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
  $(document).ready(function(){

// in some browsers :hidden includes head, title, script, etc... so limit to body
    $("span:first").text("Found " + $(":hidden", document.body).length +
                         " hidden elements total.");
    $("div:hidden").show(3000);
    $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

});
  </script>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
    <input type="hidden" />
    <input type="hidden" />
    <input type="hidden" />
  </form>
  <span>
  </span>
</body>
</html>

九、jQuery选择器 – 表单过滤(Form Filters)
表单过滤(Form Filters)是jQuery文档中分出来的选择器中的最后一组,但这并不表示我们仅仅应用这些选择器就能够驰骋DOM海洋了,我们还需要学习后面的过滤器等等.
其包括以下几个选择器:

引用
:enabled
:disabled
:checked
:selected

:enabled
用法: $("input:enabled") ;
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

:disabled
用法: $("input:enabled") ;
说明: 匹配所有不可用元素.与上面的那个是相对应的.

:checked
用法: $("input:checked") ;
说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option).这话说起来有些绕口.

:selected
用法: $("select option:selected") ;
说明: 匹配所有选中的option元素.

作为一个总结,可参考:[原]jQuery Cheat Sheet 。

转载于:https://www.cnblogs.com/moyiqun/archive/2013/06/06/3121384.html

[转] jQuery 选择器相关推荐

  1. 【jquery】jquery选择器

    知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...

  2. JQuery——选择器分类

    JQuery选择器 1    什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2   JQuery选择器分类 2.1   基本选择器 CSS选择器 层级选择器 表单域选择器 ...

  3. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  4. jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)

    第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

  5. jQuery选择器回顾,IE8还需要你发光发热

    2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...

  6. [翻译]帮助文档-jQuery 选择器

    jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...

  7. Jquery 选择器大全 【转载】

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  8. JQuery 选择器。

    •                 #id •                 element •                 .class •                 .class.cl ...

  9. 使用HTML5的自定义数据属性的jQuery选择器

    本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...

  10. 认识jQuery及jQuery选择器

    记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...

最新文章

  1. 金陵科技学院c语言测试,金陵科技学院C语言实验册.doc
  2. LeetCode(590)——N叉树的后序遍历(JavaScript)
  3. ~~分解质因数法求组合数
  4. NSURLConnection和Runloop
  5. gulp——用自动化构建工具增强你的工作流程
  6. 使用jdk1.8 新特性stream实现多级分类
  7. 计算机在思政专业的应用与探索,课程思政在计算机类课程中的探索与实践
  8. python的if语句后面怎么加布尔运算符号是_10、python---- if布尔条件控制语法(二)...
  9. 计算机网络 上 物理层和数据链路层
  10. chrome浏览器糟糕WEBGL遇到了问题,如何解决
  11. 青少年怎么学计算机,青少年编程的正确学习路线
  12. 群晖docker容器内配置ubuntu远程桌面访问
  13. 当你发呆时,大脑在做什么?
  14. 关于爱国者***的追踪报道[转]
  15. BackTrack5完全配置
  16. Win10家庭版实现远程桌面 RDPWraper -解决not supported ,not listening问题
  17. Effective Java(第3版) 90条经验法则
  18. 我的世界服务器头像文件,端游我的世界怎么换头像,端游我的世界怎么换头像框...
  19. 微信服务号与订阅号的主要区别是什么?
  20. 博弈的扩展式纳什均衡贝叶斯均衡是什么纳什均衡说明什么纳什均衡(Nash Equilibrium)

热门文章

  1. 特设三场!!快来看看 NVIDIA DLI 深度学习入门课程有没来到你的城市~
  2. 使用QP方法解基于五次多项式形式的cost function minimization问题
  3. MSPA安装与生态源地提取
  4. java 搭建个人博客_Spring boot 搭建个人博客系统(一)——整体思路
  5. 开发vue用什么ide_VUE项目开发前期需要准备和配置些什么环境?
  6. c++ getline 读不到东西_C++,使用getline一直读取不到文件中的内容
  7. win10隐藏linux,Win10如何隐藏Windows Defender任务栏图标
  8. cmd控制远程电脑运行程序_电脑远程控制怎么,远程桌面开启教程
  9. 详解ROS中的TF使用
  10. Can't load AMD 64-bit .dll on a IA 32-bit platform