jQuery-03

阿新 • • 發佈：2021-10-18

day03 - jQuery

學習目標：

能夠說出4種常見的註冊事件
能夠說出 on 繫結事件的優勢
能夠說出 jQuery 事件委派的優點以及方式
能夠說出繫結事件與解綁事件
能夠說出 jQuery 物件的拷貝方法
能夠說出 jQuery 多庫共存的2種方法
能夠使用 jQuery 外掛

1.1. jQuery 事件註冊

jQuery 為我們提供了方便的事件註冊機制，是開發人員抑鬱操作優缺點如下：

優點: 操作簡單，且不用擔心事件覆蓋等問題。
缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。

語法

演示程式碼

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 單個事件註冊
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

1.2. jQuery 事件處理

因為普通註冊事件方法的不足，jQuery又開發了多個處理方法，重點講解如下：

on(): 用於事件繫結，目前最好用的事件繫結方法
off(): 事件解綁
trigger() / triggerHandler(): 事件觸發

1.2.1 事件處理 on() 繫結事件

因為普通註冊事件方法的不足，jQuery又建立了多個新的事件繫結方法bind() / live() / delegate() / on()等，其中最好用的是: on()

語法

演示程式碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on可以繫結1個或者多個事件處理程式
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以實現事件委託（委派）
            // click 是繫結在ul 身上的，但是 觸發的物件是 ul 裡面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以給未來動態建立的元素繫結事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是後來建立的</li>");
            $("ol").append(li);
        })
    </script>
</body>

1.2.2. 案例：釋出微博案例

1.點擊發布按鈕，動態建立一個小li，放入文字框的內容和刪除按鈕，並且新增到ul 中。
2.點選的刪除按鈕，可以刪除當前的微博留言。

程式碼實現略。(詳情參考原始碼)

1.2.3. 事件處理 off() 解綁事件

當某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱為事件解綁。jQuery 為我們提供了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有隻觸發一次的事件繫結方法 one()，在這裡我們重點講解一下 off() ;

語法

