??Jquery必備知識詳解??

第一部分：JQ是什么？
- 1.JQ的引入：
- - （1）第一種引入方式：網址引入！
  - （2）第二種引入方式：本地引入！
- 2.JQ的選擇器：
第二部分：基本使用
- 1.基本使用一
- 2.基本使用二
- 3.基本使用三
第三部分：操作樣式
第四部分：影片
- （1） hide（隱藏），show（顯示），slideToggle（取反）
- （2）深入講解—slideUp（向上），slideDown（向下），slideToggle（取反）
- （3）深入講解—fadeIn（淡入），fadeOut（淡出），fadeToggle（取反）
- - fadeTo（自定義）
- （4）深入講解—animate（影片），stop（停止），delay（延遲）

???????👇
👉🚔直接跳到末尾🚔👈 ——>領取專屬粉絲福利💖
?????????

?👻我又仔細想了想，HTML、CSS、JavaScript系列都做了，怎么能缺少Jquery呢？👻

?😬所以！本博主又加班加點產出了Jquery版本的入門級教程！！！😬

?😜在本篇博文中，本博主就帶領小伙伴們認真地學習一下Jquery~😜

請添加圖片描述

重點來啦！重點來啦！！💗💗💗 小伙伴們，快拿出你們的筆記本，開始上課啦！（要打起十足的精神哦~）

第一部分：JQ是什么？

什么是JQ？
JQ是JS寫的插件庫，說白了，就是一個js檔案，
JS和JQ的區別：
凡是用jq能實作的，js都能實作；js能實作的，jq卻不一定能實作，可以理解為js是jq他爹，爹會的比兒子多~
JQ的理念：
Write less,do more！

1.JQ的引入：

JQuery官方網址：https://www.bootcdn.cn/jquery/
進入JQ官網之后：
在這里插入圖片描述

我們選擇第二個或者第三個都可以，第一個和最后兩個只是JQ的部分，有些功能沒有，
第二個和第三個的區別：第二個是正常版；第三個是壓縮版，

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

（1）第一種引入方式：網址引入！

選擇第二個或者第三個兩個選項都可以，效果一樣!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的引入</title>
</head>
<body>

<!--第一種方法：網址引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    // $是JQ里面的代表符號
    $(function () {         //如果頁面彈出123，則證明引入JQ正常！
        alert(123)
    })
</script>

</body>
</html>

（2）第二種引入方式：本地引入！

直接將JQuery復制粘貼到本地保存即可!

<script src="本地的Jquery地址"></script>

2.JQ的選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的選擇器</title>
</head>
<body>

<p>我是一個段落標簽</p>

<script src="JQuery.js"></script>

<script>
    // JQ選擇器獲取元素的方法和CSS一模一樣！！！     固定格式：$("")  雙引號里面寫選擇器！！！
    $("p").click(function () {      //注意：JQ里的單擊事件是click，注意這個寫法和JS是有所不同的！
        alert("我出來了");
    });
</script>

</body>
</html>

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

第二部分：基本使用

（效果都很直觀，自己動手實操哦~一步步琢磨，有不懂的可以文末公眾號咨詢！）

1.基本使用一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的基本使用一</title>
</head>
<body>

<div>
    <p id="p1">我是段落</p>
    <p id="p2">我是段落666</p>
</div>

<script src="JQuery.js"></script>

<script>
    //                                       1.修改內容
    // JS的寫法
    var p = document.getElementById("p1");
    p.innerText = "我不是段落";
    // JQ的寫法
    $("#p1").text("我不是段落1");
    $("#p1").html("我就是段落2");

    //                                       2.JQ和JS相互轉換
    // JQ轉JS        $("#p1")是JQ的獲取元素；  .get([0])是將JQ轉換為JS；  innerText = "111"是使用JS方法，
    $("#p1").get([0]).innerText = "111";
    $("#p1")[1].innerText = "222";
    // JS轉JQ        先是JS的方法獲取元素；    $(p11)是將JS轉換為JQ；      text("123")是使用JQ方法，
    var p11 = document.getElementById("p1");
    $(p11).text("123");

    //                                       3.單擊事件
    // 如果不加下標，JQ可以同一時間給多個元素設定同一事件；下面代碼會給選中的兩個段落標簽都設定單擊事件；但是JS就不行，需要加下標！
    // 如果只想選中段落標簽里的某一個，那就加下標  .eq(下標)     加在獲取元素之后，  即$("p")之后！
    $("p").click(function () {
        alert(456);
    });

    //                                       4.滑鼠滑入滑出事件
    $("#p1").hover(function () {
        $("#p1").text(111);
    },function () {            //如果只寫第一個函式，就只是滑鼠滑入事件；兩個都寫，就是滑入滑出事件，
        $("#p1").text(222);
    });

    //                                       5.追加和添加       注意：這是加到p1標簽里面，是p1的子元素！！！
    $("#p1").append("<p>111</p>");          //追加     后綴
    $("#p1").prepend("<p>222</p>");         //添加     前綴

    //                                       6.前和后           注意：這里加之后是p1的同級標簽，是p1的兄弟元素，
    $("#p1").after("<p>333</p>");
    $("#p1").before("<p>444</p>");

    //                                       7.清空           清空所選元素里面的所有東西（包括文本內容和標簽）
    $("div").empty();

    //                                       8.移除           清空所有，包括自己本身以及其內所有東西！
    $("div").remove();

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

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

