今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑。

我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果。(主要训练jQuery选择器和addClass)

但是在我真正操作后发现我的奇数行都变色了,而偶数行都没有变。具体效果如下:

原效果:

我们可以看到首行为一种颜色,奇数行无颜色,偶数行设置了背景颜色

鼠标悬浮在第一行的效果:

这里可以观察到“梅西”一行变换了颜色

 鼠标悬浮在第二行的效果:

到了这里就发生了异常,整个表格居然没有发生变化

接下来我将放上我的源代码,大家可以先观察一下是哪里出现了错误。

jQuery相关源码:

<script type="text/javascript">
$(function(){
//全选全不选
$("#thch").click(function(){
var ch = $("#thch").prop("checked");
$("#tabl td input").prop("checked",ch);
}) //表格隔行换色
$("table tr:gt(0):odd").addClass("even") //鼠标悬浮变色
$("table tr:gt(0)").mouseover(function(){
$(this).addClass("mv")
})
$("table tr:gt(0)").mouseleave(function(){
$(this).removeClass("mv")
}) $("table tr:gt(0)").click(function(){
var self = $(this)
var a = $("this input").prop("checked")
})
})
</script>

css相关代码:

#tabl{
width: 600px;
height: 200px;
margin-top: 200px;
text-align: center; } .tr1{
background-color: cornflowerblue;
color: white;
} .mv{
background-color: rosybrown;
} .even{
background-color: antiquewhite;
}

由于我表格给奇数行先添加了一个even的css样式,在处罚鼠标悬浮事件后的添加的mv的css样式并没有生效,所以当时我首先想到的是addClass这个方法是否在添加过一次css样式后,再次添加时只在第一次添加的样式后边寻找,由于我的.even是写在.mv后的,所以没有找到。

为了测试我的上述所想,我便进行了测试,在.mv中添加一个font-size的属性,测试是否生效,测试结果如下:

可以清楚的看到字体变大了,然而颜色依旧没有变。

这就让我感到了更加困惑,问了一些同学也没有得到我想要的答案,由于天色已晚,我也没有什么思路,就暂时放下了这道题。第二天一早我在吃饭时突然想到是否与css的加载顺序有关,便匆忙的赶去验证我的想法。

我将.mv与.even互换了位置,效果如下:

这次终于对了!!!

在改对之后我便仔细去查了一下addClass的原理,它并不是将标签上本来就有的css样式覆盖,而是添加css,所以它也遵循css样式的加载顺序,一开始时.mv在.even的前边,所以要加载后边的样式,然而后边的样式还是.even,所以没有变换,将他们两个互换顺序后就可以看到变换了。

总结:

在使用addClass方法时,并不是将原有的css样式覆盖,而是将标签添加上css样式,添加后的加载与css文件中的顺序有关,也就是后写的覆盖前边的。

关于css样式加载的问题的更多相关文章

  1. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  2. css样式加载顺序

    css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...

  3. css 样式加载次序

    一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权(本人理解为:先加载1的样式,然后用2的样式覆盖1中的样式,3.4同理) 浏览器缺省设置(浏览器默认的样式 ...

  4. Js判断CSS文件加载完毕的实例教程

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...

  5. css文件加载:@import和link的区别

    刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...

  6. CSS远程加载字体

    CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...

  7. webpack教程(四)——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

  8. 样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html

    写登录的时候出现的问题,样式时好时坏,浏览器控制台看到的信息是: Uncaught SyntaxError: Unexpected token <Resource interpreted as ...

  9. webpack教程——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

随机推荐

  1. Win8Metro(C#)数字图像处理--2.31灰度拉伸算法

    原文:Win8Metro(C#)数字图像处理--2.31灰度拉伸算法  [函数名称] 灰度拉伸函数GrayStretchProcess(WriteableBitmap src) [算法说明]    ...

  2. Qt之自定义搜索框——QLineEdit里增加一个Layout,还不影响正常输入文字(好像是一种比较通吃的方法)

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  3. vs2010 编译release没问题debug编译不通过

    ------ 已启动全部重新生成: 项目: VM661JTcpDLL, 配置: Debug Win32 ------生成启动时间为 2018-12-29 14:07:20.项目文件包含 ToolsVe ...

  4. Qt文档系统分析(解释Qt文档的生成工具与过程)

    写在前面 只要打开Qt Assistant或Qt Creator的Help,或是打开在线版的 http://doc.qt.nokia.com ,Qt的漂亮的文档就会呈现在我们眼前.而且 Qt的文档,长 ...

  5. List<T>多字段排序的一个通用类

    本文中的方法旨在解决通用的问题,非常注重效率的地方,还应该针对具体的类去写排序方法. 废话不多说,直接上代码 具体使用场景: 要排序的类 1 public class bb 2 { 3 public ...

  6. wp8.1之拍照(获取焦点,使用后置摄像头)

    wp8.1 没有像wp8一样直接用启动器开启摄像头,他要开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多说 ...

  7. 解释下Func<T, bool> exp

    比如 interface IRepository<T> where T:class { IEnumerable<T> FindAll(Func<T, bool> e ...

  8. Windows下搭建go语言开发环境 以及 开发IDE (附下载链接)

    1.下载 并且 安装 Go安装包   =========================================================== 在CSDN上传了我的版本,供大家下载: = ...

  9. uni-app中vue组件父子值传递

    一.父组件向子组件传递数据(props) <template> <view class="container" style="background: # ...

  10. Spring源码阅读-IoC容器解析

    目录 Spring IoC容器 ApplicationContext设计解析 BeanFactory ListableBeanFactory HierarchicalBeanFactory Messa ...