深刻学习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>