jQ中css()和addClass的区别之优先级
笔者在实现点击表格中某行添加高亮的效果时,发现一个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的区别之优先级的更多相关文章
- JQ中mouseover和mouseenter的区别
我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...
- JQ中get()与eq()的区别
.eq() : 减少匹配元素的集合,根据index索引值,精确指定索引对象. .get() : 通过检索匹配jQuery对象得到对应的DOM元素. 同样是返回元素,那么eq与get有什么区别呢? eq ...
- jq中get()和eq()的区别
一直弄混淆的获取元素的方法,现整理一下: :eq(index) 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 如:$(& ...
- 简述jq中attr()和prop()的区别
attr,prop都是属性的意思,那他们有什么区别呢?我们先来看一下jquery的部分源码: attr部分: attr: function( elem, name, value, pass ) { v ...
- jq中prop和attr的区别以及各自的使用
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- jq中.prop()与attr()的区别
一,定义 prop() 方法设置或返回被选元素的属性和值.prop() 方法应该用于检索属性值 attr() 方法设置或返回被选元素的属性和值.如需检索 HTML 属性,请使用 attr() 方法代 ...
- jQ中prop与attr的区别
1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选 ...
- JQ中find()与filter()的区别
刚开始学的时候,对于find()和filter()有点理不清楚,下面通过案例相信就可以很快的区分清楚 以下是代码 find弹出的是 filter()弹出的是 下面我们添加div的class是rain ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
随机推荐
- Leetcode 566. Reshape the Matrix 矩阵变形(数组,模拟,矩阵操作)
Leetcode 566. Reshape the Matrix 矩阵变形(数组,模拟,矩阵操作) 题目描述 在MATLAB中,reshape是一个非常有用的函数,它可以将矩阵变为另一种形状且保持数据 ...
- socket套接字基本概念
int socket()函数创建的是套接字socket,返回的是socket描述符(套接字描述符),其实就是文件描述符,socket(套接字)其实就是文件 socket()创建了套接字(文件),只是开 ...
- 有趣的数 zoj 月赛
题目描述 让我们来考虑1到N的正整数集合.让我们把集合中的元素按照字典序排列,例如当N=11时,其顺序应该为:1,10,11,2,3,4,5,6,7,8,9. 定义K在N个数中的位置为Q(N,K),例 ...
- php 中 ?? 和 empty 的 区别
left??right 操作符...当 left 为空时 返回 right ..注意 和 empty 相比 ,空字符,0,'0' 都会返回它本身,而不是 右边的..也就是 当且仅当 没有设置变量或者 ...
- Github常见命令整理
常见命令: 将文件增加到index/stage暂存区: git add filename 将暂存的文件更新到本地库中:git commit -m "备注内容" 将本地库更新到远程库 ...
- NowCoder数列(矩阵快速幂变式)
时间限制 3000 ms 内存限制 32768 KB 代码长度限制 100 KB 题目描述 NowCoder最近在研究一个数列: * F(0) = 7 * F(1) = 11 * F(n) = F(n ...
- 2015苏州大学ACM-ICPC集训队选拔赛(2) 1001 1003 1010
草爷要的榜 Problem Description 苏州大学代表队又勤奋地开始了训练.今天开了一场时长5小时的组队训练赛,苏州大学的n(1<=n<=100)支校队奋力拼(hua)搏(shu ...
- Spring boot的热部署
当把配置文件,比如yml也打到jar包后,如何修改配置,而又不用重新发布呢? 在jar包同一目录下,放置Application.yml (注意,不管jar包内是否此文件名)修改配置文件后,重新启动ja ...
- 企业生产环境不同业务linux系统分区方案
转自:http://edu.51cto.com/lession/id-11842.html
- my.资料收集_20170912
1.终于摸索出平民单开赚钱方法了!![梦幻西游手游吧]_百度贴吧.html http://tieba.baidu.com/p/5323468885?see_lz=1 1.http://tieba.ba ...