jQuery学习笔记之三

1、jQuery的css操作

HTML代码

<div></div>

js代码

$(document).ready(function(){    //$("div").css("width","100px"); //设置div的单个css样式    //$("div").css("height","100px");    //$("div").css("background","#FF0000");    //$("div").css({                //设置div多个css样式    //    width:"100px",height:"100px",background:"#00FF00"});    $("div").addClass("style1");//添加css Class    $("div").click(function(){        //$("div").addClass("style2");//改变css Class        //$("div").removeClass("style2");//移除css Class        $(this).toggleClass("style2");//style1和style2切换    });});

style代码

.style1{    width: 200px;height: 200px; background-color: bisque;}  .style2{    background-color: blueviolet;}

2、jQuery之盒子模型

HTML代码

<div></div>

style代码

<style>    div{        width: 100px; height: 100px; background-color: aqua;margin: 50px;        padding: 50px; border: 2px blue solid;    }</style>

js代码

/** * 盒子模型 * height() width()  innerHeight() 200 内边距不加边框 * outerHeight() 304  外边距加边框 * outerHeight()  内边距加边框 */$(document).ready(function(){    alert("Width"+$("div").width()); //100    alert("Height"+$("div").height()); //100    alert("innerHeight: "+$("div").innerHeight()); //200   alert("outerHeight: "+$("div").outerHeight()); //204    alert("outerHeight(true): "+$("div").outerHeight(true));//304});