03. jQuery

阿新 • • 發佈：2022-04-07

一、jQuery介紹

jQuery，顧名思義，也就是JavaScript和查詢（Query），它就是輔助JavaScript開發的js類庫。它的核心思想是write less,do more（寫得更少,做得更多），所以它實現了很多瀏覽器的相容問題。jQuery是免費、開源的，jQuery的語法設計可以使開發更加便捷，例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //表示頁面載入完成之後，相當於window.onload = function(){}
        $(function(){
            var $btnObj = $("#btn01");        //表示按id查新標籤物件
            $btnObj.click(function(){
                alert("jQuery的單擊事件");
            });
        });
    </script>
</head>
<body>
    <button id="btn01">按鈕</button>
</body>
</html>

jquery-1.7.2.js放在下一級目錄【library】中；

二、jQuery核心函式

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

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

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //傳入引數為函式時，表示頁面載入完成之後
        $(function(){
            alert("頁面載入完成之後，自動呼叫");

            //傳入引數為HTML字串時，會對我們建立這個html標籤物件
            $("<div>" +
                "<span>div-span1</span>" +
                "<span>div-span2</span>" +
                "</div>"
            ).appendTo("body");

            //傳入引數為選擇器字串時
            var $btnObj = $("#btn01");        //表示按id查新標籤物件
            $btnObj.click(function () {
                alert("jQuery的單擊事件");
            });

            alert($("button").length);

            //傳入引數為DOM物件時，會把這個dom物件轉換為jQuery物件
            var btnObj = document.getElementById("btn01");
            alert(btnObj);
            alert($(btnObj));
        });      
    </script>
</head>
<body>
    <button id="btn01">按鈕1</button>
    <button class="btn02">按鈕2</button>
    <button class="btn02">按鈕3</button>
</body>
</html>

三、jQuery物件和dom物件區分

3.1、什麼是jQuery物件，什麼是dom物件

Dom物件
- 通過getElementById()查詢出來的標籤物件是Dom物件
- 通過getElementsByName()查詢出來的標籤物件是Dom物件
- 通過getElementsByTagName()查詢出來的標籤物件是Dom物件
- 通過createElement()方法建立的物件，是Dom物件
jQuery物件
- 通過JQuery提供的API建立的物件，是JQuery物件
- 通過JQuery包裝的Dom物件，也是JQuery物件
- 通過JQuery提供的API查詢到的物件，是JQuery物件

DOM物件Alert出來的效果是：[object HTML 標籤名 Element]
jQuery物件Alert出來的效果是：[object Object]
jQuery物件的本質：jQuery物件是dom物件的陣列+jQuery提供的一系列功能函式。
jQuery物件不能使用DOM物件的屬性和方法；DOM物件也不能使用jQuery物件的屬性和方法；

3.2、Dom物件和jQuery物件互轉

dom物件轉化為jQuery物件
1. 先有DOM物件
2. $(DOM物件)就可以轉換成為jQuery物件
jQuery物件轉為dom物件
1. 先有jQuery物件
2. jQuery物件[下標]取出相應的DOM物件

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            //dom物件轉化為jQuery物件
            alert($(document.getElementById("btn01")));
            //jQuery物件轉為dom物件
            alert($(document.getElementById("btn01"))[0]);
        });
    </script>
</head>
<body>
    <button id="btn01">按鈕1</button>
</body>
</html>

四、jQuery選擇器

4.1、基本選擇器

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

4.2、層級選擇器

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

4.3、過濾選擇器

4.3.1、基本過濾器

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

4.3.2、內容過濾器

:contains(text) 匹配包含給定文字的元素
:empty 匹配所有不包含子元素或者文字的空元素
:parent 匹配含有子元素或者文字的元素
:has(selector) 匹配含有選擇器所匹配的元素的元素

4.3.3、屬性過濾器

