JQuery學習記錄

JQuery概述

什麼是JQuery？

jQuery，顧名思義，也就是 JavaScript 和查詢（Query），它就是輔助 JavaScript 開發的 js 類庫。

JQuery核心思想

它的核心思想是 write less,do more(寫得更少,做得更多)，所以它實現了很多瀏覽器的相容問題。

JQuery流行程度

jQuery 現在已經成為最流行的 JavaScript 庫，在世界前 10000 個訪問最多的網站中，有超過 55%在使用jQuery。

jQuery 好處

jQuery 是免費、開源的， jQuery 的語法設計可以使開發更加便捷，例如操作文件物件、選擇 DOM 元素、製作動畫效果、事件處理、使用 Ajax 以及其他功能。

JQuery初體驗

需求：使用 jQuery 給一個按鈕繫結單擊事件?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery初體驗</title>
    <!--引入jquery檔案-->
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function() {
           $("#one").click(function() {
               alert("使用JQuery給一個按鈕繫結單擊事件");
           });
        });
    </script>
</head>
<body>
    <button id="one">你真還好嗎？</button>
</body>
</html>

JQuery核心函式

$ 是 jQuery 的核心函式，能完成 jQuery 的很多功能。 $()就是呼叫$這個函式

傳入引數為 [ 函式 ] 時：
表示頁面載入完成之後。相當於 window.onload = function(){}
傳入引數為 [ HTML 字串 ] 時：
會對我們建立這個 html 標籤物件
傳入引數為 [ 選擇器字串 ] 時：
$(“#id 屬性值”); id 選擇器，根據 id 查詢標籤物件
$(“標籤名”); 標籤名選擇器，根據指定的標籤名查詢標籤物件
$(“.class 屬性值”); 型別選擇器，可以根據 class 屬性查詢標籤物件
傳入引數為 [ DOM 物件 ] 時：
會把這個 dom 物件轉換為 jQuery 物件

jQuery 物件和 dom 物件區分

什麼是 jQuery 物件？什麼是 dom 物件？

DOM物件

透過 getElementById()查詢出來的標籤物件是 Dom 物件
透過 getElementsByName()查詢出來的標籤物件是 Dom 物件
透過 getElementsByTagName()查詢出來的標籤物件是 Dom 物件
透過 createElement() 方法建立的物件，是 Dom 物件

DOM 物件 Alert 出來的效果是： [object HTML 標籤名 Element]

JQuery物件

透過 JQuery 提供的 API 建立的物件，是 JQuery 物件
透過 JQuery 包裝的 Dom 物件，也是 JQuery 物件
透過 JQuery 提供的 API 查詢到的物件，是 JQuery 物件

jQuery 物件 Alert 出來的效果是： [object Object]

jQuery 物件的本質是什麼？

jQuery 物件是 dom 物件的陣列 + jQuery 提供的一系列功能函式。

jQuery 物件和 Dom 物件使用區別

jQuery 物件不能使用 DOM 物件的屬性和方法
DOM 物件也不能使用 jQuery 物件的屬性和方法

Dom 物件和 jQuery 物件互轉

dom 物件轉化為 jQuery 物件

將DOM物件傳入$()中即可

jQuery 物件轉為 dom 物件

jQuery 物件[下標]取出相應的 DOM 物件

jQuery 選擇器

基本選擇器

#id屬性值：id選擇器，根據 id 查詢標籤物件
.class屬性值：類選擇器，根據 class 查詢標籤物件
element標籤名：標籤選擇器，根據標籤名查詢標籤物件
*：星選擇器，表示任意的，所有的元素
selector1, selector2：組合選擇器，合併選擇器 1，選擇器 2 的結果並返回

演示

// 選擇id="lastname" 的元素
$("#lastname")

// 選擇class="intro" 的所有元素
$(".intro");

//選擇所有 <p> 元素
$("p");

// 選擇所有 <h1>、<div> 和 <p> 元素
$("h1, div, p");

層級選擇器

ancestor descendant：後代選擇器，在給定的祖先元素下匹配所有的後代元素
parent > child：子元素選擇器，在給定的父元素下匹配所有的子元素
prev + next：鄰居元素選擇器，匹配所有緊接在 prev 元素後的 next 元素
prev ~ siblings：兄弟元素選擇器，匹配 prev 元素之後的所有 siblings 元素

演示

// 選擇<form>中的所有後代<input>元素
$("form input");

//選擇<form>中的僅子代<input>元素
$("form > input");

//選擇<div>之後的一個同級<span>元素
$("div + span");

//選擇<a>之後所有的同級<button>元素
$("a ~ button");

基本過濾選擇器

:first：獲取第一個元素
:last：獲取最後一個元素
:not(selector)：去除所有與給定選擇器匹配的元素
:even：匹配所有索引值為偶數的元素，從 0 開始計數
:odd：匹配所有索引值為奇數的元素，從 0 開始計數
:eq(index)：匹配一個給定索引值的元素
:gt(index)：匹配所有大於給定索引值的元素
:lt(index)：匹配所有小於給定索引值的元素
:header：匹配如 h1, h2, h3 之類的標題元素
:animated：匹配所有正在執行動畫效果的元素

演示

//選擇第一個<input>元素
$("input:first");

//選擇最後一個<a>元素
$("a:last");

//所有不為空的輸入元素
$("input:not(:empty)");

//所有偶數 <tr> 元素，索引值從 0 開始，第一個元素是偶數 (0)，第二個元素是奇數 (1)，以此類推。
$("tr:even");

//所有奇數 <tr> 元素，索引值從 0 開始，第一個元素是偶數 (0)，第二個元素是奇數 (1)，以此類推。
$("tr:odd");

//列表中的第四個元素（index 值從 0 開始）
$("ul li:eq(3)");

//列舉 index 大於 3 的元素
$("ul li:gt(3)");

//所有標題元素 <h1>, <h2> ...
$(":header");

//所有動畫元素
$(":animated");

內容過濾器

:contains("text")：匹配包含給定文字的元素
:empty：匹配所有不包含子元素或者文字的空元素
:parent：匹配含有子元素或者文字的元素
:has(selector)：匹配含有選擇器所匹配的元素的元素
:hidden：匹配所有不可見元素 display:none 或 input type=hidden

演示

//所有包含文字 "Hello" 的元素
$(":contains('Hello')");

//所有不為空的輸入元素
$("input:not(:empty)");

//匹配所有含有子元素或者文字的父元素。
$(":parent");

//所有包含有 <p> 元素在其內的 <div> 元素
$("div:has(p)");

//所有隱藏的 <p> 元素
$("p:hidden");

屬性過濾器

[attribute]：匹配包含給定屬性的元素
[attribute=value]：匹配給定的屬性是某個特定值的元素
[attribute!=value]：匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
[attribute^=value]：匹配給定的屬性是以某些值開始的元素
[attribute$=value]：匹配給定的屬性是以某些值結尾的元素
[attribute|=value]：選取每個帶有指定屬性的元素，該元素的值等於指定字串（比如 "en"）或以該字串後跟連線符作為開頭的字串（比如 "en-us"）
[attribute*=value]：匹配給定的屬性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]：複合屬性選擇器，需要同時滿足多個條件時使用

