国庆无聊,宅在家里重温了一下jQuery,以前自学过,但在工作中一次都没用上。本身就对jQuery情有独钟,始终难以割舍,遂又感受了一小下。下面是自己发现出来的小问题,积累起来以后说不定用得上。
1.做隔行变色时发现的,正常代码:
$("#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()输出一下看看到底是因为啥?没想到是这样的,如图:
上图显示的是table中所有的元素,发现平白无故的给加上了一个“tbody”元素,这就是原因所在。jQuery中“>”找的直接子元素,而多了这么一个“tbody”元素,“tr”就成了孙子元素了,因此隔行不变色了!
- 大小: 3.4 KB
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
锋利的JQuery学习笔记
javascript jquery 学习笔记 资料
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
]_封捷_jQuery学习笔记
锋利的JQuery学习笔记,总结超经典!
javascript-jquery学习笔记.docx
jquery学习笔记附带例子,希望对新手有帮助
jquery 学习笔记源码 3jquery常规选择器