day 38 jq 入門學習(一)

時間 2019-11-07

原文原文鏈接

前情提要:css

　　jq是簡化版本的js 能夠把不少很複雜的js 提煉讓前端代碼更好寫html

　　　　一:jq的使用前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <script>
        console.log( $ );
        console.log( jQuery );
    </script>
</body>
</html>

View Code

　　　　二:jq的入口函數jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // window.onload = function(){
        //     console.log ( document.getElementById("title").innerHTML );
        // };
        // window.onload = function(){
        //     console.log(111);
        // }

        // 上面的代碼只有最後一個onload裏面的代碼會被執行，前面的已經被覆蓋了，
        // 在jQuery中可使用ready入口函數來解決這個問題，ready入口函數可使用屢次，
        // $(document).ready(function(){
        //     console.log( document.getElementById("title").innerHTML );
        // });
        //
        // $(document).ready(function(){
        //     console.log("ready");
        // });


        // 上面的ready函數寫法能夠簡化
        $(function(){
            console.log( document.getElementById("title").innerHTML );
        });

        $(function(){
            console.log("ready");
        });

        $(function(){
            // 這裏編寫咱們的js/jQuery代碼
        });
    </script>
</head>
<body>
    <h1 id="title">標題</h1>
</body>
</html>

View Code

　　　　四:jq的選擇器(上)編程

<!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 id="first">一個文本</p>

<script>
    // jQuery參照了css操做元素外觀的選擇器寫法，本身內部實現了一套獲取js元素的選擇器功能,
    // 這套功能的使用，咱們徹底能夠向以前學習css那樣來使用這要選擇器功能，
    // jQuery還額外提供了一些css原本沒有的選擇器

    // document.getElementById()  根據id屬性值獲取一個元素
    // $("#id值")
    console.log( $("#first") );

    // 經過id元素獲取元素的內容
    // js寫法
    let f = document.getElementById("first");
    console.log( f.innerHTML );

    // jQuery寫法，下面代碼就是上面2行代碼的縮寫
    console.log( $("#first").html() );

    // 細節：$()函數獲取到的元素，返回值是一個類數組的jQuery對象，並不是js那樣的一個元素對象
    // 這個類數組的jQuery對象擁有數組的操做方法，可是並不具有js元素的操做方法
    // 例如：
    console.log( $("#first").innerHTML ); // 這裏根本沒法獲取內容
</script>

<ul class="list">
    <li class="num1">第1個列表</li>
    <li class="num2">第2個列表</li>
    <li class="num2">第3個列表</li>
</ul>
<script>
    // 獲取類元素
    // document.getElementsByClassName("類名")
    // $(".類名")

    console.log( $(".list") );
    console.log( $(".list").html() );

    // 能夠獲取多個類元素
    console.log( $(".num2") );

    // 注意了，若是jQuery對象獲取的是多個元素，那麼獲取內容的時候只會顯示第一個成員的內容
    console.log( $(".num2").html() );

    // 因此若是要獲取這些元素全部的內容，則使用數組的遍歷便可
    // for(let i = 0;i<$(".num2").length;i++){
    //     console.log( $(".num2").eq(i).html() ); // $(".num2")[i] 在jQuery中可使用 $(".num2").eq(i)
    // }
</script>

<div class="list2">
    <p class="num3">第1個列表</p>
    <p class="num4">第2個列表</p>
    <p class="num4">第3個列表</p>
</div>
<p class="num4">第4個列表</p>

<script>
    // 使用標籤名選擇器
    console.log( $("div") );

    // 更多的是用使用層級選擇器
    console.log( $(".list2 .num3") );
    console.log( $(".list2 .num4") );
</script>
<style>
    input[name=idcard]{
       border:1px solid red;
    }
</style>
<input type="text" name="uname">
<input type="text" name="address">
<input type="text" name="idcard">
<script>
    // 屬性選擇器
    console.log( $("input") );

    console.log( $("input[name=idcard]") );
</script>

</body>
</html>

View Code

　　　　四:jq的選擇器(下)json

