• 选择元素
    JQuery最基本的概念是“选择一些元素并让它们做些什么”。JQuery支持大部分的CSS3的选择器,以及一些非标准的选择器。
  • 通过ID选择元素
$( "#myId" );
  • 通过Class选择元素
$( ".myClass" );
  • 通过Attribute选择元素
$( "input[name='first_name']" );
  • 通过复合CSS选择器选择元素
$( "#contents ul.people li" );
  • 伪选择器
$( "a.external:first" );
$( "tr:odd" );
 
// 选择#myForm中的所有input元素
$( "#myForm :input" );
$( "div:visible" );
 
// 除了前三的div
$( "div:gt(2)" );
 
// 所有当前为animated的div。
$( "div:animated" );
    当使用:visible和:hidden这两个伪选择器时,JQuery测试的是真实元素的可见性,不是CSS样式中的visibility和display这两个属性,通过JQuery可以看到的是物理页面上的高度和宽度均大于零的元素。
    然而,这样的测试不会在<tr>元素中进行。在<tr>元素的情况下,JQuery会检查CSS样式中的display属性,如果它的display属性设置为none的话,将被认为是隐藏的元素。
    没有被添加到DOM的元素将会总被认为是隐藏的,即使它的CSS样式是设置的可见。
  • 选择器的选择
    选择一个合适的选择器可以提高JavaScript的性能。有一点特殊的是,当通过class选择元素时包含元素的类型是很有帮助的。另一方面,太多的特殊性,也可能是一件坏事。一个选择器”#myTable th.special“如果是可以完成工作的,那么”#myTable thead tr th.special“则是使用过度的。
    JQuery提供了许多基于属性的选择器,允许选择器基于任意属性的内容并且可以使用简化的正则表达式。
// 寻找所有的rel属性以"thinger"结尾的<a>元素
$( "a[rel$='thinger']" );
    虽然这样可以用在紧要关头,但是它们也会在旧浏览器内缓慢的运行。只要有可能,请通过ID、Class和标签名使用选择器。
  • 判断选择器是否包含任何元素
    一旦你使用了选择器,你会想要知道它是否正常工作,常见的错误是:
// 这无法运行
if ( $( "div.foo" ) ) {
...
}
    这是无法工作的。当一个选择器是引用$()的时候,一个对象总是被返回,并且被当做为true,即使选择器不包含任何元素,if中的代码仍然会继续运行。
    最好的确定是否有任意元素的方法是测试选择器。.length属性,可以告诉我们有多少元素是被选择的,如果答案是0,.length属性将被作为false执行。
// 测试选择器是否包含了元素
if ( $( "div.foo" ).length ) {
...
}
  • 保存选择器
    JQuery不会缓存你的元素,如果你需要一个选择器,那么你需要再次生成一个选择器,这时你应该保存选择器在一个变量里,而不是重复生成选择器。
var $divs = $( "div" );
    在上面的例子中,变量名以$符号开头,与其他语言不同的是,$符号开头在JavaScript中没什么特别之处,它仅仅是另一种个性,它用来表示该变量包含一个JQuery对象,这种做法仅仅是惯例,不是强制性的。
    一旦选择器存储在变量中,你可以调用JQuery方法在这个变量上,就和在原生的选择器上调用一样。
    一个选择器仅仅可以获得在页面上生成该选择器的时候所有的元素。当元素被添加到页面之后,你将要重复生成这个选择器,或者添加它们到选择器变量中。存储的选择器变量不会自动更新DOM的变化。
  • 精炼和过滤选择器
    有的时候,选择器包含了超过你想要的东西,JQuery提供了几个方法来精炼和过滤选择器。
// 精炼选择器
$( "div.foo" ).has( "p" ); // div.foo元素包含的<p>标签
$( "h1" ).not( ".bar" ); // 没有class为bar的h1元素
$( "ul li" ).filter( ".current" ); // class为current的unordered list子项
$( "ul li" ).first(); // 第一个unordered list的子项
$( "ul li" ).eq( 5 ); // 第六个子项
  • 选择表单元素
    JQuery提供了几个伪选择器来帮助寻找表单中的元素。这些都是特别有用的,因为它可以根据元素的状态或者使用标准CSS选择器的类型来区分表单中的元素。
    • :button

使用:button伪选择器指向任意<button>元素和type="button"的元素。

$( "form :button" );
    • :checkbox

使用:checkbox伪选择器指向任意type="checkbox"的<input>元素。

$( "form :checkbox" );
    • :checked

不要与:checkbox混淆,:checked仅仅指向checked的复选框和单选框。当使用了复选框和单选框时,:checked伪选择器才会工作。

$( "form :checked" );
    • :disabled

使用:disabled伪选择器指向任意带有disabled属性的元素。

$( "form :disabled" );
    • :enabled

与:disabled伪选择器相反,:enabled伪选择器指向任意不带有disabled属性的元素。

$( "form :enabled" );
    • :file

使用:file伪选择器指向任意type="file"的<input>元素。想要在浏览器中获得更好的性能,使用[type="file"]取代:file伪选择器。

$( "form :file" );
    • :image

使用:image伪选择器指向任意type="image"的<input>元素。想要在浏览器中获得更好的性能,使用[type="image"]取代:image伪选择器。