[attribute] 匹配包含給定屬性的元素
[attribute=value] 匹配給定的屬性是某個特定值的元素
[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
[attribute^=value] 匹配給定的屬性是以某些值開始的元素
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
[attribute*=value] 匹配給定的屬性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 複合屬性選擇器，需要同時滿足多個條件時使用

4.3.4、表單過濾器

:input 匹配所有input，textarea，select和button元素
:text 匹配所有文字輸入框
:password 匹配所有的密碼輸入框
:radio 匹配所有的單選框
:checkbox 匹配所有的複選框
:submit 匹配所有提交按鈕
:image 匹配所有img標籤
:reset 匹配所有重置按鈕
:button 匹配所有input type=button <button>按鈕
:file 匹配所有input type=file檔案上傳
:hidden 匹配所有不可見元素display:none或input type=hidden

4.3.5、表單物件屬性過濾器

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

五、jQuery 元素篩選

eq() 獲取給定索引的元素，功能跟:eq()一樣
first() 獲取第一個元素，功能跟:first一樣
last() 獲取最後一個元素，功能跟:last一樣
filter(exp) 留下匹配的元素
is(exp) 判斷是否匹配給定的選擇器，只要有一個匹配就返回，true
has(exp) 返回包含有匹配選擇器的元素的元素，功能跟:has一樣
not(exp) 刪除匹配選擇器的元素，功能跟:not一樣
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() 它可以設定和獲取起始標籤和結束標籤中的內容，跟dom屬性innerHTML一樣。
text() 它可以設定和獲取起始標籤和結束標籤中的文字，跟dom屬性innerText一樣。
val() 它可以設定和獲取表單項的value屬性值，跟dom屬性value一樣
attr() 可以設定和獲取屬性的值，不推薦操作checked、readOnly、selected、disabled等等，attr()方法還可以操作非標準的屬性，比如自定義屬性。
prop() 可以設定和獲取屬性的值,只推薦操作checked、readOnly、selected、disabled等等

template：

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            //全選
            $("#checkedAllBtn").click(function() {
                 $(":checkbox").prop("checked", true);
            });

            //全不選
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            });

            //反選
            $("#checkedRevBtn").click(function(){
                $(":checkbox[name='items']").each(function(){
                    this.checked = !this.checked;
                });

                // 檢查是否滿選
                var allCount = $(":checkbox[name='items']").length;
                var checkedCount = $(":checkbox[name='items']:checked").length;
                // if(allCount == checkedCount){
                //     $("#checkedAllBox").prop("checked",true);
                // } else {
                //     $("#checkedAllBox").prop("checked",false);
                // }
                $("#checkedAllBox").prop("checked", allCount == checkedCount);
            });

            //提交
            $("#sendBtn").click(function(){
                $(":checkbox[name='items']:checked").each(function(){
                    alert(this.value);
                })
            });

            //全選、全不選複選框
            $("#checkedAllBox").click(function(){
                $(":checkbox[name='items']").prop("checked",this.checked);
            });

            $(":checkbox[name='items']").click(function(){
                var allCount = $(":checkbox[name='items']").length;
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked", allCount == checkedCount);
            });
        });
    </script>
</head>
<body>
    <form method="post" action=""> 你愛好的運動是？
        <input type="checkbox" id="checkedAllBox" >全選/全不選<br> 
        <input type="checkbox" name="items" value="足球">足球 
        <input type="checkbox" name="items" value="籃球">籃球 
        <input type="checkbox" name="items" value="羽毛球">羽毛球 
        <input type="checkbox" name="items" value="乒乓球">乒乓球<br> 
        <input type="button" id="checkedAllBtn" value="全 選"> 
        <input type="button" id="checkedNoBtn" value="全不選"> 
        <input type="button" id="checkedRevBtn" value="反 選"> 
        <input type="button" id="sendBtn" value="提 交"> 
    </form>
</body>
</html>

七、DOM的增刪改

內部插入：
- appendTo() a.appendTo(b) 把a插入到b子元素末尾，成為最後一個子元素
- prependTo() a.prependTo(b) 把a插到b所有子元素前面，成為第一個子元素
外部插入：
- insertAfter() a.insertAfter(b) 得到ba
- insertBefore() a.insertBefore(b) 得到ab
替換:
- replaceWith() a.replaceWith(b) 用b替換掉a
- replaceAll() a.replaceAll(b) 用a替換掉所有b
刪除：
- remove() a.remove(); 刪除a標籤
- empty() a.empty(); 清空a標籤裡的內容

template：

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }
    
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(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="opt01">選項 1</option>
            <option value="opt02">選項 2</option>
            <option value="opt03">選項 3</option>
            <option value="opt04">選項 4</option>
            <option value="opt05">選項 5</option>
            <option value="opt06">選項 6</option>
            <option value="opt07">選項 7</option>
            <option value="opt08">選項 8</option>
        </select> 
        <button>選中新增到右邊</button> 
        <button>全部新增到右邊</button> 
    </div>
    <div id="rigth"> 
        <select multiple="multiple" name="sel02"> </select> 
        <button>選中刪除到左邊</button> 
        <button>全部刪除到左邊</button>
    </div>
</body>
</html>

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            var deleFun = function(){
                var $trObj = $(this).parent().parent();
                var name = $trObj.find("td:first").text();

                if (confirm("確定刪除[" + name + "]嗎？")) {
                    $trObj.remove();
                }
                return false;
            }

            $("#addEmpButton").click(function(){
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                var $trObj = $(
                    "<tr>"+
                        "<td>" + name  + "</td>"+
                        "<td>" + email + "</td>"+
                        "<td>" + salary + "</td>"+
                        "<td><a href=\"deleteEmp?id=001\">Delete</a></td>"+
                    "</tr>"
                );

                $trObj.appendTo($("#employeeTable"));
                $trObj.find("a").click(deleFun);
            });

            $("a").click(deleFun);
        });
    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>[email protected]</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>[email protected]</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>[email protected]</td>
            <td>10000</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>

八、CSS樣式操作

