九、设置样式

addClass，removeClass,  toggleClass

 

//添加一个样式，removeClass是移除一个样式，结果为class="addBg bigger",多个样式
$("thead tr").addClass("addBg").addClass("bigger").removeClass("addBg");
//判读是否存在某个样式
alert($("thead tr").hasClass("bigger"));

/*
 * 为tr添加了两个事件，鼠标移上去和鼠标移走事件，当移上去的时候，添加样式，移走的删除样式
 * 为了相对简单实现第一次做某个操作，第二个事件作某个操作这样的功能，JQuery提供
 * toggleClass()-->这个方法指的是判断是否有这个类，如果有就删除，如果没有就添加
 */
/*("tbody tr").mouseover(function(){
    $(this).addClass("addBg");
}).mouseout(function(){
    $(this).removeClass("addBg");
});*/

$("tbody tr").mouseover(changeBg).mouseout(changeBg);

 

function changeBg() {
    $(this).toggleClass("addBg");
}

 

css,  css(properties),  width(),  height(),  hasClass()

//JQuery通过css来指定样式，甚至完美支持opacity透明度
$("#d1").css("height",90+"px").css("width",90+"px")
        .css("background","#00f").css("color","#fff")
        .css("opacity","0.6").height(100).width(100)
        .click(function(){
            //JQuery提供了一些非常常用的方法来处理常用样式,width,height
            $(this).width($(this).width()+20).height($(this).height()+20);
});