<!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 class="list">
    <li>0</li>  <!-- 索引下標從0開始 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    // $(".list li") // 獲取全部.list下面的li
    console.log( $(".list li:odd") ); // 獲取全部.list下面的索引下標爲奇數的li
    console.log( $(".list li:even") );

    // 深刻學習，實現一個換色效果
    // .css()   給jQuery元素添加css外觀
    $(".list li:odd").css({
        // "color":"red",
        color:"red", // 對象的屬性也能夠是沒有引號的
        // "background-color":"gray"
        backgroundColor:"gray", // 若是樣式屬性是多個單詞組成的，那麼不要引號的話就要改爲駝峯式
    });
</script>

<ul>
    <li><input type="checkbox" checked></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox" checked></li>
    <li><input type="checkbox"></li>
</ul>
<script>
    // 獲取多選框中具備勾選狀態的全部標籤,通常用於完成反選,全選或者全不選
    console.log( $("li input:checked") );
</script>
</body>
</html>

View Code

　　　　五:對jq的查詢結果的過濾操做數組

<!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 class="list">
    <li>1</li>
    <li class="last num">2</li>
    <li class="last">3</li>
    <li class="last num"></li>
</ul>
<script>
    // 獲取全部元素li中的第二個[索引下標爲1]
    console.log( $(".list li") );
    console.log( $(".list li").eq(1) ); // eq表示從查詢結果的數組提取指定下標的成員

    // 獲取除了指定元素意外的全部其餘li元素
    // not() 表示排除指定選擇器對應的元素，提取結果中的其餘元素
    console.log( $(".list li").not(".last") );

    // 在全部li.last元素中找出內部具備.num類名的元素
    // has() 表示從結果中提取具備指定選擇器對應的元素出來
    // console.log( $(".list .last").has(".num") );  // 這裏.last和.num是同一個級別，同一個元素了。因此沒法獲取
</script>
<ul class="list2">
    <li><a href="">第0個</a></li>
    <li><a class="link" href="">第1個</a></li>
    <li><a href="">第2個</a></li>
    <li><a class="link" href="">第3個</a></li>
    <li><a href="">第4個</a></li>
</ul>
<script>
    // 在全部li元素中找出內部具備.link類名的元素
    // 可使用has
    console.log( $(".list2 li").has(".link") ); // 注意，這裏是返回元素
</script>
</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>第1個文本</p>
<p class="p2">第2個文本</p>
<div class="box">
    <p class="p3">第3個文本</p>
    <a href="">連接</a>
</div>
<a href="">連接</a>

<script>
    // 獲取div全部的兄弟元素
    // siblings 獲取當前元素的全部兄弟元素
    console.log( $(".box").siblings() );

    // 獲取div元素前面的全部兄弟元素
    // prevAll()
    console.log( $(".box").prevAll() );

    // 獲取div元素後面的全部兄弟元素
    // nextAll()
    console.log( $(".box").nextAll() );

    // 獲取div元素前面的一個兄弟元素
    console.log( $(".box").prev() );

    // 獲取div元素後面的一個兄弟元素
    // next() 下一個元素
    // next().next() 下2個元素
    console.log( $(".box").next() );

    // 獲取當前元素自身下標，可使用index();
    console.log( $(".box").index() );

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

View Code

　　　　七:選擇器的關係操做(下)ide

<!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>第1個文本</p>
<p class="p2">第2個文本</p>
<div class="box">
    <p class="p3">第3個文本
        <span>
            <a href="" class="move"></a>
        </span>
    </p>
    <a href="">連接</a>
</div>
<a href="">連接</a>
<script>
    // 獲取指定元素的父元素
    // parent()
    console.log( $(".box").parent() );
    console.log( $(".p3").parent().parent() );

    // 獲取指定元素的父系元素[爸爸、爺爺、太爺、祖宗]
    console.log( $(".p3").parents() );

    // 獲取指定元素的全部子元素
    console.log( $("body").children() );

    // 獲取指定元素的全部孫子元素
    console.log( $("body").children().children() );

    // 經過.box獲取內部的.move標籤
    // find 查找具備指定選擇器的子孫元素
    console.log( $(".box").find(".move") );