演示

//所有帶有 href 屬性的元素
$("[href]");

//所有帶有 href 屬性且值等於 "default.htm" 的元素
$("[href='default.htm']");

//所有帶有 href 屬性且值不等於 "default.htm" 的元素
$("[href!='default.htm']");

//所有帶有 title 屬性且值以 "Tom" 開頭的元素
$("[title^='Tom']");

//所有帶有 href 屬性且值以 ".jpg" 結尾的元素
$("[href$='.jpg']");

//所有帶有 title 屬性且值等於 'Tomorrow' 或者以 'Tomorrow' 後跟連線符作為開頭的字串
$("[title|='Tomorrow']");

//所有帶有 title 屬性且值包含字串 "hello" 的元素
$("[title*='hello']");

//帶有 id 屬性，並且 name 屬性以 man 結尾的輸入框
$( "input[id][name$='man']" );

表單過濾器

:input：匹配所有 input, textarea, select 和 button 元素
:text：匹配所有的文字輸入框
:password：匹配所有的密碼輸入框
:radio：匹配所有的單選框
:checkbox：匹配所有的核取方塊
:submit：匹配所有提交按鈕
:image：匹配所有 img 標籤
:reset：匹配所有重置按鈕
:button：匹配所有 input type=button 按鈕
:file：匹配所有 input type=file 檔案上傳框

演示

//所有 input 元素
$(":input");

//所有帶有 type="text" 的 input 元素
$(":text");

//所有帶有 type="password" 的 input 元素
$(":password");

//所有帶有 type="radio" 的 input 元素
$(":radio");

//所有帶有 type="checkbox" 的 input 元素
$(":checkbox");

//所有帶有 type="submit" 的 input 元素
$(":submit");

//所有帶有 type="image" 的 input 元素
$(":image");

//所有帶有 type="reset" 的 input 元素
$(":reset");

//所有帶有 type="button" 的 input 元素
$(":button");

//所有帶有 type="file" 的 inpu
$(":file");

表單物件屬性過濾器

:enabled：匹配所有可用元素
:disabled：匹配所有不可用元素
:checked：匹配所有選中的單選，複選，和下拉選單中選中的 option 標籤物件
:selected：匹配所有選中的 option

演示

//所有啟用的元素
$(":enabled");

//所有禁用的元素
$(":disabled");

//所有選中的核取方塊選項
$(":checked");

//所有選定的下拉選單元素
$(":selected");

JQuery元素篩選

