深刻學習jQuery樣式操做

前面的話

　　使用javascript腳本化CSS是一個系列，包括行間樣式、計算樣式、CSS類、樣式表、動態樣式和僞元素這六部分。而jQuery也實現了腳本化CSS的功能，提供了更爲簡單易用的方法

 

設置樣式

　　前面介紹過jQuery的特性操做，能夠經過attr()方法進行樣式設置

<style>
.cB{color: blue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').attr('class','cB')
}
</script>

　　[注意]jQuery對象沒法直接使用className屬性設置類名，須要轉換爲javascript對象纔可使用

<style>
.cB{color: blue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test')[0].className = 'cB';
}
</script>

 

增長樣式

addClass(className)

　　addClass(className)方法爲每一個匹配元素增長一個或多個樣式名，若是值已存在，則不添加　

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').addClass('cB bgO')
}
</script>

addClass(function(index, currentClass))

　　addClass()方法能夠接受一個函數做爲參數，這個函數返回一個或更多用空格隔開的要增長的樣式名。接收index參數表示元素在匹配集合中的索引位置和currentClass參數表示元素上原來的className。在函數中this指向匹配元素集合中的當前元素

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').addClass(function(index,currentClass){
        alert('' + index + currentClass );//'0cB'
        return 'bgO';
    })
}
</script>

刪除樣式

removeClass()

　　removeClass()方法不帶參數時，將刪除所有類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass();
}
</script>

removeClass([className])

　　removeClass([className])方法用來刪除參數中指定的一個或多個類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass('cB bgO');
}
</script>

removeClass(function(index, currentClass))

　　removeClass()方法能夠接收一個函數爲參數，該函數返回一個或多個將要被移除的樣式名。index參數表示在全部匹配元素的集合中當前元素的索引位置，currentClass參數表示原有的樣式名

　　[注意]因爲class是保留字，因此形參名設置爲class時，會致使錯誤

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass(function(index,currentClass){
        alert('' + index + currentClass);//0cB bgO
        return 'bgO';
    });
}
</script>

切換樣式

toggleClass()

　　在作某些效果的時候，可能會針對同一節點的某一個樣式不斷的切換，也就是addClass與removeClass的互斥切換，好比隔行換色效果

　　jQuery提供一個toggleClass()方法用於簡化這種互斥的邏輯，經過toggleClass()方法動態添加刪除Class，一次執行至關於addClass，再次執行至關於removeClass

　　toggleClass()有如下4種用法

【1】toggleClass()

　　當toggleClass()方法沒有參數時，將刪除或還原所有類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').toggleClass();
}
</script>    

【2】toggleClass(className)

　　toggleClass(className)方法在匹配的元素集合中的每一個元素上切換的一個或多個(用空格隔開)樣式類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').toggleClass('bgO');
}
</script>

【3】toggleClass(className,switch)

　　toggleClass()方法能夠接收第二個參數switch，用來判斷樣式類是否應該被添加或刪除。若是這個參數的值是true，那麼這個樣式類將被添加，至關於addClass；若是這個參數的值是false，那麼這個樣式類將被移除，至關於removeClass

$('#foo').toggleClass(className, addOrRemove);
//等價於
if (addOrRemove){
    $('#foo').addClass(className);
}else{
    $('#foo').removeClass(className);
}

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">添加</button>
<button id="btn2">刪除</button>
<script>
btn1.onclick = function(){$('#test').toggleClass('bgO',true);}
btn2.onclick = function(){$('#test').toggleClass('bgO',false);}
</script>

【4】toggleClass(function(index,currentClass,switcher)[,switch])

　　toggleClass()能夠接收一個函數做爲參數，該函數用來返回在匹配的元素集合中的每一個元素上用來切換的樣式類名，接收元素的索引位置和元素舊的樣式類做爲參數　

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">添加</button>
<button id="btn2">刪除</button>
<button id="btn3">變動</button>
<script>
btn1.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
},true)};
btn2.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
},false)};
btn3.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
})};
</script>

判斷樣式

hasClass(className)

　　hasClass(className)方法用於肯定任何一個匹配元素是否有被分配給定的類名，若是有則返回true；不然，返回false

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<button id="btn2">是否存在指定樣式</button>
<script>
btn1.onclick = function(){$('#test').toggleClass('bgO');}
btn2.onclick = function(){alert($('#test').hasClass('bgO'))}
</script>

　　[注意]該方法實際是爲了加強代碼可讀性產生的。在jQuery()內部其實是調用了is()方法來完成這個功能的

