- jQuery 方法
- jQuery 盒子模型
jQuery 方法
通过.css更改样式，通过.class添加CSS样式中的类，.removeClass移除样式，.toggleClass切换样式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="jQCSS.css">
</head>
<body>
<div></div>
</body>
</html>
$(document).ready(function () {
// 单一属性或则多个属性的使用方法
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","#FF0000");
$("div").css({
width:"100px",
height:"100px",
backgroundColor:"#FF0000"
});
// 添加一个css里面的的类，给标签添加css中的类样式
$("div").addClass("style1");
$("div").click(function () {
$(this).addClass("style2");
$(this).removeClass("style1");
//切换css 模式
$(this).toggleClass("style2");
});
});
jQuery 盒子模型
盒子.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="box.js"></script>
<style>
#div{
width: 100px;
height: 100px;
margin: 50px;
padding: 50px;
border: 2px solid aqua;
background-color: aquamarine ;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
/**
* Created by chuanglong02 on 17/1/25.
*/
$(document).ready(function () {
alert($("#div").outerHeight(true)); //总高度
alert($("#div").outerHeight(false));//最大到边框
alert($("#div").height());//内容高度
alert($("#div").innerHeight());//带边框的
});
