笔者在实现点击表格中某行添加高亮的效果时,发现一个css()和addClassd()的冲突,具体代码如下:

<style>
.se
{
background:#FF6500;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
$("tbody>tr:odd").css("background-color","#FFF38F");
$("tbody>tr:even").css("background-color","#FFFFEE");
$("tbody>tr").click(function(){
$(this).addClass("se")
.siblings().removeClass("se")
.end()
.find(':radio').attr('checked', true);
})
});
</script>

  单从代码逻辑上来看,是没有错的。点击后字体颜色也确实改变了,只是背景颜色却不会改变。按理说会按顺序来,最后设置的样式会把之前的同类样式覆盖掉。实际却没有。

  这是为什么呢?先从优先级的角度分析。

  我们知道当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下 :
  外部样式 < 内部样式 < 内联样式 (ps:这个优先级在绝大多数情况下来说能正确的实现,但其实需要涉及到权重的计算)

1..addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上;

2.通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的 ;

所以通过.css方法设置的样式属性优先级要高于.addClass方法,点击时所添加的类名无法覆盖css()设置的样式。

jQ中css()和addClass的区别之优先级的更多相关文章

  1. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  2. JQ中get()与eq()的区别

    .eq() : 减少匹配元素的集合,根据index索引值,精确指定索引对象. .get() : 通过检索匹配jQuery对象得到对应的DOM元素. 同样是返回元素,那么eq与get有什么区别呢? eq ...

  3. jq中get()和eq()的区别

    一直弄混淆的获取元素的方法,现整理一下: :eq(index) 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 如:$(& ...

  4. 简述jq中attr()和prop()的区别

    attr,prop都是属性的意思,那他们有什么区别呢?我们先来看一下jquery的部分源码: attr部分: attr: function( elem, name, value, pass ) { v ...

  5. jq中prop和attr的区别以及各自的使用

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  6. jq中.prop()与attr()的区别

    一,定义 prop() 方法设置或返回被选元素的属性和值.prop() 方法应该用于检索属性值 attr()  方法设置或返回被选元素的属性和值.如需检索 HTML 属性,请使用 attr() 方法代 ...

  7. jQ中prop与attr的区别

    1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选 ...

  8. JQ中find()与filter()的区别

    刚开始学的时候,对于find()和filter()有点理不清楚,下面通过案例相信就可以很快的区分清楚 以下是代码 find弹出的是 filter()弹出的是 下面我们添加div的class是rain ...

  9. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

随机推荐

  1. 一些意想不到的小bug。

    一,当if的时候,很容易忘记相对的else,从而出现bug,要将背面消息考虑全面. 二,多个元素在同一行布局的时候,要考虑文字的换行还是省略号代替. 例如:左边一个文字,宽度不固定,右边一个图形,宽度 ...

  2. 树链剖分【洛谷P2590】 [ZJOI2008]树的统计

    P2590 [ZJOI2008]树的统计 题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把 ...

  3. luogu1632 点的移动

    其实只需要开三重循环 根据OI中的一个重要的原理 给定一个序列a,求一个数x使得\(\sum |a_i-x|\)最小,那么这个数是序列a的中位数 证明略 然后既然是中位数,一定是数列中的数,类比到这题 ...

  4. AtCoder Beginner Contest 120 题解

    题目链接:https://atcoder.jp/contests/abc120 A Favorite Sound 分析:答案为. 代码: #include <iostream> using ...

  5. linux模式切换,进程切换

    内核态和用户态的切换: 用户态到内核态的转换:1.进行系统调用,2.异步中断,3.外部硬件中断 检查特权级别的变化:当异常发生在用户态,而异常处理函数则必须运行在内核态,则此时必须调用内核态的堆栈(系 ...

  6. 洛谷 P2141 珠心算测验

    嗯... 先看一下这个题.... 题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的 ...

  7. Solr学习笔记(2) —— Solr管理索引库

    一.维护索引 1.1 添加/更新文档 1.2 批量导入数据(使用dataimport) 第一步:把mysql的数据驱动.以及dataimport插件依赖的jar包添加到solrcore(collect ...

  8. 实时同步inotify+rsync

    目的,要求 nfs储存服务器与backup备份服务器,数据同步,万一nfs储存服务器挂了,数据还在 实时同步备份软件服务 1)inotify 实时同步软件 2)sersync 实时同步软件 实时同步原 ...

  9. spring aop execution用法

    代码结构: 1. "execution(* com.ebc..*.*(..))" 与 "execution(*  com.ebc..*(..))" 2019-0 ...

  10. 21-----BBS论坛

    BBS论坛(二十一) 21.1.编辑轮播图功能完成 (1)cms_banners.html 把属性绑定到<tr>上面,方便找到各属性的值 <tbody> {% for bann ...