</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>
<img src="images/1.png" alt="">
<p>第1個文本</p>
<form action="">
    帳號：<input type="text" value="admin"><br>
    密碼：<input type="password" name="password" ><br>
</form>
<script>
    // 在獲取了jQuery結果之後，獲得的是一個類數組，若是要獲取數組成員第一個元素的內容。
    // 能夠經過html()來獲取或者修改內容

    // html網頁中只有雙標籤內容，單標籤只有屬性和值
    // html() 只能獲取雙標籤的內容
    console.log( $("p").html() );

    // html() 還能夠修改元素的內容，把要修改後的內容做爲參數傳入到html()方法中便可
    // 清空內容， 直接使用空白字符串
    $("p").html("<a href=''>新的一個文本</a>");

    // 表單元素就有值
    // val() 獲取表單元素的值
    console.log( $("input[type=text]").val() );

    // 修改表單元素的值
    $("input[type=password]").val("xiaoming");

    $("input[type=password]").val(""); // 若是要清空值，則使用空字符串


    // 獲取純文本內容，可使用 text()
    // 標籤代碼會被剔除
    console.log( $("body").text() );

</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>
    <img src="images/1.png" alt="">
    <p>第1個文本</p>
    <form action="">
        帳號：<input type="text" value="admin"><br>
        密碼：<input type="password" name="password" ><br>
        愛好：<input type="checkbox" name="love" value="qq">qq
              <input type="checkbox" name="love" value="bb">bb
              <input type="checkbox" name="love" value="ww">ww
    </form>

    <script>
        // 獲取元素指定屬性的值
        // 經過attr來獲取元素指定屬性的值
        console.log( $("img").attr("src") );

        // 設置元素指定屬性的值[設置單個屬性值]
        $("img").attr("src","images/2.png");

        // 設置多個屬性值
        // 參數是json對象，{鍵1:值,鍵2:值....}
        $("img").attr({"src":"2.png","alt":"這是一張圖片"})

        // 還能夠在修改屬性的時候，傳入匿名函數[擴展]
        $("img").attr("src",function(){
            let num = parseInt(Math.random()*2+1);
            return "images/"+num+".png";
        });

        // 針對在html元素中，有些元素的屬性和值是同名的.
        // checked="checked"
        // selected="selected"
        // disabled="disabled"
        // 在js中修改狀態均可以使用布爾值來處理
        $("input[name=love]").attr("checked",false);
    </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><input type="checkbox" name="love"></li>
    <li><input type="checkbox" name="love"></li>
    <li><input type="checkbox" name="love"></li>
    <li><input type="checkbox" name="love"></li>
    <li><input type="checkbox" name="love"></li>
    <li><input type="checkbox" name="love"></li>
</ul>
全選 <input type="checkbox" name="all">
反選 <input type="checkbox" name="rev">
<script>
// 綁定事件
// js          jQ                                   jQ簡寫]經常使用\
// onclick     $("控制器").click(function(){});     $("控制器").on("click",function(){})
// onchange    $("控制器").change(function(){});    $("控制器").on("change",function(){})

// 全選功能
$("input[name=all]").change(function(){
    // 若是在jQuery元素綁定的事件中，表示當前jQuery元素須要使用 $(this)
    // 而this表明的是當前事件的js元素，js元素沒法使用jQuery提供的方法
    if( $(this).prop("checked") == true ){
        // 若是當前全選狀態沒有被定義屬性checked，或者屬性checked的值不是true，則使用全選
        $("li input").prop("checked",true);
    }else{
        $("li input").prop("checked",false);
    }
});

