2. 程式人生 > >JQuery中.css()與.addClass()設定樣式的區別

JQuery中.css()與.addClass()設定樣式的區別

阿新 • • 發佈：2019-02-19 
對於樣式的設定，我們學了addClass與css方法，那麼兩者之間有什麼區別？

可維護性：

.addClass()的本質是通過定義個class類的樣式規則，給元素新增一個或多個類。css方法是通過JavaScript大量程式碼進行改變元素的樣式

通過.addClass()我們可以批量的給相同的元素設定統一規則，變動起來比較方便，可以統一修改刪除。如果通過.css()方法就需要指定每一個元素是一一的修改，日後維護也要一一的修改，比較麻煩

靈活性：

通過.css()方式可以很容易動態的去改變一個樣式的屬性，不需要在去繁瑣的定義個class類的規則。一般來說在不確定開始佈局規則，通過動態生成的HTML程式碼結構中，都是通過.css()方法處理的

樣式值：

.addClass()本質只是針對class的類的增加刪除，不能獲取到指定樣式的屬性的值，.css()可以獲取到指定的樣式值。

樣式的優先順序：

css的樣式是有優先順序的，當外部樣式、內部樣式和內聯樣式同一樣式規則同時應用於同一個元素的時候，優先順序如下
外部樣式 < 內部樣式 < 內聯樣式
1..addClass()方法是通過增加class名的方式，那麼這個樣式是在外部檔案或者內部樣式中先定義好的，等到需要的時候在附加到元素上
2.通過.css()方法處理的是內聯樣式，直接通過元素的style屬性附加到元素上的
通過.css方法設定的樣式屬性優先順序要高於.addClass方法

總結：
.addClass與.css方法各有利弊，一般是靜態的結構，都確定了佈局的規則，可以用addClass的方法，增加統一的類規則
如果是動態的HTML結構，在不確定規則，或者經常變化的情況下，一般多考慮.css()方式。

具體看應用：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style
 
>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 200px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
    }
    a{
        font-size: 14px;
        display:block;
    }
    .newClass{
        background: #bbffaa;
    }

    .imoocClass{
        background: red;
    }
    .addBorder{
        border: 1px solid red;
    }

    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>.addClss()與.css()方法區別</h2>
    <div class="left">
        <div class="aaron">
            <a>css優先順序高於addClass</a>
            <a>1：第一次addClss背景色</a>
            <a>2：第二次css修改背景色</a>
        </div>
    </div>
    <div class="right">
        <div class="aa bb imooc">
            <article>
                <a>imoocClass</a>
            </article>
        </div>
    </div>


    <script type="text/javascript"> 
        //給所有的div統一增加邊寬
        $('div').addClass("addBorder")
    </script>

    <script type="text/javascript"> 
        //class=left下div元素增加一個新的樣式，增加背景顏色
        $('.aaron').addClass("newClass")
    </script>

    <script type="text/javascript"> 
        //通過css覆蓋addClass方式設定背景色
        $('.aaron').css(
            {
                'background-color':'yellow'
            })
    </script>



</body>

</html>

這裡寫圖片描述

相關推薦

JQuery中.css()與.addClass()設定樣式的區別

對於樣式的設定，我們學了addClass與css方法，那麼兩者之間有什麼區別？ 可維護性： .addClass()的本質是通過定義個class類的樣式規則，給元素新增一個或多個類。css方法是通過JavaScript大量程式碼進行改變元素的樣式 通過

jquery中this與 this 的用法區別

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

jQuery中$.extend()與$.fn.extend()的區別

$.extend方法和$.fn.extend方法都可以用來擴充套件jQuery功能，通過閱讀jQuery原始碼我們可以發現這兩個方法的本質區別，那就是 $.extend方法是在jQuery全域性物件上擴充套件方法，$.fn.extend方法是在$選擇符選擇的jQuery物件

在jquery中 filter()與find()之間的區別

filter ()和find()函式是極其相似的，前者是應用於所有元素，而後者是僅應用於子元素。 簡單的說： filter()—通過所有的元素來搜尋。 find()—僅通過所有的子元素來搜尋。 具體的對比例項： <html> <head>

jquery中this與 this 的用法區別

