jq animate()可以使用的属性_jQ入门（3）

今天继续分享jQ入门教程，今天分享的内容主要有两个，分别是属性选择符和自定义选择符。

首先介绍属性选择符

属性选择符是CSS选择符中特别有用的一类选择符。顾名思义，属性选择符通过HTML元素 的属性选择元素，例如链接的title属性或图像的alt属性。例如，要选择带有alt属性的所有 图像元素，可以使用以下代码：

$('img[alt]')

为链接添加样式属性选择符使用一种从正则表达式中借鉴来的通配符语法，以^表示值在字符串的开始，以$表示值在字符串的结尾。而且，也是用星号*表示要匹配的值可以出现在字符串中的任意位置，用叹号!表示对值取反。 假设我们想以不同的文本颜色来显示不同类型的链接，那么首先要在样式表中定义如下样式：

a {  
 color: #00c;  
}  
a.mailto {  
 background: url(images/email.png) no-repeat right top;  
 padding-right: 18px;  
}  
a.pdflink {  
 background: url(images/pdf.png) no-repeat right top;  
 padding-right: 18px;  
}  
a.henrylink {  
 background-color: #fff;  
 padding: 2px;  
 border: 1px solid #000;  
}  

然后，可以使用jQ为符合条件的链接添加3个类：mailto、pdflink和henrylink。 要为所有电子邮件链接添加类，需要构造一个选择符，用来寻找所有带href属性（[href]）且以mailto开头（^="mailto:"]）的锚元素（a）。

结果如下：

$(document).ready(function() {  
 $('a[href^="mailto:"]').addClass('mailto');  
});  

因为我们在页面的样式中定义了相应的规则，所以页面中所有mailto:链接的后面都会出现一个信封图标。就像下图一样：

要为所有指向PDF文件的链接添加类，需要使用美元符号（$）而不是脱字符号（^）。这是因为我们要选择所有href属性以.pdf结尾的链接。

$(document).ready(function() { 
 $('a[href^="mailto:"]').addClass('mailto'); 
 $('a[href$=".pdf"]').addClass('pdflink'); 
});

因为有已经定义的样式表规则，新添加的pdflink类也会导致每个PDF文档链接后面出现Adobe Acrobat图标，就像下面这样：

属性选择符也可以组合使用。例如，可以为href属性即以http开头且任意位置包含henry 的所有链接添加一个henrylink类。

接下来介绍自定义选择符

当然除了各种CSS选择符之外，jQuery还添加了独有的完全不同的自定义选择符。这些自定义选择符进一步增强了已经十分强大的CSS选择符，为我们提供了在页面上选择元素的新手段。

提示：只要可能，jQuery就会使用浏览器原生的DOM选择符引擎去查找元素。但在使用自定义选择符的时候，就无法使用速度最快的原生方法了。因此，建议读者在能够使用原生方法的情况下，就不要频繁地使用自定义选择符，以确保性能。

jQ中的多数自定义选择符都可以让我们从已经找到的元素中选出一或多个元素。自定义 选择符通常跟在一个CSS选择符后面，基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以冒号（:）开头。例如，我们想要从带有 horizontal类的<div>集合中选择第2项，那么应该使用下面的代码：

$('div.horizontal:eq(1)')  

注意，因为JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始的，因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div元素。如果记不清哪个从0开始，哪个从1开始，可以参考jQuery API文档： http://api.jquery.com/category/selectors/。

我们可以每隔一行为表格添加样式

jQuery库中的两个十分有用的自定义选择符是:odd和:even。下面，我们就来看一看如何通过这两个选择符为表格添加基本的条纹样式，针对下面的表格：

<h2>Shakespeare's Plays</h2> 
<table> 
 <tr> 
 <td>As You Like It</td> 
 <td>Comedy</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>All's Well that Ends Well</td> 
 <td>Comedy</td> 
 <td>1601</td> 
 </tr> 
 <tr> 
 <td>Hamlet</td> 
 <td>Tragedy</td> 
 <td>1604</td> 
 </tr> 
 <tr> 
 <td>Macbeth</td> 
 <td>Tragedy</td> 
 <td>1606</td> 
 </tr> 
 <tr> 
 <td>Romeo and Juliet</td> 
 <td>Tragedy</td> 
 <td>1595</td>
</tr> 
 <tr> 
 <td>Henry IV, Part I</td> 
 <td>History</td> 
 <td>1596</td> 
 </tr> 
 <tr> 
 <td>Henry V</td> 
 <td>History</td> 
 <td>1599</td> 
 </tr> 
</table> 
<h2>Shakespeare's Sonnets</h2> 
<table> 
 <tr> 
 <td>The Fair Youth</td> 
 <td>1–126</td> 
 </tr> 
 <tr> 
 <td>The Dark Lady</td> 
 <td>127–152</td> 
 </tr> 
 <tr> 
 <td>The Rival Poet</td> 
 <td>78–86</td> 
 </tr> 
</table>

在样式表中添加一点样式，表格的表头和单元格就清晰了许多。现在，这个表格有白色的背景，但行与行之间没有区别。样子如图：

可以在样式表中为所有表格行添加一种样式，然后再为奇数行定义一个alt类。

tr {  
 background-color: #fff;  
}  
.alt {  
 background-color: #ccc;  
}  

最后编写jQuery代码，将这个类添加到表格中的奇数行（标签），代码如下：

$(document).ready(function() {  
 $('tr:even').addClass('alt');  
});  

我们为什么针对奇数行使用:even选择符呢？很简单，:eq()选择符、:odd和:even选择符都使用JavaScript内置从0开始的编号方式，因此，第一行的编号为0（偶数），第二行的编号为1（奇数）， 依此类推。知道这一点之后，我们希望上面的那几行代码能生成下面这样的结果：

不过，要注意的是，如果一个页面上存在另外一个表格，我们则真有可能会看到意料之外的结果。