演示程式碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <p>我是一個P標籤</p>
	<script>
        $(function() {
  			// 事件繫結
            $("div").on({
                click: function() {
                    console.log("我點選了");
                },
                mouseover: function() {
                    console.log('我滑鼠經過了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解綁 off 
            // $("div").off();  // 這個是解除了div身上的所有事件
            $("div").off("click"); // 這個是解除了div身上的點選事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能觸發事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

1.2.4. 事件處理 trigger() 自動觸發事件

有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 比如輪播圖自動播放功能跟點選右側按鈕一致。可以利用定時器自動觸發右側按鈕點選事件，不必滑鼠點選觸發。由此 jQuery 為我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;

語法

演示程式碼

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 繫結事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自動觸發事件
      // 1. 元素.事件()
      // $("div").click();會觸發元素的預設行為
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");會觸發元素的預設行為
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不會觸發元素的預設行為
      $("input").on("focus", function() {
        $(this).val("你好嗎");
      });
      // 一個會獲取焦點，一個不會
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

1.3. jQuery 事件物件

jQuery 對DOM中的事件物件 event 進行了封裝，相容性更好，獲取更方便，使用變化不大。事件被觸發，就會有事件物件的產生。

語法

演示程式碼

<body>
    <div></div>

	<script>
        $(function() {
            $(document).on("click", function() {
                console.log("點選了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("點選了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 物件使用，可以借鑑 API 和 DOM 中的 event 。

1.4. jQuery 拷貝物件

jQuery中分別為我們提供了兩套快速獲取和設定元素尺寸和位置的API，方便易用，內容如下。

語法

演示程式碼

 <script>
        $(function() {
   			// 1.合併資料
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
   			// 2. 會覆蓋 targetObj 裡面原來的資料
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

1.5. jQuery 多庫共存

實際開發中，很多專案連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常執行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱為，jQuery 多庫共存。

語法

演示程式碼

<script>
	$(function() {
  		// 讓jquery 釋放對$ 控制權 讓用自己決定
  		var suibian = jQuery.noConflict();
  		console.log(suibian("span"));
	})
</script>

1.6. jQuery 外掛

jQuery 功能比較有限，想要更復雜的特效效果，可以藉助於 jQuery 外掛完成。這些外掛也是依賴於jQuery來完成的，所以必須要先引入

jQuery檔案，因此也稱為 jQuery 外掛。

jQuery 外掛常用的網站：

jQuery 外掛庫 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 外掛使用步驟：

引入相關檔案。（jQuery 檔案和外掛檔案）
複製相關html、css、js (呼叫外掛)。

1.6.1. 瀑布流外掛（重點講解）

我們學習的第一個外掛是jQuery之家的開源外掛，瀑布流。我們將重點詳細講解，從找到外掛所在網頁，然後點選下載程式碼，到外掛的使用等，後面的外掛使用可參考瀑布流外掛的使用。

下載位置

程式碼演示

外掛的使用三點： 1. 引入css. 2.引入JS 3.引入html。（有的簡單外掛只需引入html和js，甚至有的只需引入js）

1.引入css.

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
  
<!-- 下面的樣式程式碼為頁面佈局，可以引入，也可以自己寫，自己設計頁面樣式，一般為直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

2.引入js.

<!-- 前兩個必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的為啟動瀑布流程式碼，引數可調節屬性，具體功能可參考readme.html -->
<script type="text/javascript">
	$(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
	});
</script>

3.引入html.

	<!-- html結構一般為事先寫好，很難修改結構，但可以修改內容及圖片的多少（article標籤） -->
	<section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裡面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裡面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裡面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裡面很精彩哦</p>
        </article>
    </section>

總結：jQuery外掛就是引入別人寫好的：html 、css、js （有時也可以只引入一部分，讀懂後也可以修改部分內容）

1.6.2. 圖片懶載入外掛

圖片的懶載入就是：當頁面滑動到有圖片的位置，圖片才進行載入，用以提升頁面開啟的速度及使用者體驗。（下載略）

程式碼演示

懶載入只需引入html 和 js操作即可，此外掛不涉及css。

1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
   	lazyLoadInit({
   		showTime: 1100,
   		onLoadBackEnd: function(i, e) {
     		console.log("onLoadBackEnd:" + i);
   		},
   		onLoadBackStart: function(i, e) {
     		console.log("onLoadBackStart:" + i);
   		}
 	});
</script>

2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">

1.6.3. 全屏滾動外掛

全屏滾動外掛比較大，所以，一般大型外掛都會有幫助文件，或者網站。全屏滾動外掛介紹比較詳細的網站為：

http://www.dowebok.com/demo/2014/77/

程式碼演示

全屏滾動因為有多重形式，所以不一樣的風格html和css也不一樣，但是 js 變化不大。所以下面只演示js的引入，html和css引入根據自己實際

專案需要使用哪種風格引入對應的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
  	$(function() {
  		$('#dowebok').fullpage({
    		sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
    		navigation: true
  		});
	});
</script>

注意：實際開發，一般複製檔案，然後在檔案中進行修改和新增功能。

1.4.6. bootstrap元件

Bootstrap是 Twitter 公司設計的基於HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前端開發框架，他依靠jQuery實現，且支援響應式

佈局，使得 Web 開發更加方便快捷。

凡是在軟體開發中用到了軟體的複用，被複用的部分都可以稱為元件，凡是在應用程式中已經預留介面的元件就是外掛。Bootstrap元件使

用非常方便: 1.引入bootstrap相關css和js 2.去官網複製html

程式碼演示

引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官網複製html的功能模組

    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      		Action <span class="caret"></span>
    		</button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
     	</div>
	</div>

1.6.5. bootstrap外掛（JS）

bootstrap中的js外掛其實也是元件的一部分，只不過是需要js呼叫功能的元件，所以一般bootstrap的js外掛一般會伴隨著js程式碼（有的也可以

省略js，用屬性實現）。

步驟： 1.引入bootstrap相關css和js 2.去官網複製html 3.複製js程式碼，啟動js外掛。

程式碼演示

引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官網複製html的功能模組

<!-- 模態框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            裡面就是模態框
        </div>
    </div>
</div>

複製js程式碼，啟動js外掛。

<script>
	// 當我們點選了自己定義的按鈕，就彈出模態框
	$(".myBtn").on("click", function() {
		// alert(11);
		$('#btn').modal()
	})
</script>

1.6.6. bootstrap案例-阿里百秀

1.通過呼叫元件實現導航欄
2.通過呼叫外掛實現登入
3.通過呼叫外掛標籤頁實現 tab 欄

程式碼實現略。(詳情參考原始碼)

1.7. 綜合案例: toDoList案例分析（程式碼略）

1.7.1 案例：案例介紹

// 1. 文字框裡面輸入內容，按下回車，就可以生成待辦事項。
// 2. 點選待辦事項複選框，就可以把當前資料新增到已完成事項裡面。
// 3. 點選已完成事項複選框，就可以把當前資料新增到待辦事項裡面。
// 4. 但是本頁面內容重新整理頁面不會丟失。

1.7.2 案例：toDoList 分析

// 1. 重新整理頁面不會丟失資料，因此需要用到本地儲存 localStorage
// 2. 核心思路： 不管按下回車，還是點選複選框，都是把本地儲存的資料載入到頁面中，這樣保證重新整理關閉頁面不會丟失資料
// 3. 儲存的資料格式：var todolist =  [{ title : ‘xxx’, done: false}]
// 4. 注意點1： 本地儲存 localStorage 裡面只能儲存字串格式 ，因此需要把物件轉換為字串 JSON.stringify(data)。
// 5. 注意點2： 獲取本地儲存資料，需要把裡面的字串轉換為物件格式JSON.parse() 我們才能使用裡面的資料。

1.7.3 案例：toDoList 按下回車把新資料新增到本地儲存裡面

// 1.切記： 頁面中的資料，都要從本地儲存裡面獲取，這樣重新整理頁面不會丟失資料，所以先要把資料儲存到本地儲存裡面。
// 2.利用事件物件.keyCode判斷使用者按下回車鍵（13）。
// 3.宣告一個數組，儲存資料。
// 4.先要讀取本地儲存原來的資料（宣告函式 getData()），放到這個數組裡面。
// 5.之後把最新從表單獲取過來的資料，追加到數組裡面。
// 6.最後把陣列儲存給本地儲存 (宣告函式 savaDate())

1.7.4 案例：toDoList 本地儲存資料渲染載入到頁面

// 1.因為後面也會經常渲染載入操作，所以宣告一個函式 load，方便後面呼叫
// 2.先要讀取本地儲存資料。（資料不要忘記轉換為物件格式）
// 3.之後遍歷這個資料（$.each()），有幾條資料，就生成幾個小li 新增到 ol 裡面。
// 4.每次渲染之前，先把原先裡面 ol 的內容清空，然後渲染載入最新的資料。

1.7.5 案例：toDoList 刪除操作

// 1.點選裡面的a連結，不是刪除的li，而是刪除本地儲存對應的資料。
// 2.核心原理：先獲取本地儲存資料，刪除對應的資料，儲存給本地儲存，重新渲染列表li
// 3.我們可以給連結自定義屬性記錄當前的索引號
// 4.根據這個索引號刪除相關的資料----陣列的splice(i, 1)方法
// 5.儲存修改後的資料，然後儲存給本地儲存
// 6.重新渲染載入資料列表
// 7.因為a是動態建立的，我們使用on方法繫結事件

1.7.6 案例：toDoList 正在進行和已完成選項操作

// 1.當我們點選了小的複選框，修改本地儲存資料，再重新渲染資料列表。
// 2.點選之後，獲取本地儲存資料。
// 3.修改對應資料屬性 done 為當前複選框的checked狀態。
// 4.之後儲存資料到本地儲存
// 5.重新渲染載入資料列表
// 6.load 載入函式裡面，新增一個條件,如果當前資料的done為true 就是已經完成的，就把列表渲染載入到 ul 裡面
// 7.如果當前資料的done 為false， 則是待辦事項，就把列表渲染載入到 ol 裡面

1.7.7 案例：toDoList 統計正在進行個數和已經完成個數

// 1.在我們load 函式裡面操作
// 2.宣告2個變數 ：todoCount 待辦個數  doneCount 已完成個數   
// 3.當進行遍歷本地儲存資料的時候， 如果 資料done為 false， 則 todoCount++, 否則 doneCount++
// 4.最後修改相應的元素 text()

jQuery-03

day03 - jQuery

1.1. jQuery 事件註冊

1.2. jQuery 事件處理

1.2.1 事件處理 on() 繫結事件

1.2.2. 案例：釋出微博案例

1.2.3. 事件處理 off() 解綁事件

1.2.4. 事件處理 trigger() 自動觸發事件

1.3. jQuery 事件物件

1.4. jQuery 拷貝物件

1.5. jQuery 多庫共存

1.6. jQuery 外掛

1.6.1. 瀑布流外掛（重點講解）

1.6.2. 圖片懶載入外掛

1.6.3. 全屏滾動外掛

1.4.6. bootstrap元件

1.6.5. bootstrap外掛（JS）

1.6.6. bootstrap案例-阿里百秀

1.7. 綜合案例: toDoList案例分析（程式碼略）

1.7.1 案例：案例介紹

1.7.2 案例：toDoList 分析

1.7.3 案例：toDoList 按下回車把新資料新增到本地儲存裡面

1.7.4 案例：toDoList 本地儲存資料渲染載入到頁面

1.7.5 案例：toDoList 刪除操作

1.7.6 案例：toDoList 正在進行和已完成選項操作

1.7.7 案例：toDoList 統計正在進行個數和已經完成個數

1.8. 今日總結

相關推薦