溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
樣式操作.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>
<h3>jQuery.data()靜態方法</h3>
<div class="left">
<div class="aaron">
<p>點擊看結果</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h3>.data()實例方法</h3>
<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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