eq(index)：獲取給定索引的元素（功能與:eq(index)一致）
first()：獲取第一個元素（功能與:first一致）
last()：獲取最後一個元素（功能與:last一致）
filter(exp)：留下匹配的元素
is(exp)：判斷是否匹配給定的選擇器，只要有一個匹配就返回， true
has(exp)：返回包含有匹配選擇器的元素的元素（功能與:has(selector)一致
not(exp)：刪除匹配選擇器的元素（功能與:not(selector)一致）
children(exp)：返回匹配給定選擇器的子元素（功能與:parent > child一致）
find(exp)：返回匹配給定選擇器的後代元素（功能與ancestor descendant一致）
next()：返回當前元素的下一個兄弟元素（功能與prev + next一致）
nextAll()：返回當前元素後面所有的兄弟元素（功能與prev ~ siblings一致）
nextUntil()：返回當前元素到指定匹配的元素為止的後面元素
parent()：返回父元素
prev(exp)：返回當前元素的上一個兄弟元素
prevAll()：返回當前元素前面所有的兄弟元素
prevUnit(exp)：返回當前元素到指定匹配的元素為止的前面元素
siblings(exp)：返回所有兄弟元素
add()：把 add 匹配的選擇器的元素新增到當前 jquery 物件中

JQuery的屬性操作

html()：它可以設定和獲取起始標籤和結束標籤中的內容
text()：它可以設定和獲取起始標籤和結束標籤中的文字
val()：它可以設定和獲取表單項的 value 屬性值，還可以操作單選、複選、下拉選單的勾選
attr()：可以設定和獲取屬性的值，還可以新增自定義的屬性、屬性值（但不推薦操作 checked、 readOnly、 selected、 disabled 等等）
prop()：可以設定和獲取屬性的值（只推薦操作 checked、 readOnly、 selected、 disabled 等等）

//獲取id='one'的<div>元素中的html內容
$("div[id='one']").html();

//設定id='one'的<div>元素中的html內容
$("div[id='one']").html("<span>我是王多魚</span>");//頁面效果為：我是王多魚

//獲取id='two'的<div>元素中的text內容
$("div[id='two']").text();

//設定id='two'的<div>元素中的text內容
$("div[id='two']").text("<span>我是王多魚</span>");//頁面效果為：<span>我是王多魚</span>

//獲取id='three'且type='text'的<input>的value值
$(":text[id='three']").val();

//設定id='three'且type='text'的<input>的value值
$(":text[id='three']").val("HelloWorld");

//操作單選、複選、下拉選單的勾選
$(".radio,.checkbox,#single,#multiple").val(["man","game","Japanese","male","female"]);

//獲取第一個核取方塊的name屬性值
$(":checkbox:first").attr("name");

//設定最後一個核取方塊的name屬性值
$(":checkbox:last").attr("name","hobbies");

//為第一個核取方塊新增自定義的love='never'屬性值
$(":checkbox:first").attr("love","never");

//獲取索引為0的單選框的選中狀態
$(":radio:eq(0)").prop("checked");

//設定索引為1的單選框的選中狀態
$(":radio:eq(1)").prop("checkbox","true");

案例-JQuery全選/全不選

案例要求

要求實現全選/全不選、全選、全不選、反選、提交按鈕的功能。

案例實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise</title>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //給全選按鈕繫結單擊事件
            $("#checkAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            });
            //給全不選按鈕繫結單擊事件
            $("#checkNotAllBtn").click(function () {
                $(":checkbox").prop("checked", false);
            });
            //給反選繫結按鈕單擊事件
            $("#invert").click(function () {
                //遍歷每個name='sport'核取方塊的勾選狀態
                $(":checkbox[name='sport']").each(function () {
                    //進行反選
                    this.checked = !this.checked;
                });
                //全部name='sport'核取方塊的個數
                let $allNum = $(":checkbox[name='sport']").length;
                //已經勾選的name='sport'核取方塊個數
                let $checkedNum = $(":checkbox[name='sport']:checked").length;
                //判斷全選/全不選按鈕選取狀態
                $("#checkAllBox").prop("checked", $allNum === $checkedNum);
            });
            //給提交按鈕繫結單擊事件
            $("#submit").click(function () {
                //建立儲存已選中按鈕value值的陣列
                let checkedValue = [];
                //遍歷name='sport'的已選中核取方塊
                $(":checkbox[name='sport']:checked").each(function () {
                    //獲取value值，並放入陣列
                    checkedValue.push(this.value);
                });
                //彈出value值陣列
                alert(checkedValue);
            });
            //給全選/全不選按鈕繫結單擊事件
            $("#checkAllBox").click(function () {
                //透過全選/全不選按鈕的選中狀態給所有name='sport'的核取方塊選中狀態賦值
                $(":checkbox[name='sport']").prop("checked",this.checked);
            });
            //手動全選name='sport'核取方塊，全選/全不選核取方塊也要自動選中
            $(":checkbox[name='sport']").click(function(){
                //獲取全部name='sport'核取方塊數量
                let $allSport = $(":checkbox[name='sport']").length;
                //獲取全部已選中的name='sport'核取方塊數量
                let $allChecked = $(":checkbox[name='sport']:checked").length;
                //判斷全選/全不選checked狀態
                $("#checkAllBox").prop("checked",$allSport === $allChecked);
            });
        });
    </script>
