WEB页面设计实训课堂笔记06DYL

jQuery学习

课堂练习总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <style>
        #slide,#panel,#button1,#button2 {
            padding: 5px;
            text-align: center;
            background-color: #fff1d9;
            border: 2px solid darkred;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#slide").click(function (){
                $("#panel").slideDown(1000)
            })
            $("#button1").click(function (){
                $("#panel").slideUp(1000)
            })
            $("#button2").click(function (){
                $("#panel").slideToggle(1000)
            })
        })

    </script>
</head>
<body>
<div id="slide">出现</div>
<div id="button1" type="button">隐藏</div>
<div id="button2" type="button">toggle</div>
<div id="panel">hello world ！</div>
</body>
<html>

代码总结//show()展示，hide()隐藏，toggle()开关，slideup()上滑，slideDown()下滑，slidetoggle()滑动开关，animate()动画，slidewindow()滑动窗口。

jQuery尺寸图解

WEB页面设计实训课堂笔记06DYL

用jQuery实现二级菜单代码

<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'})
        })
    })
</script>