　　在javascript中，HTML5爲全部元素添加了classList屬性，這個classList屬性是新集合類型DOMTokenList的實例，它也有相似的方法

add(value)              將給定的字符串值添加到列表中，若是值已存在，則不添加
contains(value)         表示列表中是否存在給定的值，若是存在則返回true,不然返回false
remove(val，e)          從列表中刪除給定的字符串
toggle(value)           若是列表中已經存在給定的值，刪除它；若是列表中沒有給定的值，添加它

　　因爲IE9-瀏覽器不支持classList屬性，也就不支持add()、contains()、remove()和toggle()這四個方法

　　關於classList屬性的相似的4個方法及兼容寫法的詳細信息移步至此

 

樣式操做

　　在javascript中，查詢計算樣式須要處理getComputedStyle()方法和currentStyle屬性的兼容；設置行間樣式須要對style屬性賦值

　　而在jQuery中，使用CSS()方法就能夠解決以上的問題

【獲取樣式】

css(propertyName)

　　css(propertyName)方法用來獲取匹配元素集合中的第一個元素的樣式屬性的計算值。要注意的是，這裏獲取的是計算樣式，即相似於原生javascript的getComputedStyle或currentStyle

<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<span id="result"></span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  $("#result").html("背景顏色是 " + $(this).css("background-color"));
});
</script>

　　[注意]簡寫速寫的CSS屬性(如：margin,background,border)不支持

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="margin-top:10px;">測試文字</div>
<script>
//chrome瀏覽器輸出10px 0px 0px
//firefox和IE瀏覽器輸出空字符串''
console.log( $('#test').css('margin'));
</script>

css(propertyNames)

　　css(propertyNames)方法也能夠接受一個或多個CSS屬性組成的數組做爲參數

　　從jQuery 1.9開始, 傳遞一個CSS的樣式屬性的數組給.css()將返回屬性-值配對的對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="margin-top:10px;">測試文字</div>
<script>
//{width: "1904px", height: "18px", font-size: "16px"}
console.log( $('#test').css(['width','height','font-size']));
</script>

【設置樣式】

css(propertyName,value)

　　能夠經過css(propertyName,value)方法進行樣式設置

　　[注意]從jQuery1.6開始，css()接受相似於animate()的相對值。相對值時以+=或者-=開頭的字符串，表示遞增或遞減當前的值。若是一個元素的左padding是10px，.css( "padding-left", "+=15" )將返回總的左padding爲25px

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">測試文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css('color','red');
    $(this).css('width','+=100');
})
$('#test').mouseout(function(){
    $(this).css('color','green');
    $(this).css('width','-=100');
})
</script>

css(properties)

　　css()方法設置樣式時，容許以一個屬性-值配對的對象做爲參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">測試文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css({'color':'red','width':'+=100'});
})
$('#test').mouseout(function(){
    $(this).css({'color':'green','width':'-=100'});
})
</script>

　　[注意]css()方法支持駝峯寫法與中劃線寫法，內部作了容錯的處理

　　在駝峯寫法中，屬性名能夠不使用引號包裹；可是在中劃線寫法中，必須用引號包裹

.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 
//等價於
.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})

css(propertyName,function(index, value))

　　經過css()方法設置樣式時，第二個參數能夠是一個函數，this指向當前元素，index參數表示元素在匹配集合中的索引位置，html參數表示元素上原來的HTML內容。函數返回設置的值　

　　[注意]當一個數只被做爲值(value)的時候，jQuery會將其轉換爲一個字符串，並添在字符串的結尾處添加px，例如.css("width",50})與.css("width","50px"})同樣

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">測試文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css({width:function(index ,value){
        return parseFloat(value) * 1.2;
    },color: 'red'
});
})
$('#test').mouseout(function(){
    $(this).css({width:function(index ,value){
        return parseFloat(value) / 1.2;
    },color: 'green'});
})
</script>

刪除樣式

　　使用css()方法也能夠刪除樣式，當css()方法的樣式屬性的值爲空字符串時，會從元素上移除該樣式(若該屬性存在的話)

　　[注意]IE8-瀏覽器中，刪除的簡寫屬性，如border或background將徹底刪除該元素樣式，無論是在樣式表或<style>元素中

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
div{border-left:3px solid black;}
</style>
<body>
<div id="test" style="border-left:3px solid green;">內容</div>
<script>
$('#test').click(function(){
    $(this).css('border','');
})
</script>