</head>
<body>
<form method="post" action="">
    <span>What's your favorite sport?</span>
    <input type="checkbox" id="checkAllBox"/>全選/全不選
    <br/>
    <input type="checkbox" name="sport" value="football"/>football
    <input type="checkbox" name="sport" value="basketball"/>basketball
    <input type="checkbox" name="sport" value="badminton"/>badminton
    <input type="checkbox" name="sport" value="tableTennis"/>tableTennis
    <br/>
    <input type="button" id="checkAllBtn" value="全選"/>
    <input type="button" id="checkNotAllBtn" value="全不選"/>
    <input type="button" id="invert" value="反選"/>
    <input type="button" id="submit" value="提交"/>
</form>
</body>
</html>

DOM物件的增刪改

內部插入

appendTo()：例如a.prependTo(b)，把 a 插入到 b 子元素末尾，成為最後一個子元素
prependTo()：例如a.prependTo(b)，把 a 插到 b 所有子元素前面，成為第一個子元素

外部插入

insertAfter()：例如a.insertAfter(b)，把 a 插到 b 後面，成為同級一元素
insertBefore()：例如a.insertBefore(b)，把 a 插到 b 前面，成為同級一元素

替換

replaceWith()：例如a.replaceWith(b)，用b替換掉所有a
replaceAll()：例如a.replaceAll(b)，用a替換掉所有b

刪除

remove()：例如a.remove()，刪除a標籤
empty()：例如a.empty()，清空a標籤裡的內容

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM物件增刪改</title>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function(){
            //建立一個DOM物件，並新增class='one'的div中的最後面
            $("<p>原來我也是一個Joker</p>").appendTo($("div[class='one']"));
            //建立一個DOM物件，並新增class='one'的div中的最前面
            $("<a>www.pornhub.com</a><br/>").prependTo($("div[class='one']"));
            //建立一個DOM物件，並新增class='one'的div外的最前面
            $("<img src=\"\" alt=\"騙你的，其實沒有圖片\"/>").insertBefore($("div[class='one']"));
            //建立一個DOM物件，並新增class='one'的div外的最後面
            $("<ol>什麼情況啊！你！</ol>").insertAfter($("div[class='one']"));
            //前替換所有後
            $("    <form>\n" +
                "        <span>裝逼犯姓名：</span>\n" +
                "        <input type=\"text\"/>\n" +
                "    </form>").replaceAll($("div[class='two']"));
            //後替換所有前
            $("div[class='three']").replaceWith("<p>別叫了，行不行啊！</p>");
            //刪除指定DOM物件
            $("div[class='four']:first").remove();
            //清楚指定DOM物件中的內容
            $("div[class='four']:first").empty();
        });
    </script>
</head>
<body>
    <div class="one">
        <span>嚴老闆都已經拉了誇，你是真小丑！</span>
    </div>
    <div class="two">
        <span>不是，我都不知道，你在裝什麼？</span>
    </div>
    <div class="two">
        <span>你就是一個因溜狗！</span>
    </div>
    <div class="three">
        都太經典了，你知道不？
    </div>
    <div class="three">
        龍哥的S6第一個王者，韓晶亮你懂不懂啊！
    </div>
    <div class="four">
        上路被三人越塔！打野都不在，我為什麼要去啊！
        不是，不是抬槓！你來告訴我，打野都不在，我為什麼要去！
    </div>
    <div class="four">
        來，這個叫尊尼獲加的臭JB鋼筋！我給你房管來，來你給我說話！
        你說不明白，明天你媽出門被車撞死！
    </div>
</body>
</html>

案例-從左到右，從右到左

案例要求

做出兩個下拉選單，再做出四個按鈕。按鈕的功能分別為：新增選中項到右邊、新增全部項到右邊、新增選中項到左邊、新增全部項到左邊。

案例實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>從左到右，從右到左</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        select {
            width: 100px;
            height: 140px;
        }

        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            //實現"新增選中項到右邊"按鈕功能
            $("button:eq(0)").click(function () {
                $("select:eq(0) > option:selected").appendTo($("select:eq(1)"));
            });
            //實現"新增全部項到右邊"按鈕功能
            $("button:eq(1)").click(function () {
                $("select:eq(0) > option").appendTo($("select:eq(1)"));
            });
            //實現"新增選中項到左邊"按鈕功能
            $("button:eq(2)").click(function () {
                $("select:eq(1) > option:selected").appendTo($("select:eq(0)"));
            });
            //實現"新增全部項到左邊"按鈕功能
            $("button:eq(3)").click(function () {
                $("select:eq(1) > option").appendTo($("select:eq(0)"));
            });
        });
    </script>
</head>
<body>
<div id="left">
    <select multiple="multiple" name="sel01">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        <option value="four">four</option>
        <option value="five">five</option>
        <option value="six">six</option>
        <option value="seven">seven</option>
        <option value="eight">eight</option>
    </select><br/>
    <button>新增選中項到右邊</button>
    <button>新增全部項到右邊</button>
