国庆无聊,宅在家里重温了一下jQuery,以前自学过,但在工作中一次都没用上。本身就对jQuery情有独钟,始终难以割舍,遂又感受了一小下。下面是自己发现出来的小问题,积累起来以后说不定用得上。
[size=x-large][b]1.做隔行变色时发现的,[/b][/size]正常代码:
上面用到的是层次选择器,隔行变色效果完成以后,手贱,又在中间加了个“>”,这时问题就来了,问题代码:
刷新了半天,就是不变色了。折腾了半天,思考了半天没想出来;只好用把html()输出一下看看到底是因为啥?没想到是这样的,如图:
[align=center][img]http://dl.iteye.com/upload/attachment/564010/0eb4ac4d-0991-3cdc-8721-d1677bae887f.bmp[/img][/align]
上图显示的是table中所有的元素,发现平白无故的给加上了一个“tbody”元素,这就是原因所在。jQuery中“>”找的直接子元素,而多了这么一个“tbody”元素,“tr”就成了孙子元素了,因此隔行不变色了!
[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”就成了孙子元素了,因此隔行不变色了!