zoukankan      html  css  js  c++  java
  • 8.28 jQuery

    2018-8-28 18:25:27

    jQuery 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html

    2018-8-28 19:53:19

    还是讲的jQuery !

    有点点枯燥!但是很好理解!

    这几天想多看看书!电脑玩的太多!需要精心看书!

    扎克伯格 说过 有时候有状态学多点,没状态就干点其他的!

    越努力,越幸运!

    <!DOCTYPE html>
    <html>
    <head>
        <title>位置相关方法</title>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .c1{
                height: 100px;
                 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="c1">我是div</div>
        <script src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript"></script>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
        <title>自定义模态框</title>
        <meta charset="utf-8">
        <style type="text/css">
            .cover{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0,0,0,0.4);
                z-index: 998;
            }
    
            .modal{
                height: 400px;
                 600px;
                background-color: white;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -300px;
                margin-top: -200px;
                z-index: 1000;
            }
             .hide {
                display: none;
            }
    </style>
    </head>
    <body>
    <button id="b1">屠龙宝刀,点击就送</button>
    <div class="cover hide"></div>
    <div class="modal hide">
        <form action="">
            <p>
                <label>用户名:
                    <input type="text" name="">
                </label>
            </p>
            <p>
                <label>密码:
                    <input type="text" name="">
                </label>
            </p>
            <p>
                <input type="submit" value="登入">
                <input id="cancel" type ="button" value="取消">
            </p>
        </form>
    </div>
    
    <script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        // 找到点击弹出模态框的按钮
        $("#b1").click(function(){
            // 把 .cover和.modal显示出来(去除hide)
            $(".cover").removeClass("hide");    // 显示背景
            $(".modal").removeClass("hide"); //显示模态框
        })
        // 找到取消按钮,绑定事件
        $("#cancel").click(function(){
            //给背景和模态框都加上hide类
            $((".cover").addClass("hide");
            $((".modal").addClass("hide");
        })
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
        <title>修改css样式</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>小强</p>
        <p>二哥</p>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $("p").click(function(){
            //把当前点击的标签变绿
            // 在处理事件的函数中用this 表示  当前触发事件的标签
            $(this).css("color","red");
            $(this).css("font-size","24px");
        }) 
    
    </script>
    </body>
    </html>
  • 相关阅读:
    第三方登录的原理
    浅谈算法的时间复杂度和空间复杂度
    python3的全局变量和局部变量
    python3的嵌套函数
    HTTP协议学习-03
    HTTP协议学习-02
    HTTP协议学习-01
    织梦模板修改方法大全
    java常用用代码
    java学用代码
  • 原文地址:https://www.cnblogs.com/zhen1996/p/9550435.html
Copyright © 2011-2022 走看看