</div>
<div id="right">
    <select multiple="multiple" name="sel02"></select><br/>
    <button>新增選中項到左邊</button>
    <button>新增全部項到左邊</button>
</div>
</body>
</html>

案例-表格的動態新增、刪除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態新增、刪除表格記錄</title>
    <style>
        #employeeTable {
            border-spacing: 1px;
            background-color: black;
            margin: 80px auto 10px auto;
        }

        th, td {
            background-color: white;
        }

        #formDiv {
            width: 250px;
            border-style: solid;
            border-width: 1px;
            margin: 50px auto 10px auto;
            padding: 10px;
        }

        #formDiv input {
            width: 100%;
        }

        .word {
            width: 40px;
        }

        .inp {
            width: 200px;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //Delete函式
            let deleteFun = function () {
                //獲取被刪除表格行物件
                let $trObj = $(this).parent().parent();
                //獲取被刪除表格行name
                let name = $trObj.find($("td:first")).text();
                //使用者確認刪除
                if (confirm("確定刪除[" + name + "]使用者？")) {
                    $trObj.remove();
                }
                //阻止a標籤的預設跳轉
                return false;
            };
            //實現提交按鈕功能
            $("#addEmpButton").click(function () {
                //獲取輸入框中 姓名、郵箱、工資的內容
                let name = $(":text[name='empName']").val();
                let email = $(":text[name='email']").val();
                let salary = $(":text[name='salary']").val();
                //建立一個新的表格行，將資料新增進去
                let $newTrObj = $("    <tr>" +
                    "        <td>"+name+"</td>" +
                    "        <td>"+email+"</td>" +
                    "        <td>"+salary+"</td>" +
                    "        <td><a href=\"deleteEmp?id=new\">Delete</a></td>" +
                    "    </tr>");
                //將新的表格行新增進員工表格中
                $newTrObj.appendTo($("#employeeTable"));
                //與新新增的表格行繫結Delete事件
                $newTrObj.find("a").click(deleteFun);
            });
            //實現Delete<a>標籤功能
            $("a").click(deleteFun);
        });
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>Delete</th>
    </tr>
    <tr>
        <td>Jason</td>
        <td>your_email@example.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>your_email@example.com</td>
        <td>6000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bernardo</td>
        <td>your_email@example.com</td>
        <td>7000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <h4>新增新員工</h4>
    <table>
        <tr>
            <td class="word">name</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

JQuery操作CSS樣式

addClass()：新增樣式
removeClass()：刪除樣式
toggleClass()：樣式存在即刪除，不存在即新增
offset()：獲取和設定元素的座標位置
- 屬性：top 和 left，分別為到dom頂的距離、和到dom左的距離。
在設定offset()時，必須傳入鍵值對資料。如offset({left:100,top:100})

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css樣式操作</title>
    <style>
        div {
            width: 100px;
            height: 260px;
        }

        div.yellowBorder {
            border: 2px yellow solid;
        }

        div.redDiv {
            background-color: red;
        }

        div.blueBorder {
            border: 5px blue solid;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //實現addClass()按鈕功能
            $(":button[value='addClass()']").click(function () {
                $("div.border").addClass("redDiv yellowBorder");
            });
            //實現removeClass()按鈕功能
            $(":button[value='removeClass()']").click(function () {
                $("div.border").removeClass("redDiv");
            });
            //實現toggleClass()按鈕功能
            $(":button[value='toggleClass()']").click(function () {
                $("div.border").toggleClass("blueBorder");
            });
            //實現offset()按鈕的獲取功能
            $(":button[value='offset()01']").click(function () {
                let leftNum = $("div.border").offset().left;
                let topNum = $("div.border").offset().top;
                alert("left: "+leftNum+"    top: "+topNum);
            });
            //實現offset()按鈕的設定功能
            $("#btn05").click(function () {
                let $offset = $("div.border").offset({
                    top: 100,
                    left: 100
                });
            });
        });
    </script>
</head>
<body>
<table align="center">
    <tr>
        <!--空白元素，以便測試css樣式-->
        <td>
            <div class="border"></div>
        </td>
        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01"/>
                <input type="button" value="removeClass()" id="btn02"/>
                <input type="button" value="toggleClass()" id="btn03"/>
                <input type="button" value="offset()01" id="btn04"/>
                <input type="button" value="offset()02" id="btn05"/>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

JQuery操作動畫

基本動畫

show()：將隱藏的元素顯示
hide()：將可見的元素隱藏
toggle()：可見則隱藏，不可見則顯示=

淡入淡出動畫

fadeIn()：淡入（慢慢可見）
fadeOut()：淡出（慢慢消失）
fadeTo()：在指定時長內慢慢的將透明度修改到指定的值。 0 透明， 1 完成可見， 0.5 半透明（此方法較為特殊，第二個引數為透明度，第三個方法才為回撥函式）
fadeToggle()：淡入則切換為淡出，淡出則切換為淡入