$( "form :image" );
    • :input

使用:input伪选择器指向任意<input>、<textarea>、<select>和<button>元素。

$( "form :input" );
    • :password

使用:password伪选择器指向任意type="password"的<input>元素 。想要在浏览器中获得更好的性能,使用[type="password"]取代:password伪选择器。

$( "form :password" );
    • :radio

使用:radio伪选择器指向任意type="radio"的<input>元素。想要在浏览器中获得更好的性能,使用[type="radio"]取代:radio伪选择器。

$( "form :radio" );

选择一组相关的radio如下:

$( "form input[name='gender']:radio" );
    • :reset

使用:reset伪选择器指向任意type="reset"的<input>元素 。想要在浏览器中获得更好的性能,使用[type="reset"]取代:reset伪选择器。

$( "form :reset" );
    • :selected

使用:selected伪选择器指向任意<option>中的被选择元素。

$( "form :selected" );
    • :submit

使用:submit伪选择器指向任意<button>元素或者type="button"的<input>元素。想要在浏览器中获得更好的性能,使用[type="submit"]取代:submit伪选择器。

$( "form :submit" );

:submit伪选择器适用于<button>元素和<input>元素,一些浏览器(例如IE)默认情况下不会自动设置<button>元素的type="submit"。

    • :text

使用:text伪选择器指向任意type="text"的<input>元素 。想要在浏览器中获得更好的性能,使用[type="text"]取代:text伪选择器。

$( "form :text" );
    为了获得使用“:xxx”的最佳性能,最好先使用标准JQuery选择器来选择元素,然后使用.filter( ":xxx" )。 或者使用其他优于在标签名称或一些其他的选择器上加伪选择器的可选方式。

JQuery官方学习资料(译):选择元素的更多相关文章

  1. JQuery官方学习资料(译):使用JQuery的.index()方法

        .index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...

  2. JQuery官方学习资料(译):遍历

        一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...

  3. JQuery官方学习资料(译):JQuery对象

        每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...

  4. JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象

        JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each()     $.each()是一个通用的方法用来遍历对象和数组, ...

  5. JQuery官方学习资料(译):操作元素

      获取和设置元素的信息     有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...

  6. JQuery官方学习资料(译):Utility方法

        JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim()     删除前后部的空白内容. // 返回 "lots of ex ...

  7. JQuery官方学习资料(译):CSS

        JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...

  8. JQuery官方学习资料(译):类型

    类型     JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...

  9. JQuery官方学习资料(译):Data方法

        你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...

随机推荐

  1. RabbitMQ 任务分发机制

    在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题.在实际的应用场景中,这是远远不够的.从本篇文章开始,我们将结合更加实际的应用场景来 ...

  2. Self referencing loop detected for property 错误

    EF 序列化返回json时 报错:Self referencing loop detected for property 解决方案:在webapiconfig.cs文件中,增加设置: 1.config ...

  3. [转]深入理解 GRE tunnel

    我以前写过一篇介绍 tunnel 的文章,只是做了大体的介绍.里面多数 tunnel 是很容易理解的,因为它们多是一对一的,换句话说,是直接从一端到另一端.比如 IPv6 over IPv4 的 tu ...

  4. 如何用kaldi做孤立词识别三

    这次wer由15%下降到0%了,后面跑更多的模型 LOG (apply-cmvn[5.2.124~1396-70748]:main():apply-cmvn.cc:162) Applied cepst ...

  5. 解决Jenkins安装的时区问题

    正常情况下,jenkins是Java执行在Java容器,比如tomcat容器之下,只要改了tomcat的时区就行.我这里是为了方便后续的代码可用性测试,用的是Ubuntu中apt在线安装,也只是安装了 ...

  6. Akka-Cluster(6)- Cluster-Sharding:集群分片,分布式交互程序核心方式

    在前面几篇讨论里我们介绍了在集群环境里的一些编程模式.分布式数据结构及具体实现方式.到目前为止,我们已经实现了把程序任务分配给处于很多服务器上的actor,能够最大程度的利用整体系统的硬件资源.这是因 ...

  7. 面试官问我,Redis分布式锁如何续期?懵了。

    前言 上一篇[面试官问我,使用Dubbo有没有遇到一些坑?我笑了.]之后,又有一位粉丝和我说在面试过程中被虐了.鉴于这位粉丝是之前肥朝的粉丝,而且周一又要开启新一轮的面试,为了回馈他长期以来的支持,所 ...

  8. IM开发基础知识补课(五):通俗易懂,正确理解并用好MQ消息队列

    1.引言 消息是互联网信息的一种表现形式,是人利用计算机进行信息传递的有效载体,比如即时通讯网坛友最熟悉的即时通讯消息就是其具体的表现形式之一. 消息从发送者到接收者的典型传递方式有两种: 1)一种我 ...

  9. Visual Studio 开发(二):VS 2017配置FFmpeg开发环境

    在上篇文章Visual Studio 开发(一):安装配置Visual Studio Code 中,我们讲了一下如何配置VS CODE,来编写和调试C的代码.如果你已经使用VS Code回顾和复习好C ...

  10. django数据库连接快速配置

    DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql',#数据库驱动 'NAME': 'login_db',#数据库名字 'US ...