day 39 jq 学习入门2

---恢复内容开始---

前情提要:

　　jq 是用来降低js 的工作的一个组件

　　一:利用jq 实现动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
    .box,.box2{
        width: 100px;
        height: 100px;
        background-color: red;
        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毫秒ms]
    // 参数3，字符串，控制动画变化效果，默认匀速linear,可以设置为缓动效果swing
    // 参数4，匿名函数,控制动画完成以后，后续操作
    // $(".box").animate({"width":"100px","height":"50px"},2000);
    $(".box2").animate({"right":"600px"},2000,"swing",function(){
        $(this).animate({"top":"300px"},500);
    });

    // 练习：设置一个50x50的div，控制在3秒内变成100*400px的div,然后div从上面往下移动100px;
    </script>
</body>
</html>

View Code

　　二:动画效果的预设

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
    .box,.box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
    .box2{
        background-color: red;
    }
    </style>
</head>
<body>
    <button id="hide">控制元素的隐藏</button>
    <button id="show">控制元素的显示</button>
    <button id="toggle">判断当前状态，进行隐藏显示</button>
    <button id="up">向上滑动[等同于隐藏这个box]</button>
    <button id="down">向下滑动[等同于显示这个box]</button>
    <button id="in">淡入[等同于显示这个box]</button>
    <button id="out">淡出[等同于隐藏这个box]</button>
    <button id="fade">控制元素的透明度动画</button>

    <div class="box"></div>
    <div class="box2"></div>
    <script>
    $("#hide").on("click",function(){
        // 参数1，控制动画的完成时间
        $(".box").hide(3000);
    });
    $("#show").on("click", function(){
        $(".box").show(2000);
    });
    $("#toggle").on("click", function(){
        // 如果原来隐藏，则会自动显示
        // 如果原来显示，则会自动隐藏
        $(".box").stop().toggle(2000);
    });

    $("#up").on("click", function(){
       $(".box").stop().slideUp(1000);
    });

    $("#down").on("click", function(){
       $(".box").slideDown(1000);
    });

    $("#in").on("click", function(){
       $(".box").fadeIn(3000);
    });

    $("#out").on("click", function(){
       $(".box").fadeOut(3000);
    });

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

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

View Code

　　三:动画效果版本的层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title>
    <script src="js/jquery-1.12.4.js"></script>    
    <script src="js/jquery.color.js"></script><!-- 使用这个插件必须先引入jQuery -->
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }
        
        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(500)  // 显示当前一级菜单的子菜单
    });

    $(".menu li ul li a").hover(function(){
        console.log(1);
        // 默认的jQuery的animate是不支持颜色渐变
        $(this).animate({"background-color":"#f6b544","color":"red"},1000);
    },function(){
        $(this).animate({"background-color":"#7aa1ef","color":"white"},1000)
    });
    </script>
</body>
</html>

View Code

　　四:事件冒泡的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onclick="alert('body被点击了')">
    <div class="box" onclick="alert('box被点击了')">
        <p classs="p1" onclick="alert('p1被点击了')">
            <span>一个文本</span>
        </p>
    </div>
    <script>

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

View Code

　　五:阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onclick="alert('body被点击了')">
    <div class="box" onclick="alert('box被点击了')">
        <p classs="p1" onclick="alert('p1被点击了')">
            <span id="span">一个文本</span>
        </p>
    </div>
    <script>
    var span = document.getElementById("span");
    span.onclick = function(event){ // event 翻译成中文 就是 "事件"
        console.log( event.target ); // 事件发生以后，浏览器查找到触发地点
        event.stopPropagation(); // 阻止事件冒泡
        // event.cancelBubble = true;  // 如果是IE浏览器，则使用这句阻止事件冒泡
    }
    </script>
</body>
</html>

View Code

　　六:事件托管(事件委托)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="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>
    </ul>
    <script>
    // 事件委托，就是让父元素监管子元素的同名事件，从而避免了大量子元素绑定事件的情况
    // 就是把事件绑定到父元素中
    // $("ul li").on("mouseover",function(){
    //     console.log( $(this).html() );
    // });

    // 上面分别给大量的子元素绑定事件，效率低
    // 在on方法的事件名称后，绑定当前父元素要托管事件的子元素[选择器]
    $("ul").on("mouseover",".list",function(){
       console.log( $(this).html() );
    });
    </script>
</body>
</html>

View Code

　　七:阻止事件的默认行为[针对form 表单]

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

    <form action="">
        账号：<input type="text" name="uname"><span id="uname_tis"></span>
        密码：<input type="password" name="pwd">
        <input type="submit" name="submit" value="提交">
    </form>
    
    <script>
    $("#link").on("click", function(){
       console.log( $(this).html() );
        // 阻止a标签的点击跳转行为
        return false;
    });

    // 阻止表单的提交行为
    $("input[name=submit]").on("click", function(){
       // 希望校验数据
       if( $("input[name=uname]").val().length>6 ){
           $("#uname_tis").html("账号不合法");
           // event.preventDefault();  // vue.js后面会再次出现这个prevent
           return false;
       }
    });
    </script>
</body>
</html>

View Code