上述所有方法都可以新增兩個引數：
引數一，動畫執行的時長
引數二，動畫的回撥函式

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery操作動畫演示</title>
    <style>
        #tableClass {
            border: 1px solid;
            border-collapse: collapse;
            float: left;
        }
        #divClass {
            border: 1px solid;
            float: left;
            width: 300px;
            height: 200px;
            background-color: #0044DD;
        }
        table, td {
            border: 1px solid;
            border-collapse: collapse;
        }
    </style>
    <script src="../javascript/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            //實現'隱藏hide()'按鈕功能
            $("#btn01").click(function () {
                $("#divClass").hide(2000,function () {
                    alert("隱藏hide()動畫執行完成");
                });
            });
            //實現'顯示show()'按鈕功能
            $("#btn02").click(function () {
                $("#divClass").show(2000, function () {
                    alert("顯示show()動畫執行完成");
                });
            });
            //實現'切換顯示/隱藏toggle()'按鈕功能
            $("#btn03").click(function () {
                $("#divClass").toggle(3000, function () {
                    alert("切換顯示/隱藏toggle()動畫執行完成");
                });
            });
            //實現'淡出fadeOut()'按鈕功能
            $("#btn04").click(function () {
                $("#divClass").fadeOut(1000, function () {
                    alert("淡出fadeOut()動畫執行完成");
                });
            });
            //實現'淡入fadeIn()'按鈕功能
            $("#btn05").click(function () {
                $("#divClass").fadeIn(2000, function () {
                    alert("淡入fadeIn()動畫執行完成");
                });
            });
            //實現'切換淡出/淡入fadeToggle()'按鈕功能
            $("#btn06").click(function () {
                $("#divClass").fadeToggle(1000, function () {
                    alert("切換淡出/淡入fadeToggle()動畫執行完成");
                });
            });
            //實現'淡化到fadeTo()'按鈕功能
            $("#btn07").click(function () {
                $("#divClass").fadeTo(3000, 0.5, function () {
                    alert("淡化到fadeTo()動畫執行完成");
                });
            });
        });
    </script>
</head>
<body>
<table id="tableClass">
    <tr>
        <td>
            <button id="btn01">隱藏hide()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn02">顯示show()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn03">顯示/隱藏切換toggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn04">淡出fadeOut()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn05">淡入fadeIn()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn06">淡化切換fadeToggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn07">淡化到fadeTo()</button>
        </td>
    </tr>
</table>
<div id="divClass"></div>
</body>
</html>

案例-CSS動畫之品牌展示

案例要求

點選按鈕的時候，隱藏和顯示卡西歐之後的品牌。
當顯示全部內容的時候，按鈕文字為“顯示精簡品牌”。然後小三角形向上，所有品牌產品為預設顏色。
當只顯示精簡品牌的時候，要隱藏卡西歐之後的品牌，按鈕文字為“顯示全部品牌”。然後小三形向下，並且把佳能，尼康的品牌顏色改為紅色（給 li 標籤新增 promoted 樣式即可）

案例實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS動畫之商品展示練習</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            text-align: center;
        }

        a {
            color: #0044DD;
            text-decoration: none;
        }

        a:hover {
            color: #FF5500;
            text-decoration: underline;
        }

        .SubCategoryBox {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }

        .SubCategoryBox ul {
            list-style: none;
        }

        .SubCategoryBox ul li {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }

        .showMore, .showLess {
            clear: both;
            text-align: center;
            paddin-top: 10px;
        }

        .showMore a, .showLess a {
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAAAAA;
        }

        .showMore a span {
            padding-left: 15px;
            background: url("img/down.gif") no-repeat 0 0;
        }

        .showLess a span {
            padding-left: 15px;
            background: url("img/up.gif") no-repeat 0 0;
        }

        .promoted a {
            color: #FF5500;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //頁面初始狀態
            $("li:gt(4):not(:last)").hide();
            //實現展示/收起按鈕功能
            $("a:last").click(function () {
                //讓下面的品牌顯示或隱藏
                $("li:gt(4):not(:last)").toggle();
                //判斷下面的品牌是顯示還是隱藏
                if ($("li:gt(4):not(:last)").is(":hidden")) {
                    //若下面的品牌是隱藏的，則text為'顯示全部品牌'，圖示為向下
                    $("div div a span").text("顯示全部品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showMore")
                    //除去廣告高亮
                    $("li:contains('佳能')").removeClass("promoted");
                    $("li:contains('索尼')").removeClass("promoted");
                    $("li:contains('三星')").removeClass("promoted");
                } else {
                    //若下面的品牌是顯示的，則text為'顯示精簡品牌'，圖示為向上
                    $("div div a span").text("顯示精簡品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showLess");
                    //新增廣告高亮
                    $("li:contains('佳能')").addClass("promoted");
                    $("li:contains('索尼')").addClass("promoted");
                    $("li:contains('三星')").addClass("promoted");
                }
                //取消<a>標籤自動跳轉
                return false;
            });
        });
    </script>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li>
            <a href="#">佳能</a>
            <i>(30440)</i>
        </li>
        <li>
            <a href="#">索尼</a>
            <i>(20001)</i>
        </li>
        <li>
            <a href="#">三星</a>
            <i>(19028)</i>
        </li>
        <li>
            <a href="#">尼康</a>
            <i>(17821)</i>
        </li>
        <li>
            <a href="#">松下</a>
            <i>(12289)</i>
        </li>
        <li>
            <a href="#">卡西歐</a>
            <i>(8242)</i>
        </li>
        <li>
            <a href="#">富士</a>
            <i>(14894)</i>
        </li>
        <li>
            <a href="#">柯達</a>
            <i>(9520)</i>
        </li>
        <li>
            <a href="#">賓得</a>
            <i>(2195)</i>
        </li>
        <li>
            <a href="#">理光</a>
            <i>(4114)</i>
        </li>
        <li>
            <a href="#">奧林巴斯</a>
            <i>(12205)</i>
        </li>
        <li>
            <a href="#">明基</a>
            <i>(1466)</i>
        </li>
        <li>
            <a href="#">愛國者</a>
            <i>(3091)</i>
        </li>
        <li>
            <a href="#">小米</a>
            <i>(1010)</i>
        </li>
        <li>
            <a href="#">其他品牌</a>
            <i>(7275)</i>
        </li>
    </ul>
    <div class="showMore">
        <a href="more.html">
            <span>顯示全部品牌</span>
        </a>
    </div>
