jQuery样式操作&click事件

jQuery样式操作

.div2{

color:red;

}

.big{

font-size:30px;

}

$(function(){

/*jQuery用同一个函数即可以取值、也可以赋值*/

//读取样式

alert($('#div1').css('fontSize'));//16px

//设置（写入）样式

$('#div1').css({background:'gold'});

//增加行间样式

$('#div1').addClass('big');

//减少行间样式，多个样式用空格分开

$('#div1').removeClass('div2 big');

})

jquery用法思想二

同一个函数完成取值和赋值

操作行间样式

// 获取div的样式

$("div").css("width");

$("div").css("color");

//设置div的样式

$("div").css("width","30px");

$("div").css("height","30px");

$("div").css({fontSize:"30px",color:"red"});

特别注意

选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2

$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式

$("#div1").removeClass("divClass divClass2") //移除多个样式

$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

click事件

.box{

width:200px;

height:200px;

background-color:gold;

}

.sty{

background-color:green;

}

$(function(){

//给按钮绑定click事件

$('#btn').click(function(){

//重复切换sty样式

$('.box').toggleClass('sty');

})

})