jQuery中的属性选择器

  本篇文章只是《jQuery in Action》中属性选择器章节的翻译，翻译的主要原因是本人最近买了一本《jQuery实战(第三版)》，打算系统的过一遍知识点。结果那个翻译的实在不敢恭维（我怀疑好多地方是软件直接翻的），挺多地方还翻译错了。我说你出一本书至少也负点责任，别人可是花钱买的呀！喂！到头来还得自己去看原版。下面附上自己的翻译，不敢说会有多好，但保证句子通顺，知识点正确（主要是这章卖书的那个人翻的实在太烂了）。

  属性选择器十分强大，它允许你基于各个元素的属性来选择元素 。由于元素选择器总会有方括号包裹，你能够十分轻易的区分它们（例如，[selector]）。

  现在就来看一下实际代码，让我们在来看一眼实验页面中的其中一部分：

  <ul>
      <li>
        <a href="http://jquery.com">jQuery supports</a>
        <ul>
            <li><a href="css1">CSS1</a></li>
            <li><a href="css2">CSS2</a></li>
            <li><a href="css3">CSS3</a></li>
            <li>Basic XPath</li>
        </ul>
      </li>
  </ul>

  使用http://作为href属性值的开头能够让链接指向一个外部的地址。实际上，一个外部链接地址可能也会使用其他协议作为前缀。例如：https://，ftp://和一些其他的协议。此外，一个指向同一网站中某个页面的链接可能仍然使用http://打头。但是出于简化例子的目的，我们仅仅考虑http://作为外部链接的情况并假设所有的内部链接都使用相对路径。

  在CSS中，你能够使用如下的选择器来命中那些href属性以http://打头的链接:

  a[href^='http://']

  若使用jQuery，我们可以使用如下的语句达到相同的目的：

  var $externalLinks = $("a[href^='http://']");

  这条语句会匹配所有href属性以http://打头的链接元素。脱字符(^)用于指定待匹配值（如：'http://）必须出现在属性值的开头。由于正则表达式也使用了相同的字符来标识某些字符必须出现在待匹配字符的开头，所以这应该非常容易记忆。

  再次访问实验页面，在输入框中键入a[href^='http://']接着点击Apply。能够发现只有jQuery的链接被高亮了。

 单引号和双引号

 当你使用属性选择器的时候务必注意单引号和双引号。错误的使用它们会导致无效的语句。如果你的代码风格习惯为字符串使用双引号并且你又想要使用相同的引号来把属性值引起来，你必须进行转义。如果你觉得不包含转义字符会使你的代码更加易读，你可以混用两种引号。下面的语句和选择器a[href^='http://']等价：

  $("a[href^=\"http://\"]");

  $('a[href^=\'http://\']');

  $("a[href^='http://']");

  $('a[href^="http://"]');

  

  现在假设你想要选中除了指向jQuery官网以外的其他所有链接。那么你可以这么写:

  $("a[href!='http://jquery.com']")

  这条使用了"不等于属性"选择器确实能够返回期望的结果。但碍于这个选择器不是CSS规范的一部分，这种情况jQuery不能利用原生的querySelectAll()方法，这会导致其执行效率要低一些。

  这些符号不能和其他符号组合使用来创造出一些更加强大的选择器。例如，如果你想要选择所有除了外部超链接（假设外部超链接都以http://打头）以外的链接，你不能这么写:

   $("a[href!^='http://jquery.com']")

  此时，你可能认为通过属性来选择元素必须搭配元素选择器。但并非如此。你能够使用你喜欢的任意选择器哪怕不包含任意其他选择器，例如选择器：[href^='http://']。这种情况下，使用通配选择符(*)是一种隐含假定。

  属性选择器还有一些其他用法。例如，选择一个含有特定属性的form元素（不关心属性值），你可以使用：

  form[method]

  这条语句会匹配任意包含了method属性的<form>标签。如果需要匹配一些特定的属性值，你需要使用下面这种形式的写法:

  input[type='text']

  这个选择器会匹配所有含有属性type的值为text的input元素。

  你已经在实战中领略了“在开头进行匹配”的选择器。这里是另外一个例子：

  div[title^='my']

  这个选择器会选择所有title属性以my开头的div元素。

  那么“属性值以某个特定值结尾”的选择器如何书写呢？来看下面的例子：

  a[href$='.pdf']

  这是一个非常有用的选择，它将会命中所有指向pdf文件的链接.

  还有被称为“属性包含”的选择器用于命中那些属性值中任意位置出现给定字符的元素：

  a[href*='jquery.com']

  如你所愿，这个选择器将会匹配所有提及jQuery网址的的链接。

  还有“前缀包含”选择器。它会选中那些属性值等于给定字符串或者以给定字符串后面紧接着一个连接符("-")打头的元素。如果你书写了：

  div[class|='main']

  这个选择器将会查找所有class属性值等于main或者class属性值以main-打头的div，例如<div class="main-footer">。

  我们将要讨论的最后一个选择器和前一个相似，只是它被用于搜索属性值中是否含有某个特定的单词。假设你正在使用HTML 5的data-*

属性，例如，你页面中的某些<span>标签使用自定义属性data-technologies来标识某些特定值。你想要搜索其中一个含有“javascript”属性值

的span标签。你能够使用如下代码来实现这个选择器：

  span[data-technologies~="javascript"]

  这个选择器能够选择诸如<span data-technologies="javascript">或者<span data-technologies="jquery javascript qunit">的标签，你可以

认为它是一个针对某个通用属性的的类选择器。

  假如你需要选择匹配多个条件的节点，上面所介绍的选择器能够使用链式的方式进行调用。如果你喜欢，你能够在调用链上增加尽可能多

的选择器；这没有一个固定的限制。例如，你可以这么写：

  input[type="text"][required]

  这个选择器会查找所有具有required属性并且type等于text的input元素。

  表2.3总结了所有你可以在jQuery中使用的能够处理属性的CSS选择器。（表就不翻了）

  

    《jQuery in action》是本好书，但是《jQuery实战（第三版）》作为它的中文翻译版实在让人有点无语，译者要赚钱也不能这样吧，建议大家读原版吧。以后有机会我会翻译一些其中比较重要难懂的章节。那个选择器实验页面可以在https://github.com/AurelioDeRosa/jquery-in-action下载，解压后在chapter-2/lab.selectors.html