</div>
</body>
</html>

JQuery操作事件

JQuery頁面載入後事件

什麼是'JQuery頁面載入後事件'?

$(document).ready()

JQuery頁面載入後事件與原生JS頁面載入後事件的觸發順序？

JQuery的$(document).ready()先執行
原生JS的window.onload後執行

JQuery頁面載入後事件與原生JS頁面載入後事件的觸發時機？

JQuery的$(document).ready()是瀏覽器的核心解析完頁面的標籤，建立好 DOM 物件之後就會馬上執行
原生JS的window.onload除了要等瀏覽器核心解析完標籤建立好 DOM 物件，還要等標籤顯示時需要的內容載入
完成才能執行

JQuery頁面載入後事件與原生JS頁面載入後事件的可執行次數？

JQuery的$(document).ready()，有多少執行多少（依次）
原生JS的window.onload再多，也只能執行最後依次的賦值函式

JQuery其他常見事件

click()：滑鼠單擊事件（被呼叫時傳入函式為繫結，不傳入函式為觸發）
mouseover()：滑鼠移入事件（被呼叫時傳入函式為繫結，不傳入函式為觸發）
mouseout()：滑鼠移出事件（被呼叫時傳入函式為繫結，不傳入函式為觸發）
bind()：給元素繫結一個或多個事件
one()：給元素繫結一個或多個事件，但其繫結的事件只能被觸發一次（使用格式與bind()一致）
unbind()：解除元素繫結的一個或多個事件（功能與bind()相反，呼叫時只需傳入字串形式的事件名即可）
$(document).on(events,[selector],[data],fn) ：動態繫結事件，即使元素是後建立的

演示

//click()繫結單擊事件
$("h5").click(function(){
    alert("h5的單擊事件");
});
//click()觸發單擊事件
$("h5").click();

//mouseover()繫結滑鼠移入事件
$("h5").mouseover(function () {
    alert("h5的滑鼠移入事件");;
});
//mouseover()觸發滑鼠移入事件
$("h5").mouseover();

//mouseout()繫結滑鼠移出事件
$("h5").mouseout(function () {
    alert("滑鼠移出事件");
});
//mouseout()觸發滑鼠移出事件
$("h5").mouseout();

//bind()元素繫結三個事件
$("h5").bind("click mouseover mouseout", function () {
    console.log("別JB叫！");
});
//bind()分別觸發三個事件
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();

//one()元素繫結三個事件
$("h5").one("click mouseover mouseout", function () {
    console.log("我說的，眼老闆是垃圾！");
});
//one()分別觸發三個事件（一個事件只能被觸發一次）
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();

//unbind()解除兩個事件的繫結
$("h5").unbind("mouseover mouseout");
//unbind()解除所有事件的繫結（不傳參，表示解除全部事件繫結）
$("h5").unbind();

//$(document).on(events,[selector],[data],fn)動態繫結事件
$(document).on("click mouseover mouseout", $("h5"), function(){
    console.log("我是回撥函式");
});

事件冒泡

什麼是事件冒泡？

事件的冒泡是指：父子元素同時監聽同一個事件，當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件裡去響應。

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery操作事件</title>
    <style>
        #ancestor {
            width: 300px;
            height: 300px;
            border: black solid 2px;
        }

        #descendant {
            width: 200px;
            height: 200px;
            border: blue solid 1px;
        }

    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            //父元素div與子元素div繫結同一個事件，
            //當子元素div的單擊事件被觸發，
            //父元素div的單擊事件也會被自動觸發
            $("div").click(function () {
                alert("事件冒泡");
            });
        });
    </script>
</head>
<body>
<div id="ancestor">one
    <div id="descendant">two</div>
