`

jQuery学习笔记

阅读更多
        国庆无聊,宅在家里重温了一下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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics