jQuery基础知识二

一. 动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
    <style>
        .box, .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }

        .box3 {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <script>
        // 参数1,json对象,动画最终效果,使用CSS表单
        // 参数2,整数,毫秒单位[1s=1000毫秒]
        // 参数3,控制动画变化效果,默认是匀速的(linear)。设置缓动效果:swing
        // 参数4,匿名函数,控制动画完成以后的后续操作
        $(".box").animate({"width": "100px", "height": "50px"}, 2000);
        // 注意这里的right是指从右向左移动
        $(".box2").animate({"right": "500px"}, 2000, "swing", function () {
            $(this).animate({"top": "500px"}, 500);
        });
    </script>

    <!--练习:设置一个50X50的div,控制在3s内变成100X400的div,然后div从上面往下移动100px-->
    <div class="box3"></div>
    <script>
        $(".box3").animate({"width": "100px", "height": "400px"}, 3000, function () {
            $(this).animate({"top": "100px"}, 5000)
        });
    </script>
</body>
</html>

 

 

二. 特殊动画效果(预设动画)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
    <style>
        .box, .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button id="hide">控制元素的隐藏</button>
    <button id="show">控制元素的显示</button>
    <button id="toggle">判断当前状态,进行隐藏/显示</button><br />
    <button id="up">向上滑动,等同于隐藏</button>
    <button id="down">向下滑动,等同于显示</button><br />
    <button id="in">透明效果,淡入</button>
    <button id="out">透明效果,淡出</button><br />
    <button id="fade">控制元素的透明度</button>
    <div class="box"></div>
    <div class="box2"></div>
    <script>
        // 注意这里有个问题,当点击这里很多次后,点多少次它就会执行多少次,哪怕后面鼠标移开了
        // 因此每一个在使用动画之前加一个stop(),比如:
        // $(".box").stop().show(1000);

        $("#hide").on("click", function () {
            // 控制动画的完成时间
            $(".box").hide(3000);
        });

        $("#show").on("click", function () {
            // 控制动画的完成时间
            $(".box").show("slow");  // 有三种:slow,normal, fast,但是设置时间值效果更好一点
        });

        $("#toggle").on("click", function () {
            // 如果原来隐藏则自动显示,反之则反
            $(".box").toggle(2000);
        });

        $("#up").on("click", function () {
            // 控制动画的完成时间
            $(".box").slideUp(3000);  // 也有slideDown, slideToggle
        });

        $("#down").on("click", function () {
            // 控制动画的完成时间
            $(".box").slideDown(3000);  // 也有slideDown, slideToggle
        });

        $("#in").on("click", function () {
            // 控制动画的完成时间
            $(".box").fadeIn(2000);  // 也有slideDown, slideToggle
        });

        $("#out").on("click", function () {
            // 控制动画的完成时间
            $(".box").fadeOut(2000);  // 也有slideDown, slideToggle
        });

        $("#fade").on("click", function () {
            // 控制元素的透明度
            // 参数1:整数,动画完成的时间,单位毫秒
            // 参数2:浮点数,动画完成时,元素的透明度[0:透明,1:不透明]
            $(".box").fadeTo(2000, 0.5);
        });
    </script>
</body>
</html>

 

 

三. 动画版的层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0;
            padding:0;
        }
        
        ul{list-style:none;}


        .menu{
            width:200px;
            margin:20px auto 0;
        }

        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;            
        }

        .menu .level1{
            border-bottom:1px solid #afc6f6;
            
        }

        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
                    
        }

        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }

        .menu li ul{
            display:none;
        }

        .menu li ul.current{
            display:block;
        }

        .menu li ul li a:hover{
            background-color:#f6b544;
        }

    </style>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">手机</a>
            <ul class="current">
                <li><a href="#">iPhone X 256G</a></li>
                <li><a href="#">红米4A 全网通</a></li>
                <li><a href="#">HUAWEI Mate10</a></li>
                <li><a href="#">vivo X20A 4GB</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">笔记本</a>
            <ul>
                <li><a href="#">MacBook Pro</a></li>
                <li><a href="#">ThinkPad</a></li>
                <li><a href="#">外星人(Alienware)</a></li>
                <li><a href="#">惠普(HP)薄锐ENVY</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">电视</a>
            <ul>
                <li><a href="#">海信(hisense)</a></li>
                <li><a href="#">长虹(CHANGHONG)</a></li>
                <li><a href="#">TCL彩电L65E5800A</a></li>                
            </ul>
        </li>
        <li>
            <a href="#" class="level1">鞋子</a>
            <ul>
                <li><a href="#">新百伦</a></li>
                <li><a href="#">adidas</a></li>
                <li><a href="#">特步</a></li>
                <li><a href="#">安踏</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">玩具</a>
            <ul>
                <li><a href="#">乐高</a></li>
                <li><a href="#">费雪</a></li>
                <li><a href="#">铭塔</a></li>
                <li><a href="#">贝恩斯</a></li>
            </ul>
        </li>
        
    </ul>
    <script>
        // 思路
        // 用户点击一级菜单时则需要显示对应的二级菜单,并且把其他的一级菜单的子菜单隐藏
        
        // 实现代码
        $(".menu .level1").on("click", function () {
            // 向上滑动隐藏所有其他的一级菜单的子菜单
            $(".menu .level1").next().slideUp(500);
            // 向下滑动显示当前一级菜单的子菜单
            $(this).next().slideDown(1000);
        });

        // $(".menu li ul li a").hover(function () {
        //     // 默认的jQuery的animate是不支持颜色渐变
        //     $(this).animate({"background-color": "orange"}, function () {
        //         $(this).animate({"background-color": "orange"
        //         })
        //     }
        // });
    </script>
</body>
</html>

 

 

四. 事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<!--像这种在页面一点击p1,又触发了div和body的事件,这就是冒泡-->
<!--也就是说,子元素的事件触发,会导致父类元素同名事件(比如这里onclick)的触发,这种现象就是冒泡事件-->
<body onclick="alert('body被点击了')">
    <div class="box" onclick="alert('box被点击了')">
        <p class="p1" onclick="alert('p1被点击了')">
            <span>一个文本</span>
        </p>
    </div>

    <script>

    </script>
</body>
</html>

 

 

五. 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<!--像这种在页面一点击p1,又触发了div和body的事件,这就是冒泡-->
<!--也就是说,子元素的事件触发,会导致父类元素同名事件(比如这里onclick)的触发,这种现象就是冒泡事件-->
<body onclick="alert('body被点击了')">
    <div class="box" onclick="alert('box被点击了')">
        <p class="p1" onclick="alert('p1被点击了')">
            <span id="span">一个文本</span>
        </p>
    </div>

    <script>
        let span = document.getElementById("span");
        span.onclick = function (event) {
            // 事件发生以后,浏览器找到触发地点
            console.log(event.target);
            // 阻止事件冒泡
            event.stopPropagation();
        }
    </script>
</body>
</html>

 

 

六. 使用事件冒泡完成事件的委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li><a href="">商品1</a></li>
        <li><a href="">商品2</a></li>
        <li><a href="">商品3</a></li>
        <li><a href="">商品4</a></li>
        <li><a href="">商品5</a></li>
        <li><a href="">商品6</a></li>
        <li><a href="">商品7</a></li>
        <li><a href="">商品8</a></li>
        <li><a href="">商品9</a></li>
    </ul>
    <script>
        // 利用事件会冒泡到父级元素,把事件操作绑定到父级元素中
        // 让父级元素托管事件
        // on方法的事件参数后面可以增加一个字符串的参数,是CSS选择器
        // 可以设置为当前父元素托管事件的元素
        $("ul").on("mouseover", "li", function (event) {
            console.log(event.target);
            console.log($(this).html());
        });

        $("ul").on("click", "a", function () {
            $(this).css("color", "red");

        })
    </script>
</body>
</html>

 

 

七. 事件的委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li class="list"><a href="">商品1</a></li>
        <li class="list"><a href="">商品2</a></li>
        <li class="list"><a href="">商品3</a></li>
        <li class="list"><a href="">商品4</a></li>
        <li class="list"><a href="">商品5</a></li>
        <li class="list"><a href="">商品6</a></li>
        <li class="list"><a href="">商品7</a></li>
        <li class="list"><a href="">商品8</a></li>
        <li class="list"><a href="">商品9</a></li>
    </ul>
    <script>
        // 事件委托就是让父元素监管子元素的同名事件,从而避免了大量子元素绑定事件的情况
        // 就是把事件绑定到父元素中
        // 在on方法的事件名称后,绑定当前父元素要托管事件的子元素
        $("ul").on("mouseover", function () {
            console.log($(this).html());
        })

        // 给每个子元素绑定事件,效率很低
        // $("ul li").on("mouseover", function () {
        //     console.log($(this).html());
        // })
    </script>
</body>
</html>

 

 

八. 阻止事件的默认行为(针对form标签和a标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<body>
    <a href="" id="link">链接</a>

    <form action="">
        账号:<input type="text" name="username"><span id="username_tis"></span>
        密码:<input type="password" name="username">
        <input type="submit" name="submit" value="提交">
    </form>

    <script>
        $("#link").on("click", function () {
            console.log($(this).html());
            // 阻止a标签的跳转行为
            return false;
        });

        // 阻止表单的提交行为
        // let form = document.getElementsByName("submit")[0];
        $("input[name=submit]").on("click", function () {
            // 希望校验数据
            if ($("input[name=username]").val().length > 6) {
                $("#username_tis").html("账号不合法");
                return false;
            }
        });
    </script>
</body>
</html>

 

 

九. 遮罩层窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
    <style>
        .opacity {
            width: 100%;
            height: 100%;
            background-color: white;
            /* 【居中定位】保证一个元素在上下左右都居中 */
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            display: none;
        }

        .opacity-div {
            width: 100%;
            height: 100%;
            background-color: gray;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            /*opacity: 0.3;*/
        }

        .login-box {
            width: 400px;
            height: 250px;
            background-color: white;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            /* 一个元素如果有宽度和高度的设置,设置定位时,两边距离一样时,则该元素居中 */
            right: 0;
        }
    </style>
</head>
<body>
    <span class="login">登录</span>
    <div class="opacity">
        <!--这里注意顺序,因为是从上往下执行-->
        <div class="opacity-div"></div>
        <div class="login-box">登录窗口</div>
    </div>

    <script>
        // 思路
        // 1. 用户点击登录按钮,显示opacity窗口
        // 2. 点击这个灰色透明背景层,会关闭opacity窗口

        // 实现代码
        $(".login").on("click", function () {
            $(".opacity").fadeIn(1000);
        });

        $(".opacity-div").on("click", function () {
            $(".login-box").slideUp(500, function () {
                $(".opacity").fadeOut(500);
            });
        })
    </script>
</body>
</html>

 

 

十. DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<body>
    <p class="p1">一个段落</p>

    <script>
        // 创建一个标签元素
        // 注意这里创建的元素并不会自动显示在页面中
        let div = $("<div>一个div</div>");
        console.log(div.html());

        // 把元素添加到页面中指定元素的内部
        // 目标元素.appendTo($(父元素)),放在父元素的所有子元素的后面
        // div.appendTo($("body"));

        // 如果不想放在最后面,可以这样
        // div.prependTo($("body"));

        // 把元素添加到页面中指定元素的外部(前面)
        // 目标元素.insertBefore(位置元素)
        // div.insertBefore($(".p1"));

        // 把元素添加到页面中指定元素的外部(后面)
        // 目标元素.insertAfter(位置元素)
        // div.insertAfter($(".p1"));

        // 清空指定的元素内容[只删除内容,标签还在]
        // $(".p1").empty();

        // 删除指定的元素[不仅内容被删除,标签也会被删除]
        $(".p1").remove();
    </script>
</body>
</html>

 

 

十一. 表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="代码/jquery/js/jquery-1.12.4.js"></script>
</head>
<body>
    账号:<input type="text" name="username"><br /><br />
    密码:<input type="password" name="password"><br /><br />
    手机号码:<input type="text" name="mobile"><br /><br />
    个人网页:<input type="text" name="url"><br /><br />
    <input type="submit" value="提交">

    <script>
        // JS中正则就是一个对象,默认具有正则操作的方法
        $("input[name=submit]").on("click", function () {
            // 验证数据
            // 1. 账号只能由字母、数字组成,6-10位
            let reg = /[a-zA-Z0-9]{6,10}/;
            console.log(reg);
            // 使用test可以进行正则匹配,返回匹配结果(布尔值)
            result = reg.test($("input[name=username]").val());
            console.log(result);
            if (!result) {
                return false;
            }

            // 验证url地址
            let reg2 = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
            result = reg2.test( $("input[name=url]").val() );
            console.log( result );
            return false;
        })
    </script>
</body>
</html>

 

posted @ 2019-03-05 20:28  星满夜空  阅读(164)  评论(0编辑  收藏  举报