`

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
分享到:
评论

相关推荐

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,因其简洁易用的API和丰富的插件生态,迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了...

    jquery学习笔记

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于Web开发的JavaScript库,以其简洁的API、强大的功能和广泛的社区支持,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...

    JQuery学习笔记(技术文档)

    ### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    jquery学习笔记-相关代码

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...

    锋利的jQuery学习笔记

    《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...

    jQuery学习笔记精心整理

    ### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**: - **第三方**:jQuery是由第三方组织或个人编写的函数库,并非浏览器内置或开发者自定义的函数,因此使用前需从官方网站([www.jquery.com]...

Global site tag (gtag.js) - Google Analytics