JQ的简单使用（基础）——————JQ

来源：cnblogs　　作者：陈嗯嗯　　时间：2019/9/23 8:51:18　　对本文有异议

JQ基础——JQ的简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .w{}
        </style>
    </head>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <body>
    1.  弹窗
        <script>
            $(function(){
                alert("JQ超简")
            })
        </script>
    2.  修改文本
        <div>张山</div>
        <script>
            $(function(){
                $("div").html("李四")
            })
        </script>
            
    3.  点击事件
        <button id="btn">点我</button>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#btn").html("修改成功")
                });
            });     
        </script>
    4.图片显示/隐藏  （自建效果）
    <img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" width="200px"> <br />
    <button id="btn1">显示</button><button id="btn2">隐藏</button>
<a href="#" id="btn1">显示</a><a href="#" id="btn2">隐藏</a>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#img").show(2000);
                $("#img").fadeOut(2000);//渐出
                $("#img").slideDown(2000);//向下出
                
            });
        });
        $(function(){
            $("#btn2").click(function(){
                $("#img").hide(2000);
                $("#img").fadeIn(2000);//渐入
                $("#img").slideUp(2000);//下上藏
            })
        })
        自建效果
        $(function(){
            $("#btn1").click(function(){
            $("#img").animate({
                width: "400px",
                opacity:"0.1" ,
            },3000)
        })
    })
    </script>
    5.Ad广告。定时弹出。
    <img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" />
    <script>
        $(function(){
            setTimeout("hideAd()",3000);
        });
        function showAd(){
            $("#img").show();
            
        }
        function hideAd(){
            $("#img").hide();
            setTimeout("showAd()",3000);
        }
    </script>
    </body>
</html>

原文链接：http://www.cnblogs.com/cth0/p/11564754.html

友情链接：直通硅谷　点职佳　北美留学生论坛

JQ基础——JQ的简单使用

jQuery热门文章

jQuery推荐文章