Web实训知识点_0416

一、Jquery尺寸

jQuery 提供多个处理尺寸的重要方法	动画效果类型方式
width()	slideup() 、slidedown（）
height（）	show() 、hide()
innerWidth()	animate()
innerHeight()	slideToggle() 、slidewidow（）
outerWidth()	-------
outerHeight()	-------

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>

<div id="show">出现</div>
<div id="hide">隐藏</div>
<div id="toggle">toggle</div>
<div id="panel">Hello World</div>

页面实现：