就會 details this sdn title jquery對象 test dom 方法 jquery中this與$(this)的用法區別.先看以下代碼: $("#textbox").hover( function() { this.title = "Test"; },

jQuery中$(function(){})與(function($){})(jQuery)、$(document).ready(function(){})等的區別詳細講解

lib div 有效 cti title jquer init str lac 1、(function($) {…})(jQuery); 在(function($) {…})(jQuery)在內部定義的函數和變量只能在此範圍內有效。 形成是否

JQuery中Attr與Prop的區別

between input 點擊 inpu rop pro -a 自定義 different 今天做一個用jquery控制input checkbox的選中和不選中賦值，開始attr一直出現莫名其妙的問題，首次能賦值，之後每次點擊完全沒效果。後面改用prop來做，功能正常。

jQuery中$(function(){})與(function($){})(jQuery)、$(document).ready(function(){})等的區別詳細講解 ----轉載

最大 閉包 param 作用 alt dsm tracking 參數 bsp 1、(function($) {…})(jQuery); 1）、原理： 這實際上是匿名函數，如下： function(arg){…} 這就定義了一個匿名函數，參數為arg 而調用函數時，是在

jQuery中position()與offset()區別

元素 page mini alert span 文檔 back www. class jQuery中position()與offset()區別 position()獲取相對於它最近的具有相對位置(position:relative或position:absolute)

jQuery中this與$(this)的區別總結

fun 方法 spa attr .get 就是 click 裏的 box 這裏就談談this與$(this)的區別。 1、jQuery中this與$(this)的區別 $("#textbox").hover( function() {

Jquery中attr()與prop()的區別

.com 數組 之間 也會 就是 選擇 意思 rec radio 在jQuery中，attr()函數和prop()函數都用於設置或獲取指定的屬性，它們的參數和用法也幾乎完全相同。但是，這兩個函數的用處卻並不相同。下面我們來詳細介紹這兩個函數之間的區別。 1、操作對象不同

Jquery中.attr與.prop的區別

time tran checkbox rtx rtt don www ado ID ☆ http://www.jb51.net/article/114876.htm http://www.365mini.com/page/jquery-attr-vs-pro

jquery中的bind()、live()的區別與使用（事件處理）

綁定 HA 我們 doc dso 目標 code span ive 原文:jquery中的bind()、live()的區別與使用（事件處理）使用jquery有一段時間了，剛開始看別人的源代碼的時候對事件的綁定方法有疑惑。比如： var btn=$("#button")

jquery中append與appendTo方法區別

集合 單詞 結果 rom expr 寫法 string exp content 1. append(content)方法 方法作用：向每個匹配的元素內部追加內容。 參數介紹：content (<Content>): 要追加到目標中的內容。 用法示例： HTML代

Jquery中attr與prop的區別詳解

當點選左上方那個checkBox時，要將下面的checkBox全部選中，我們的程式碼是這樣的 $("input[name='checkbox']").attr("checked",true); 然並卵，一點效果都沒有，後來換成這樣，好了 $(function(){ $("#all").c

基於jquery中children()與find()的區別介紹

.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩）。引數可選，新增引數表示通過選擇器進行過濾，對元素進行篩選。 .find(selector)方法是返回匹配元素集合中每個元素的後代。引數是必選的，可以為選擇器、jquery物

css選擇器中a與a:link的區別

css選擇器中a:link是選擇尚未點選的連結，a是選擇連結，在一個連結未點選的時候好像可以同時被這兩個選擇器選擇。 但是a與a:link選擇器是有區別的，a選擇器是選擇所有連結，不管是否有效，a:link選擇器是選擇有效的連結。 例：<a href="#">點

淺談jQuery中find()與filter()兩種方法聯絡與區別

首先，這兩種方法都屬於jQuery遍歷函式方法，下面小編將分開淺談一下這兩種方法 find（）方法 我們通過W3C手冊瞭解到，find（）方法的定義是獲得當前元素集合中每個元素的後代，通過選擇器、j

匯入式樣式表CSS與連結式樣式表CSS的區別

<!-- 連結外部樣式：也就是在與<head>與</head>標記之間加入一個<link>標記。 --> <head> <link href=”style.css” rel=”stylesheet” ty

jQuery中delegate與on的用法與區別

使用 view ava bsp detail 選擇 觸發 運行 智能 在jQuery1.7中 .delegate()已被.on()取代。對於早期版本，它仍然使用事件委托的最有效手段。 在事件綁定和委派，delegate()和on在一般情況下，這兩種方法是等效的。 .del