　　八:案例遮罩层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .login{
        width: 400px;
        height: 280px;
        background: #fff;
        border: 1px solid #aaa;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        display: none;
    }
    .opacity{
        display: none;
        background: #000;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        opacity: 0.3;
    }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
       // 点击登陆显示登陆窗口
        $(".btn").on("click",function(e){ // 事件的匿名函数被调用的时候，系统会在匿名函数这里传递一个参数，就是事件对象
            $(".opacity").show();
            $(".login").show();
             return false; // 方法1，使用return false可以解决事件的冒泡
            // e.stopPropagation(); // 方法2:使用事件对象的stopPropagation()来组织冒泡
        });

        $("body").on("click",function(){
//            alert("body标签被点了");
            $(".opacity").hide();
            $(".login").hide();
        });

        $(".login").on("click",function(){
            return false; // 阻止事件冒泡
        })
    });
    </script>
</head>
<body>
    <span class="btn">登陆</span>
    <div class="opacity"></div><!-- 遮罩层 -->
    <div class="login">
        <div class="content">登陆窗口</div>
    </div>
</body>
</html>

View Code

　　九:dom 操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <p class="p1">一个段落</p>
<script>
    // 创建一个标签元素[创建的元素并不会自动显示到html页面中]
    let div = $("<div>一个div</div>")
    console.log( div.html()  );

    // 把元素添加页面中指定元素的内部
    //目标元素.appendTo($(父元素))  // 表示给父元素的内部追加目标元素
    // div.appendTo( $("body") );

    //目标元素.prependTo($(父元素))  // 表示给父元素的内部前面追加目标元素
    // div.prependTo( $("body") );

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

    // 目标元素.insertAfter(位置元素) // 表示给指定位置元素后面加上一个目标元素
    // div.insertAfter( $(".p1") );

    // 清空指定的元素内容[还剩下标签本身]
    // $(".p1").empty();

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

View Code

　　十:todolist 效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
        // 一,添加计划
        // 步骤:
        //   1. 给"增加"按钮绑定点击事件
        $("#btn1").on("click", function(){
            // 2. 获取文本框的内容
//            console.log( $("#txt1").val() );
            var content = $("#txt1").val();
            // 数据的验证
            if(content == ""){
                alert("请输入计划的内容");
                return false;
            }
            // 3. 添加到计划列表
            // 3.1 创建新元素
            var new_li = $('<li><span>'+content+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
            // 3.2 把创建元素添加到计划列表的前面
            $("#list").prepend(new_li);
        });

        // 二,移动计划的上下位置
        // 1. 向下移动
        // 在点击".down"按钮以后，把当前行的li元素与下一行的li元素位置互换
        $("#list").on("click",".down",function(){
            // 1.1 获取当前行的li元素
            // $(this) 当前被点击的元素[.down]
            // parent()　获取父级元素
            var current_li = $(this).parent();
            // 1.2 获取下一行的li元素
            var next_li = current_li.next();
            // 1.3 把下一行li的元素放到当前行的前面
            current_li.before(next_li);
        });

        // 2. 向上移动
        $("#list").on("click",".up",function(){
               // 2.1 获取当前行的li元素
            var current_li = $(this).parent();
            // 2.2 获取上一行的li元素
            var prev_li = current_li.prev();
            // 2.3 把上一行的li元素当前当前行的后面
            current_li.after(prev_li);
        });

        // 三,删除计划
        $("#list").on("click",".del",function(){
            // 删除元素使用remove()
            $(this).parent().remove();
        });
    });
    </script>
</head>
<body>
    <div class="list_con">
        <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">
            <!-- javascript:; # 阻止a标签跳转 -->
            <li>
                <span>学习html</span>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
            </li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
        </ul>
    </div>
</body>
</html>

View Code

　　 十一:表单验证(正则的使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<form action="">
    账号：<input type="text" name="uname"><br><br>
    密码：<input type="password" name="pwd"><br><br>
    手机号码：<input type="text" name="mobile"><br><br>
    个人网页：<input type="text" name="url"><br><br>
    <input type="submit" value="提交">
</form>
<script>
    // js中正则就是一个对象，默认具有正则操作的方法
    $("input[type=submit]").on("click", function(){
        // 验证帐号数据
        // 1. 账号只能由字母、数字组成,6-10
        let reg = /[a-zA-Z0-9]{6,10}/;
        // console.log( reg );
        // 使用test可以进行正则匹配，返回值是布尔值，true表示验证通过
        result = reg.test( $("input[name=uname]").val() );
        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>

View Code

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>Title</title>

    <style>

            .outer{
                width: 590px;
                height: 470px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;
                 display: none;
            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 170px;
               list-style: none;


           }

           .num li{
               display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 14px;
           }

           .btn{
               position: absolute;
               top:50%;
               width: 30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;

           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;

        }
    </style>

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li><a href=""><img src="img/5.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <!--<li class="active"></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>
<script src="jquery-3.1.1.js"></script>
<script>
    var i=0;
//  通过jquery自动创建按钮标签

    var img_num=$(".img li").length;

    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    $(".num li").eq(0).addClass("active");


// 手动轮播

    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });


// 自动轮播
    var c=setInterval(GO_R,1500);

    function GO_R() {

        if(i==img_num-1){
            i=-1
        }
         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }


    function GO_L() {
        if(i==0){
            i=img_num
        }
         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程


    }
    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)
    });



// button 加定播
    $(".right").click(GO_R);
    $(".left").click(GO_L)



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

View Code

posted on 2019-03-06 22:08 百里丶落云阅读(206) 评论(0) 编辑收藏举报

刷新页面返回顶部