0416---Web实训知识点

最新推荐文章于 2024-06-27 23:20:14 发布

oqqYaZi1234

最新推荐文章于 2024-06-27 23:20:14 发布

阅读量153

点赞数 1

CC 4.0 BY-SA版权

文章标签： 0416-WEB实训知识点

本文链接：https://blog.youkuaiyun.com/oqqYaZi1234/article/details/89423386

本文详细介绍jQuery中动画效果如show、hide、slideToggle等的使用，并解释了css盒子模型及如何利用jQuery调整元素的宽度和高度。

jQuery动画总结：
show（），hide（），toggle（），slideUp（），slideDown（），slideToggle（），animate（），slide Window（滑动窗口）在这里插入图片描述
jQuery尺寸：
css盒子模型：

代码实现：

<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li class="navmenu"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">web网页实战</a></li>
                <li><a href="#">服务端技术</a></li>
                <li><a href="#">Python开发</a></li>
            </ul>
        </li>
        <li class="navmenu"><a href="#">学习中心</a>
            <ul>
                <li><a href="#">视频学习</a></li>
                <li><a href="#">交流学习</a></li>
            </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
<script type="text/javascript">
    $(function(){
        $(".navmenu").mouseover(function(){
            $(this).children("ul").show();
            //$(this).children("ul").css({display:'block'})
        })
        $(".navmenu").mouseout(function(){
            $(this).children("ul").hide();
            //$(this).children("ul").css({display:'none'})
        })
    })
    $('*').css({'margin':'0','padding':'0'});
    $('#nav').css({"background":"#89c6d5","width":"600px","height":"20px","margin":"0 auto"});
    $('ul li').css({"list-style":"none","float":"left","text-align":"center","line-height":"20px","position":"relative"})
    $("#").css({"text-decoration": "none", "color": "#d5931b", "padding": "0 10px", "width": "100px"});
    $('ul li ul').css({"position":"absolute","top":"20px","left":"0"})
    $('ul li ul li').css({"float":"none","width":"100px","background-color":"#a8d584", "margin":"3px 0"})
    $('ul li ul li a').css({"padding":"0"})
</script>

width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
通过jQuery获取元素的宽高：
在这里插入图片描述