2.基本使用二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的基本使用二</title>

    <style>
        div{
            width: 1200px;
            height: 1200px;
        }
    </style>

</head>
<body>

<div>
    <p id="p1">我是段落1</p>
    <p id="p2">我是段落2</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<script src="JQuery.js"></script>

<script>

            // 操作標簽屬性
            // 第一部分：自定義屬性
    // 1.增加屬性
    $("div").attr("id","div1");
    // 2.改變屬性
    $("div").attr("id","div2");
    // 3.洗掉屬性
    $("div").removeAttr("id");
    // 4.查
    console.log($("div").attr("id"));
            // 第二部分：合法屬性
    // 1.增加屬性
    $("div").addClass("div1");
    // 要注意：常規的如果增加重復標簽屬性就是變相的改，但是此處不是改，仍然是增，一個class可以對應多個值！！！
    $("div").addClass("div2");
    // 2.修改屬性       得先刪然后增，變相的改！
    $("div").removeClass("div1").addClass("div2");
    // 3.洗掉屬性
    $("div").removeClass("div2");
    // 查
    console.log($("div").hasClass("div2"));
    // 注意：如果只是洗掉屬性，那么只是洗掉了屬性對應的屬性值，屬性名還會存在
    $("div").removeClass("div2");       //就像這樣，刪的不徹底哎，所以用下面的移除方法：
    $("div").removeAttr("class");       //這樣就洗掉的很徹底了！ 屬性名也沒了！

            // 遍歷
    $("li").each(function () {
        alert($(this).text());                //this代表當前元素，
    });

            //索引                獲取當前文本的下標！
    $("li").click(function () {
        alert($(this).index());
    });

            //滾動條事件         scroll()里面寫函式，當網頁的滾動條發生變化時，執行其內的函式！
    $(window).scroll(function () {
        console.log("頂部："+$(document).scrollTop());         //彈出滾動條相對于瀏覽器頂部的偏移
        console.log("左邊："+$(document).scrollLeft());        //彈出滾動條相對于瀏覽器左邊的偏移
    })

</script>

</body>
</html>

3.基本使用三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的基本使用三</title>

    <style>
        div{
            position: relative;
        }
    </style>

</head>
<body>

<div>
    <p id="p1">我是段落1 </p>
    <p id="p2">我是段落2 </p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button id="btn1">移除事件</button>
</div>

<script src="JQuery.js"></script>

<script>
            // 查找父元素
    console.log($("#p1").parent());      //div
            // 查找子元素
    console.log($("div").children());
            // 查找兄弟元素
    console.log($("#p1").siblings());
            // 查找后代元素  必須要指明要查找的是哪個后代，不然查找不到哦！
    console.log($("div").find("p"));
            //查找祖先元素
    console.log($("div").parents());      //body  html

            // 定位父級（絕對定位，參考物件是設定了定位的父級，沒有即為瀏覽器）   當前元素距離它父級的位置，單位是px
    var box = $("#p1").position();    //id為p1的標簽的父級是div，而且我們給div設定了定位，所以絕對定位參考物件是div，
    console.log(box.left);            //0px
    console.log(box.top);             //-16px
            //定位視窗            相對于當前檔案偏移的坐標！        注意：如果定位父級的父級沒有設定定位，那么這兩個定位效果一樣！
    var box1 = $("div").offset();
    console.log(box1.left);           //8
    console.log(box1.top);            //16

            // 寬高
    console.log($("div").width());
    console.log($("div").height());

            // 回圈添加    添加的是事件
    $("p").on("click",function () {
        $(this).css("background-color","red");      //.css是JQ里設定樣式的方法
    });
            //移除         移除的也是事件，注意：移除的是后續的事件，
    //比如：下面是通過點擊按鈕移除上面的回圈添加事件，在沒有點擊按鈕之前事件可以執行，如果點擊按鈕，也只是后續事件，
    //再點擊按鈕之后事件不能實作，但是之前實作的事件仍存在！
    $("#btn1").click(function () {
        $("p").off("click");
    });

</script>

</body>
</html>

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

第三部分：操作樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ操作樣式</title>
</head>
<body>

<div>
    <p id="p1">我是段落1 </p>
    <p id="p2">我是段落2 </p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button id="btn1">單個樣式添加</button>
    <button id="btn2">多個樣式添加</button>
</div>

