jQuery的css类：
- addClass() 添加css类
- removeClass() 删除css类
- toggleClass() 添加/删除css类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("body div:first").addClass("blue");
});
$("#btn2").click(function(){
$(".blue").removeClass("blue");
});
$("#btn3").click(function(){
$(".bold").toggleClass("blue");
});
});
</script>
<style>
.important{
font-size:18px;
}
.blue{
color:blue;
}
.bold{
font-weight:bold;
}
</style>
</head>
<body>
<div id="d1">第一个div</div>
<div class="blue">第二个div</div>
<div class="bold">第三个div</div>
<button id="btn1">添加属性</button>
<button id="btn2">移除属性</button>
<button id="btn3">切换属性</button>
</body>
</html>
jQuery尺寸:
- width() 内容宽度
- height() 内容高度
- innerWidth() 内容宽度+内边距
- innerHeight() 内容高度+内边距
- outerWidth() 内容宽度+内边距+边框宽度
- outerHeight() 内容高度+内边距+边框宽度
- outerWidth(true) 内容宽度+内边距+边框宽度+外边距
- outerHeight(true) 内容高度+内边距+边框宽度+外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert($("#d1").width());
});
$("#btn2").click(function(){
alert($("#d1").innerWidth());
});
$("#btn3").click(function(){
alert($("#d1").outerWidth());
});
$("#btn4").click(function(){
alert($("#d1").outerWidth(true));
});
});
</script>
<style>
#d1{
margin:0 auto;
padding:5px 5px;
width:80px;
height:80px;
border:none;
border:1px solid green;
}
button{
display:block;
margin:2px auto;
}
</style>
</head>
<body>
<div id="d1">第一个div</div>
<button id="btn1">内容宽度</button>
<button id="btn2">内边距+内容宽度</button>
<button id="btn3">边框宽度+内边距+内容宽度</button>
<button id="btn4">外边距+边框宽度+内边距+内容宽度</button>
</body>
</html>