Web实训知识

jQuery动画总结：

show（），hide（），toggle（），slideUp（），slideDown（），slideToggle（），animate（），slide Window（滑动窗口）

#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>
jQuery尺寸：

css盒子模型：

width()：【设置或返回元素的宽度（不包括内边距，边框，外边距）】
height()：【设置或返回元素的高度（不包括内边距，边框，外边距）】
代码

$(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)
        })
         })

页面实现