<script src="JQuery.js"></script>

<script>

    // 單個樣式的操作方法
    $("#btn1").click(function () {
        $("div").css("color","red");
    });

    // 多個樣式的操作方法
    $("#btn2").click(function () {
        $("div").css({
            "width":300,        //注意：不同樣式間逗號隔開；寬高之類的默認單位是px，如果加px，需要雙引號括住！！！
            "height":400,
            "border":"3px solid bule",
            "color":"red",
        });
    });

</script>

</body>
</html>

第四部分：影片

（效果很明顯，實操一步步琢磨琢磨~）

（1） hide（隱藏），show（顯示），slideToggle（取反）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影片</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>

<div></div>

<script src="JQuery.js"></script>

<script>

           //隱藏(向上隱藏)                都可在括號里加時間，單位是ms！
   $("#btn1").click(function () {
       $("div").hide(1000);
   });
           //顯示（向下顯示）
   $("#btn2").click(function () {
       $("div").show();
   });

              //取反
   $("#btn3").click(function () {
       $("div").show();
       $("div").slideToggle();          //取反，向下顯示取反即向上隱藏
   });

</script>

</body>
</html>

（2）深入講解—slideUp（向上），slideDown（向下），slideToggle（取反）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影片</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>

<div></div>

<script src="JQuery.js"></script>

<script>


           // 向上隱藏
   $("#btn1").click(function () {
       $("div").slideUp();
   });
           //向下顯示
   $("#btn2").click(function () {
       $("div").slideDown();
   });

           // 取反操作
   $("#btn3").click(function () {
       $("div").slideDown();
       $("div").slideToggle();         //取反，向下顯示取反即是向上隱藏；同理：向上隱藏取反即是向下顯示！！！
   });

</script>

</body>
</html>

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

（3）深入講解—fadeIn（淡入），fadeOut（淡出），fadeToggle（取反）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影片</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>

<div></div>

<script src="JQuery.js"></script>

<script>

           //淡出
   $("#btn1").click(function () {
       $("div").fadeOut();
   });
           //淡入
   $("#btn2").click(function () {
       $("div").fadeIn();
   });
           //取反
   $("#btn3").click(function () {
       $("div").fadeOut();
       $("div").fadeToggle(1000);      //取反，淡出取反即是淡入；淡入取反即是淡出！！！
   });

</script>

</body>
</html>

fadeTo（自定義）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>

<div></div>

<script src="JQuery.js"></script>

<script>

           //自定義
   $("#btn1").click(function () {
       $("div").fadeTo(2000,0.1);      //默認是全顯示狀態，即為1，可調節范圍是：0到1，
   });
   $("#btn2").click(function () {
       $("div").fadeTo(2000,0.8);
   });

</script>

</body>
</html>

（4）深入講解—animate（影片），stop（停止），delay（延遲）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影片</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>

<div></div>

<script src="JQuery.js"></script>

<script>

         //影片
    $("#btn1").click(function () {
        $("div").animate({              //如果不給設定影片的元素設定定位，那這個元素默認是靜態定位，設定影片只會進行元素本身的
            width:500,                  //變化，如果想讓元素發生移位，就需要給設定影片的元素設定定位！！！
            height:500
        },2000).delay(3000)            //2000是以多長時間完成這個影片；
    });                                //delay是延遲，在影片途中如果執行停止，再繼續執行這個事件，那么就會執行延遲！
            //停止
    $("#btn2").click(function () {
        $("div").stop();
    })

</script>

</body>
</html>

👇🏻可通過點擊下面——>關注本人運營 公眾號👇🏻

公眾號后臺回復【Jquery筆記】，可得本文MD原文筆記~ 【可以公眾號里私聊并標明來自CSDN，會拉你進入技術交流群（群內涉及各個領域大佬級人物，任何問題都可討論~）--->互相學習&&共同進步（非誠勿擾）】

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/404185.html

標籤：其他

上一篇：pandas使用pad函式向dataframe特定資料列的每個字串添加后置（后綴）補齊字符或者字串、向所有字串的右側填充、直到寬度達到指定要求（right padding）

下一篇：golang語言 map全方位介紹【圖文+代碼】

【前端】Jquery詳細教程

??Jquery必備知識詳解??

第一部分：JQ是什么？

1.JQ的引入：

（1）第一種引入方式：網址引入！

（2）第二種引入方式：本地引入！

2.JQ的選擇器：

第二部分：基本使用

1.基本使用一

2.基本使用二

3.基本使用三

第三部分：操作樣式

第四部分：影片

（1） hide（隱藏），show（顯示），slideToggle（取反）

（2）深入講解—slideUp（向上），slideDown（向下），slideToggle（取反）

（3）深入講解—fadeIn（淡入），fadeOut（淡出），fadeToggle（取反）

fadeTo（自定義）

（4）深入講解—animate（影片），stop（停止），delay（延遲）