jQ中css()和addClass的区别之优先级

标签：背景   end   size   计算   function   pre   好的   效果   dcl   

　　笔者在实现点击表格中某行添加高亮的效果时，发现一个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的区别之优先级

标签：背景   end   size   计算   function   pre   好的   效果   dcl   

原文地址：http://www.cnblogs.com/Gesangs/p/6789360.html