</div>
</body>
</html>

怎麼解決事件冒泡？

在子元素事件函式體內， return false; 可以阻止事件的冒泡傳遞。

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery操作事件</title>
    <style>
        #ancestor {
            width: 300px;
            height: 300px;
            border: black solid 2px;
        }

        #descendant {
            width: 200px;
            height: 200px;
            border: blue solid 1px;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            //與上面的是同樣的程式碼，現在只需要加上return false
            //即可阻止事件冒泡的產生
            $("div").click(function () {
                alert("事件冒泡");
                return false;
            });
        });
    </script>
</head>
<body>
<div id="ancestor">one
    <div id="descendant">two</div>
</div>
</body>
</html>

事件物件

什麼是事件物件？

事件物件，是封裝有觸發的事件資訊的一個 javascript 物件。

如何獲取事件物件？

在給元素繫結事件的時候，在事件的 function( event ) 引數列表中新增一個引數，這個引數名，我們習慣取名為 event。這個 event 就是 javascript 傳遞參事件處理函式的事件物件。

演示

//原生Js獲取事件物件event
window.onload = function () {
    document.getElementsByTagName("div")[0].onclick = function (event) {
        console.log(event);
    };
};

//JQuery獲取事件物件event
$(document).ready(function () {
    $("div:first").click(function (event) {
        console.log(event);
    });
});

事件物件的作用

在我們使用bind()給一個元素一次性繫結多個事件時，我們該如何分別給這些事件設定單獨的函式呢？這個時候，我們就需要用到事件物件event了。

//使用bind()給一個元素一次性繫結多個事件
$("div:first").bind("mouseover mouseout click", function (event) {
    //若是mouseover事件，控制檯列印mouseover
    if (event.type == "mouseover") {
        console.log("mouseover");
    } else if (event.type == "mouseout") {
        //若是mouseout事件，控制檯列印mouseout
        console.log("mouseout");
    } else if (event.type == "click") {
        //若是click事件，控制檯列印click
        console.log("click");
    }
});

案例-圖片放大跟隨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片跟隨</title>
    <style>
        body {
            text-align: center;
        }
        #small {
            width: 20%;
            height: 20%;
        }
        #big {
            width: 600px;
            height: 300px;
        }
        #showBig {
            position: absolute;
            display: none;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#small").bind("mouseover mouseout mousemove", function (event) {
                //當滑鼠到圖片上時，新增大圖片
                if (event.type == "mouseover") {
                    $("#showBig").show();

                    //當滑鼠移動時，大圖片也要跟隨滑鼠移動
                } else if (event.type == "mousemove") {
                    $("#showBig").offset({
                       left: event.pageX + 10,
                       top: event.pageY + 10
                    });

                    //當滑鼠移出圖片上時，大圖片消失
                } else if (event.type == "mouseout") {
                    $("#showBig").hide();
                }
            });
        });
    </script>
</head>
<body>
<img id="small" src="img/wallhaven-6oqzgq.jpg"/>
<div id="showBig">
    <img id="big" src="img/wallhaven-6oqzgq.jpg"/>
</div>
</body>
</html>

JQuery學習記錄

JQuery概述

什麼是JQuery？

JQuery核心思想

JQuery流行程度

jQuery 好處

JQuery初體驗

JQuery核心函式

jQuery 物件和 dom 物件區分

什麼是 jQuery 物件？ 什麼是 dom 物件？

DOM物件

JQuery物件

jQuery 物件的本質是什麼？

jQuery 物件和 Dom 物件使用區別

Dom 物件和 jQuery 物件互轉

dom 物件轉化為 jQuery 物件

jQuery 物件轉為 dom 物件

jQuery 選擇器

基本選擇器

演示

層級選擇器

演示

基本過濾選擇器

演示

內容過濾器

演示

屬性過濾器

演示

表單過濾器

演示

表單物件屬性過濾器

演示

JQuery元素篩選

JQuery的屬性操作

案例-JQuery全選/全不選

案例要求

案例實現

DOM物件的增刪改

內部插入

外部插入

替換

刪除

演示

案例-從左到右，從右到左

案例要求

案例實現

案例-表格的動態新增、刪除

JQuery操作CSS樣式

演示

JQuery操作動畫

基本動畫

淡入淡出動畫

演示

案例-CSS動畫之品牌展示

案例要求

案例實現

JQuery操作事件

JQuery頁面載入後事件

什麼是'JQuery頁面載入後事件'?

JQuery頁面載入後事件與原生JS頁面載入後事件的觸發順序？

JQuery頁面載入後事件與原生JS頁面載入後事件的觸發時機？

JQuery頁面載入後事件與原生JS頁面載入後事件的可執行次數？

JQuery其他常見事件

演示

事件冒泡

什麼是事件冒泡？

演示

怎麼解決事件冒泡？

演示

事件物件

什麼是事件物件？

如何獲取事件物件？

演示

事件物件的作用

案例-圖片放大跟隨

相關文章

什麼是 jQuery 物件？什麼是 dom 物件？