addClass() 新增樣式
removeClass() 刪除樣式
toggleClass() 有就刪除，沒有就新增樣式。
offset() 獲取和設定元素的座標。

九、jQuery動畫

基本動畫
- show() 將隱藏的元素顯示
- hide() 將可見的元素隱藏。
- toggle() 可見就隱藏，不可見就顯示。
淡入淡出動畫
- fadeIn() 淡入（慢慢可見）
- fadeOut() 淡出（慢慢消失）
- fadeTo() 在指定時長內慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明
- fadeToggle() 淡入/淡出切換

基本動畫方法都可以新增引數。第一個引數是動畫執行的時長，以毫秒為單位；第二個引數是動畫的回撥函式 (動畫完成後自動呼叫的函式)；

十、jQuery事件操作

10.1、$( function(){} );和window.onload = function(){}的區別

$(function(){});
- jQuery的頁面載入完成之後是瀏覽器的核心解析完頁面的標籤建立好DOM物件之後就會馬上執行。
window.onload = function(){}
- 原生js的頁面載入完成之後，除了要等瀏覽器核心解析完標籤建立好DOM物件，還要等標籤顯示時需要的內容載入完成。

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            alert("原生js的頁面載入完成之後");
        }
        window.onload = function(){
            alert("原生js的頁面載入完成之後");
        }
        window.onload = function(){
            alert("原生js的頁面載入完成之後");
        }

        $(function(){
            alert("jQuery的頁面載入完成之後");
        });
        $(function(){
            alert("jQuery的頁面載入完成之後");
        });
        $(function(){
            alert("jQuery的頁面載入完成之後");
        });
    </script>
</head>
<body>
    <button>我是按鈕</button>
    <iframe src="https://www.bilibili.com/" frameborder="0"></iframe>
</body>
</html>

jQuery頁面載入完成之後先執行，在執行原生js的頁面載入完成之後。jQuery的頁面載入完成之後是瀏覽器的核心解析完頁面的標籤建立好DOM物件之後馬上執行。原生js的頁面載入完成之後，除了要等瀏覽器核心解析完標籤建立好DOM物件，還要等標籤顯示是需要的內容載入完成。
原生js的頁面載入完成之後，只會執行最後一次的賦值函式。jQuery的頁面載入完成之後是全部把註冊的function函式，依次順序全部執行。

10.2、jQuery中其他的事件處理方法：

click() 它可以繫結單擊事件，以及觸發單擊事件
mouseover() 滑鼠移入事件
mouseout() 滑鼠移出事件
bind() 可以給元素一次性繫結一個或多個事件。
one() 使用上跟 bind 一樣。但是one方法繫結的事件只會響應一次。
unbind() 跟 bind 方法相反的操作，解除事件的繫結
live() 也是用來繫結事件。它可以用來繫結選擇器匹配的所有元素的事件。哪怕這個元素是後面動態創建出來的也有效

10.3、事件的冒泡

事件的冒泡是指，父子元素同時監聽同一個事件。當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件裡去響應。在子元素事件函式體內，return false;可以阻止事件的冒泡傳遞。

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
    
        #content {
            width: 220px;
            border: 1px solid #0050D0;
            background: #96E555;
        }
    
        span {
            width: 200px;
            margin: 10px;
            background: #666666;
            cursor: pointer;
            color: white;
            display: block;
        }
    
        p {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>

    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#content").click(function(){
                alert("我是div");
            });

            $("span").click(function(){
                alert("我是span");
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="content">
        外層div元素
        <span>內層span元素</span>
        外層div元素
    </div>
    
    <div id="msg"></div>
    
    <br><br>
    <a href="http://www.hao123.com" onclick="return false;">WWW.HAO123.COM</a>
</body>
</html>

10.4、javaScript事件物件

事件物件，是封裝有觸發的事件資訊的一個javascript物件。如何獲取呢javascript事件物件呢？在給元素繫結事件的時候，在事件的function(event)引數列表中新增一個引數，這個引數名，我們習慣取名為event。這個event就是javascript傳遞參事件處理函式的事件物件。

<!DOCTYPE html>                
<html lang="zh_CN">             
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>

    <style type="text/css">
        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }
    
        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }
    </style>

    <script type="text/javascript" src="./library/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //1.原生JavaScript獲取事件物件
        window.onload = function(){
            document.getElementById("areaDiv").onclick = function(event){
                console.log(event);
            }
        }

        //2.jQuery程式碼獲取事件物件
        $(function () {
            $("#areaDiv").click(function(event){
                console.log(event);
            });
            //使用bind同時對多個事件繫結同一個函式。怎麼獲取當前操作是什麼事件。
            $("#areaDiv").bind("mouseover mouseout",function(event){
                if(event.type == "mouseover"){
                    console.log("滑鼠移入");
                } else if (event.type == "mouseout"){
                    console.log("滑鼠移出");
                }
            });
        });
    </script>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
    <div id="showMsg2"></div>
</body>
</html>