学习jQuery的第五篇日记-有趣的事

学习jQuery的第五篇日记

2011-01-10 阅读 39

今天我还接着与大家分享我的第五篇jQuery日记。在本章中我们重点来说自定义选择符和基于表单的选择符。

除了各种css选择符之外，jquer还有完全不同的自定义选择符。自定义选择符的语法与css中的伪类选择符语法相同，即选择符以一个冒号（：）开始。例如：我们想要从匹配的带有horizontal类的div的集合中选择第2项，代码如下：$('div.horizontal:eq(1)')。

注意：javascript数组采用从0开始的编码方式，所以eq（1）取的是集合中的第2个元素，而css是从1开始的。

例子：每隔一行为表格添加样式。

html代码如下：

<pre class="brush:xml;">    ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞每隔一行为表格添加样式＜/title＞
＜script type="text/javascript" src="../js/jquery-1.4.2.min.js"＞＜/script＞
＜/head＞
＜body＞
＜table＞
	＜tr＞
    	＜td＞As You Like It＜/td＞
        ＜td＞Comedy＜/td＞
        ＜td＞＜/td＞    
    ＜/tr＞
    ＜tr＞
    	＜td＞As You Like It＜/td＞
        ＜td＞Comedy＜/td＞
        ＜td＞1061＜/td＞
    ＜/tr＞
    ＜tr＞
    	＜td＞As You Like It＜/td＞
        ＜td＞Comedy＜/td＞
        ＜td＞1061＜/td＞
    ＜/tr＞
    ＜tr＞
    	＜td＞As You Like It＜/td＞
        ＜td＞Comedy＜/td＞
        ＜td＞1061＜/td＞
    ＜/tr＞
    ＜tr＞
    	＜td＞As You Like It＜/td＞
        ＜td＞Comedy＜/td＞
        ＜td＞1061＜/td＞
    ＜/tr＞
＜/table＞
＜/body＞
＜/html＞

```
<p>
	css代码：</p>
<pre class="brush:css;">    ＜style＞
	tr{ background:#fff;}
	.alt{ background:#ccc;}
＜/style＞
```
<p>
	jquery代码：</p>
<pre class="brush:jscript;">    ＜script type="text/javascript"＞
$(document).ready(function(){
	$('tr:odd').addClass('alt');						   
});
＜/script＞
```
<p>
	没有添加样式前的样子（如图示）：</p>
<p>
	<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294755261.png" style="width: 220px; height: 123px; "></p>
<p>
	添加后的样子（如图示）：</p>
<p>
	<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294755309.png" style="width: 219px; height: 119px; "></p>
<p>
	不过需要注意，如果页面上存在多个表格，我们可能会看到意想不到的效果。</p>
<p>
	在上述例子中表格的最后一行拥有白色背景，所以下一个表格的另一行就会拥有浅灰色背景，解决这个问题的办法是，使用:nth-child()选择符，这个选择符可以接受一个数值，odd或even作为参数。</p>
<p>
	:nth-child()选择符是jquery中唯一从1开始计数的选择符。</p>
<p>
	下面的jquery代码可以确保同一个文档中的多个表格的效果一致。代码如下：</p>
<pre class="brush:jscript;">    ＜script type="text/javascript"＞
$(document).ready(function(){
	$('tr:nth-child(event)').addClass('alt'); 
 });
＜/script＞
```
<p>
	显示效果同上。</p>
<p>
	最后一个自定义选择符，假设出于某种原因，我们希望突出显示某个文本的元素。这时候就可以用到contains选择符。</p>
<p>
	jquery代码如下：</p>
<pre class="brush:jscript;">    ＜script type="text/javascript"＞
$(document).ready(function(){	
	$('td:contains(这里包含想要突出显示的文本内容)').addClass('这里填写样式')
 });
＜/script＞
```
<p>
	基于表单的选择符，由于篇幅太大，在这里我就不详细介绍了，后面用到的地方在一一介绍吧。有兴趣的朋友可以提前看看手册之类的资料。</p>
<p>
	当然不使用jquery或其他客户端编程语言也可以实现这种条纹和突出的显示效果，但jquery+css，在内容有程序动态生成，而我们又无权改动HTML和服务器端代码的情况下，相信jquery+css这种办法是目前最好的选择了。</p>