Jquery——click事件

这里,使用如下代码 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
        //隐藏div
        function hideFn() {
            $("#showDiv").hide(2000,"linear")
        }

        //显示div
        function showFn() {
            $("#showDiv").show("slow","swing")
        }

        //切换隐藏和显示
        function toggleFn() {
            $("#showDiv").toggle("slow")
        }
    </script>

</head>
<body>
    <input type="button" value="隐藏div" onclick="hideFn()">
    <input type="button" value="显示div" onclick="showFn()">
    <input type="button" value="切换div的显示和隐藏" onclick="toggleFn()">

    <div id="showDiv" style="height: 200px; width:200px; background-color: pink">
        div显示和隐藏
    </div>
</body>
</html>

 

 

【Over】

posted @ 2022-05-16 19:45  Renhr  阅读(97)  评论(0)    收藏  举报