web页面设计实训——4.19

通过jQuery获取元素的宽高：

<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸<tton>
<script>
    $(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").outerWidth(true)+"px"+"<br>"
            txt +="div的长度，包括内边距和外边距"+$("#div1").outerHeight(true)+"px"+"<br>"
            $("#div1").html(txt)
        })
    })
    </script>

jQuery动画总结：
show（），hide（），toggle（），slideUp（），slideDown（），slideToggle（），animate（）

jQuery的淡出淡入

<div>
    <ul>
        <li><a href="#">首页</a><>
        <li class="navmenu"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">web网页实战</a><>
                <li><a href="#">服务端技术</a><>
                <li><a href="#">Python开发</a><>
            </ul>
        <>
        <li class="navmenu"><a href="#">学习中心</a>
            <ul>
                <li><a href="#">视频学习</a><>
                <li><a href="#">交流学习</a><>
            </ul>
        <>
        <li><a href="#">经典案例</a><>
        <li><a href="#">关于我们</a><>
    </ul>
</div>
<script type="text/javascript">
        $(function(){
            $(".navmenu").mouseover(function(){
                $(this).children("ul").show();
                //$(this).children("ul").css({display:'block'})
            })
        })
        $(function(){
            $(".navmenu").mouseover(function(){
                $(this).children("ul").hide();
                //$(this).children("ul").css({display:'none'})
            })
        })
    </script>

jQuery尺寸：
px em  （css盒子模型）

width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）