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就是从子元素回到自己的时候也 ...
随机推荐
- 《图解HTTP》阅读笔记--第二章 简单的HTTP协议--第三章 HTTP报文信息
第二章.简单的HTTP协议HTTP协议:HTTP协议用于客户端(请求资源的一端)和服务器端(响应回复提供资源的一端)的通信,是一种无状态协议HTTP1.1默认TCP持久连接,管线化发送(并行发送多个 ...
- 获取WPF窗体/控件的句柄/当前进程的句柄
1.在WPF中,获取当前窗体的句柄与WINFORM中不一样: WINFORM直接获取:this.Handle----------this是窗体的类名,handle就是句柄. 2.WPF中先引用命名空间 ...
- Java基础笔记(十九)——抽象类abstract
抽象类作为父类,不能实例化自己类型的对象,但可以通过向上转型实例化子类对象. public abstract class Animal{ } 比如eat(); ,每个动物子类都应有自己的方法,那An ...
- eclipse项目中的java文件导入后变为空心J问题
1,选择工程名字右键——>属性——>JavaBuild Path会看到右侧Source标签中为空白 2,点击Add Folder...选择如图所示的src包和相关的配置文件包,点击确定: ...
- 【Cracking the Code Interview(5th edition)】二、链表(C++)
链表结点类型定义: class Node { public: ; Node *next = nullptr; Node(int d) { data = d; } }; 快行指针(runner)技巧: ...
- java 中 静态泛型方法书写
public class SpringBean { /** * */ public static <T> T getBean(Class<T> clazz,String nam ...
- spring boot 加载配置 文件
在springboot启动的过程中,默契情况下会在classpath路径下加载application.properties当做系统配置文件,但有时候我们想要替换成另一个文件,可以 通过以下方式: ...
- strcpy/strlen/strcat/strcmp的实现
一.字符串拷贝strcpy 函数strcpy的原型是char* strcpy(char* des , const char* src),des 和 src 所指内存区域不可以重叠且 des 必须有足够 ...
- Web 2.0 浏览器端可靠性测试第2部分(如何发现和分析 Web 2.0 浏览器端的内存泄漏)
介绍浏览器端的可靠性测试 在上一编文章中我们介绍了浏览器端可靠性测试的概念.测试方法.以及常用的测试和分析工具.我们知道,浏览器端可靠性测试,就是以浏览器为测试平台,通过模拟用户在真实场景下的页面操作 ...
- plSql添加快捷键设置
汉化版:工具-首选项-用户界面-编辑器-自动替换-定义文件 英文版:Tools->Perferences->Editor中Autoreplaces选择配置的shortcuts 常用快捷键设 ...