当前位置： 移动技术网 > IT编程>开发语言>Jquery > JQ的简单使用（基础）——————JQ

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

2019年09月22日  | 移动技术网IT编程  | 我要评论

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网