Web实训知识点——0416

一.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)
        })


    })

页面实现：

二.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>

页面实现：