4月16日

一.jQuery尺寸：
css盒子模型：又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

$(document).ready(function(){
        $("button").click(function(){
            var txt=""
            txt +='div的宽度是:'+$('#div1').width()+'px'+'<br>';
            txt +='div的高度是:'+$('#div1').height()+'px'+'<br>';
            txt +='div的宽度，包括内边距:'+$('#div1').innerWidth()+'px'+'<br>';
            txt +='div的高度，包括内边距:'+$('#div1').innerHeight()+'px'+'<br>';
            txt +='div的宽度，包括内边距和边框:'+$('#div1').outerWidth()+'px'+'<br>';
            txt +='div的高度，包括内边距和边框:'+$('#div1').outerHeight()+'px'+'<br>';
            txt +='div的宽度，包括内边距和边框，外边距:'+$('#div1').innerWidth(true)+'px'+'<br>';
            txt +='div的高度，包括内边距和边框，外边距:'+$('#div1').innerHeight(true)+'px'+'<br>';
            $("#div1").html(txt)
        })


    })

二.jQuery的淡出淡入
show()：出现,
hide()隐藏,
toggle()：来回滑动,slideUp(),slideDown(),slideToggle()

#show,#hide,#toggle,#panel{
        padding: 5px;
        text-align: center;
        background-color: #e556bf;
        border: solid 1px red;
        padding: 20px;
                 }
    #panel{
        display: none;
        height: 50px;
        padding: 100px;
    }

<script>
    $(document).ready(function(){
        $("#show").click(function(){
            $ ( "#panel").slideDown(1000)
        })
        $("#hide").click(function() {
            $("#panel").slideUp(1000)
        })
        $("#toggle").click(function() {
            $("#panel").slideToggle(1000)
        })
    })
</script>