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

2021-02-08 作者：匿名阅读：1244次

前言

本文重点解决JQ的简单使用（基础）——————JQ问题,希望能够帮助到你

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.xlkjgs.com/notes/js/2361.html

W 导出为.doc文档