应用jquery操作元素样式（二）

1.如何获取、设置某个元素行内单个、多个css样式

2.如何通过fn来设置元素css样式

3.如何给元素添加单个、多个css类

4.如何删除某个元素的单个、多个css类

5.如何切换默认样式和指定样式

6.如何通过fn设置切换规则

//添加一个样式

/**

$(function(){
$('div').addClass('red');

})

*/

//添加多个样式

/**

$(function(){
$('div').addClass('red bg');

})

*/

//删除单个样式

/**

$(function(){
$('div').removeClass('red');

})

*/

//删除多个样式

/**

$(function(){
$('div').removeClass('red bg');

})

*/

//添加单一监听事件

/**

$(function(){
$('div').click(function(){
$('div').addClass('red');
});

})

*/

//toggle方法样式切换,点击切换到设置样式，再次点击切换到默认样式

/**

$(function(){
$('div').click(function(){
$('div').toggleClass('red');
})

})

*/

//多个样式切换,判断是否有该属性，有就删除，添加上相应的样式；

/**

$(function(){
$('div').click(function(){
if ($('div').hasClass('blue')) {
$('div').removeClass('blue');
$('div').addClass('red');
}else if($('div').hasClass('red')){
$('div').removeClass('red');
$('div').addClass('blue');
}
});

})

*/

//设置多个样式，用链式语法

/**

$(function(){
$('div').click(function(){
if ($('div').hasClass('blue')) {
$('div').removeClass('blue').addClass('red');
}else if($('div').hasClass('red')){
$('div').removeClass('red').addClass('blue');
}
});

})

*/