个人笔记--学习jQuery之引用

最新推荐文章于 2023-12-27 21:02:49 发布

奇葩之小王子

最新推荐文章于 2023-12-27 21:02:49 发布

阅读量128

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_52138438/article/details/114781023

版权

个人笔记–学习jQuery之引用

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
        background-color: chartreuse;
        width: 80px;
        height: 80px;
        display: none;
    }
    #panel,#flip{
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: 1px solid #c3c3c3;
    }
    #panel{
        padding: 50px;
        display: none;
    }
    .con{
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: #98bf21;
    }
</style>
<body>
    <h2 id="h"> 这是一个标题</h2>
    <p> 这是一个段落</p>
    <p> 这是另一个段落</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <input type="text" name="fullname">
    <button id="faded">点击看黄色</button>
    <div id="div1"></div>
    <div id = "flip">点我给你看好看的</div>
    <div id="panel">莫要搞黄色</div>
    <button id="anim">开始飙车</button>
    <button id="stop">不飙车了</button>
    <div class="con">芜湖起飞!</div>
    <script>
        $(document).ready(function()
        {
            $("#hide").click(function(){
                $("p").hide(500,"linear",function(){
                    alert("隐藏任务已完成");
                });
            });
            $("#show").click(function(){
                $("p").toggle("fast","linear");
            });
            $("#h").mouseup(function(){
                alert("莫挨人家啦！");
            });
            $("input").focus(function(){
                $(this).css("background-color","#cccccc");
            });
            $("input").blur(function(){
                $(this).css("background-color","#ffffff");
            });
            $("#faded").click(function(){
                $("#div1").fadeToggle().slideUp(2000).slideDown(2000);
            });
            $("#flip").click(function (){
                $("#panel").slideToggle("slow");
            });
            $("#anim").click(function(){
                var con = $(".con");
                con.animate({left:'+=150px',width:'toggle',height:'toggle'},"slow");
                con.animate({top:'+=150px',width:'200px',height:'200px'},"slow");
                con.animate({fontSize:'3em'},"slow");
            });
            $("#stop").click(function(){
                $(".con").stop(true);
            });
        });
    </script>
</body>
</html>

首先要引入jQuery 的链接像是src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
然后就可以用$符号进行便捷操作,以此写自己的js，基本css3的属性都可以使用，不明白的地方查资料

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人笔记--学习jQuery之引用

个人笔记–学习jQuery之引用<!DOCTYPE html><html lang="en"><head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
复制链接

扫一扫