jQuery学习笔记

国庆无聊，宅在家里重温了一下jQuery，以前自学过，但在工作中一次都没用上。本身就对jQuery情有独钟，始终难以割舍，遂又感受了一小下。下面是自己发现出来的小问题，积累起来以后说不定用得上。
[size=x-large][b]1.做隔行变色时发现的，[/b][/size]正常代码：

        $("#tab1  tr:odd").css("background","red");
	       $("#tab1  tr:even").css("background","blue");

 <table id = "tab1" >
  	<tr>
  		<td>111</td>
  		<td>222</td>
  		<td>333</td>
  	</tr>
  	<tr>
  		<td>121</td>
  		<td>222</td>
  		<td>333</td>
  	</tr>
  	<tr>
  		<td>121</td>
  		<td>222</td>
  		<td>333</td>
  	</tr>
  	<tr>
  		<td>111</td>
  		<td>222</td>
  		<td>333</td>
  	</tr>
  	<tr>
  		<td>111</td>
  		<td>222</td>
  		<td>333</td>
  	</tr>
  	<tr>
  		<td>111</td>
  		<td>222</td>
  		<td>333</td>
  	</tr>
  </table>

上面用到的是层次选择器，隔行变色效果完成以后，手贱，又在中间加了个“>”,这时问题就来了,问题代码：

        $("#tab1 > tr:odd").css("background","red");
	       $("#tab1 > tr:even").css("background","blue");

刷新了半天，就是不变色了。折腾了半天，思考了半天没想出来；只好用把html()输出一下看看到底是因为啥？没想到是这样的，如图：

[align=center][img]http://dl.iteye.com/upload/attachment/564010/0eb4ac4d-0991-3cdc-8721-d1677bae887f.bmp[/img][/align]
上图显示的是table中所有的元素，发现平白无故的给加上了一个“tbody”元素，这就是原因所在。jQuery中“>”找的直接子元素，而多了这么一个“tbody”元素，“tr”就成了孙子元素了，因此隔行不变色了！