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
});