day 39 jq 學習入門2

時間 2019-11-07

原文原文鏈接

---恢復內容開始---javascript

前情提要:css

　　jq 是用來下降js 的工做的一個組件html

　　一:利用jq 實現動畫效果vue

<!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

　　二:動畫效果的預設java

<!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

　　三:動畫效果版本的層級菜單jquery

<!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

　　四:事件冒泡的定義json

<!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

　　六:事件託管(事件委託)
app

<!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 表單]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>
    <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

1. day 38 jq 入門學習(一)
2. Day-2 YOLO3學習
3. JQ入門學習實戰演練
4. Linux 學習筆記 Day 2
5. 安全學習day 2
6. Mathematica學習打卡day 2
7. 【Day 2】Python 基礎學習
8. JavaScript學習日記Day 2
9. Linux學習之路：day 2
10. DAY 2 動手學習深度學習
更多相關文章...
• Memcached入門教程 - NoSQL教程
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• YAML 入門教程
• Tomcat學習筆記（史上最全tomcat學習筆記）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。