// 反選[每一框原來沒有被選中的，改爲選擇，不然反之]
$("input[name=rev]").change(function(){
    $("li input").prop("checked",function(){
        console.log( $(this) ) // 這裏的 $(this) 表明的是 調用prop的對象
        console.log( $(this).prop("checked") ); // 獲取當前元素對象的checked值
        // 把當前元素的checked屬性取反，返回
        return !$(this).prop("checked");
    });
});
</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>
.first {
color: red;
font-size: 32px;
}
.last{
border: 1px solid blue;
background-color: orange;
}
.bg{
background-color: #aaaaaa;
}
</style>
</head>
<body>

// 設置元素的指定樣式[一個樣式]
$(".first").css("background-color","pink");
// 設置多個樣式
$(".first").next().css({
"background-color":"yellow",
"border":"1px solid red",
});

// 針對一次性設置多個樣式的狀況，jQuery還提供了 addClass 和 removeClass給咱們使用。
// eq(-1) 表示倒數，只有在jQuery中支持
$("ul li").eq(-1).addClass("last");

// 移除類名
$("ul li").eq(0).removeClass("first");
</script>

<button class="btn">開燈</button>
<script>
$(".btn").click(function(){
// 執行toggleClass的時候，當前元素若是有對應的類名，則被刪除
// 若是沒有，則自動添加
$("body").toggleClass("bg");
});
</script>
</body>
</html>

　　　　十二:jq的鏈式編程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>

    </style>
</head>
<body>

<ul>
    <li class="first">第1</li>
    <li>第2</li>
    <li>第3</li>
</ul>
<script>
    $(".first").css("color","red").css("font-size","32px");
    console.log( $(".first") );
    console.log( $(".first").css("color","red") );
    console.log( $(".first").css("color","red").css("font-size","32px") );

    console.log( $(".first").css("font-weight","blod").prop("title","提示文本").html("hello") );

    // 在對象每次調用自身方法的時候，若是返回值是本身當前對象，這種思想就是 鏈式編程
    // 使用原生的js來編寫一個對象，實現這種鏈式編程。

    let obj = {
        css:function(){
            console.log("執行了css");
            // 實現鏈式編程的核心就是 return 當前對象this
            return this;
        },
        html:function(){

            return this;
        }
    };

    console.log( obj.css().css().html() );
</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>
    <form action="">
        帳號：<input type="text" name="uname"><span></span><br>
        密碼：<input type="password" name="password"><br>
        確認密碼：<input type="password" name="password2"><br>
        <input type="submit" value="註冊">
    </form>
    <script>
        // 帳號只能6-10位長度
        // onblur
        $("input[name=uname]").on("blur",function(){
            // 獲取帳號值的長度    
            // $(this).val() // 表單值
            // console.log( $(this).val().length );
            unlen = $(this).val().length;
            if( unlen>6 && unlen < 10 ){
                // 合法
                $(this).next().html("帳號長度合法");
            }else{
                // 不合法
                $(this).next().html("帳號長度不合法");
            }
        });

        $("input[type=submit]").on("click", function(){
            // 獲取帳值
            let unlen = $("input[name=uname]").val().length
            if( unlen>6 && unlen < 10 ){
                // 合法
                $(this).next().html("帳號長度合法");
            }else{
                // 不合法
                $(this).next().html("帳號長度不合法");
                // 阻止表單提交
                return false;
            }
        });
    </script>
</body>
</html>

View Code

　　　　十四:事件操做hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
    .level2{
        display: none;
    }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">首頁</a></li>
        <li><a href="">商品列表</a>
            <ul class="level2">
                <li><a href="">皮鞋</a></li>
                <li><a href="">男裝</a></li>
                <li><a href="">皮衣</a></li>
            </ul>
        </li>
        <li><a href="">商品列表</a>
            <ul class="level2">
                <li><a href="">皮鞋</a></li>
                <li><a href="">男裝</a></li>
                <li><a href="">皮衣</a></li>
            </ul>
        </li>
    </ul>
    <script>
        console.log( $(".nav").children() );
        $(".nav").children().hover(function(){
            // 鼠標移入
            $(this).find(".level2").css("display","block");
        },function(){
            // 鼠標移出
            $(this).find(".level2").css("display","none");
        });
    </script>
</body>
</html>