JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()

科技小能手發表於2017-11-12
jQueryCSS

   樣式操作.css()和元素資料的儲存.data()

1   .css()方法用於獲取元素樣式屬性的計算值或者設定元素的css屬性

2   .css()獲取元素樣式屬性的計算值的2種方法

   .css(propertyName)獲取匹配元素集合中的第一個元素的樣式屬性的計算值

   .css(propertyNames)傳遞一組陣列，返回一個物件結果

3    .css()設定元素的css屬性的3種方法

    .css(propertyName，value)設定css

    .css(propertyName，function）可以傳入一個回撥函式，返回取到對應的值進行處理

    .css(properties）可以傳一個物件，同時設定多個樣式

4      瀏覽器屬性獲取方式不同，在獲取某些值的時候都JQuery採用統一的處理，比如顏色採用RBG，尺寸採用px

5   .css()方法支援駝峰寫法與大小混搭的寫法，內部做了容錯的處理

6   當一個數只被作為值（value）的時候，會將其轉換為一個字串，並添在字串的結尾處新增px，如.css(“width”,50})與.css(“width”,”50px”})一樣

7   .css()與.assClass()的區別

7.1   可維護性

   .assClass()的本質是通過定義個class類的樣式規則，給元素新增一個或多個類

   .css()是通過JavaScript大量程式碼進行改變元素的樣式

7.2   靈活性

      通過.assClass()可以批量的給相同的元素設定統一的規則，變動起來比較方便，

可以統一修改刪除

   .css()需要指定每一個元素一一的修改，日後維護也就要一一的修改，比較麻煩

   .css()可以很容易動態的去改變一個樣式的屬性，不需要再去繁瑣的定義個class類的規則

7.3   樣式值

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

   .css()可以獲取到指定的樣式值

7.4   樣式的優先順序

   css的樣式是有優先順序的，當外部樣式、內部樣式和內聯樣式同一樣式規則同時應用於同一個元素的時候，優先順序如：內聯樣式>內部樣式>外部樣式

    .assClass()是通過增加class名的方式，樣式在外部檔案或者內部樣式中先定義好的，需要的時候再附加到元素上

   通過.css()處理的是內聯樣式，直接通過元素的style屬性附加到元素上的

   通過.css()設定的樣式屬性優先順序要高於.addClass

8   一般靜態的結構都確定了佈局的規則，可以用.addClass()方法增加統一的類規則，動態的HTML結構在不確定規則或者經常變化的情況下一般考慮用.css()

9   在HTML5中data屬性進行資料預設或儲存，在不支援HTML5的瀏覽器中用.data()方法

10   如:用data屬性

   JQuery.data(element,key,value)//靜態介面，存資料

   JQuery.data(element,key,)//靜態介面，取資料

   .data(key,value)//例項介面，存資料

   .data(key)//例項介面，存資料

   2個方法在使用上存取都是同一個介面，傳遞元素，鍵值資料

   用.data()方法

   JQuery.removeData(element[,name])

   .removeData([name])

   2個對應的刪除介面，使用上與data一致，一個是增加一個是刪除

11   例子

<body>

    <h2>jQuery.data()靜態方法</h2>

    <div class=”left”>

        <div class=”aaron”>

            <p>點選看結果</p>

            <p>jQuery.data</p>

        </div>

        <div><span></span></div>

    </div>

    <h2>.data()例項方法</h2>

    <div class=”right”>

        <div class=”aaron”>

            <p>點選看結果</p>

            <p>.data</p>

        </div>

        <div><span></span></div>

    </div>

    <script type=”text/javascript”>

    $(`.left`).click(function() {

        var ele = $(this);

        //通過$.data方式設定資料

        $.data(ele, “a”, “data test”)

        $.data(ele, “b”, {

            name : “慕課網”

        })

        //通過$.data方式取出資料

        var reset = $.data(ele, “a”) + “</br>” + $.data(ele, “b”).name

        ele.find(`span`).append(reset)

    })

    </script>

    <script type=”text/javascript”>

    $(`.right`).click(function() {

        var ele = $(this);

        //通過.data方式設定資料

        ele.data(“a”, “data test”)

        ele.data(“b”, {

            name: “慕課網”

        })

        //通過.data方式取出資料

        var reset = ele.data(“a”) + “</br>” + ele.data(“b”).name

        ele.find(`span`).append(reset)

    })

    </script>

</body>


本文轉自 拉考的考拉 51CTO部落格，原文連結:http://blog.51cto.com/lakaodekaola/1982846



相關文章