前端基礎之jQuery重要補充

Xiao0101發表於2024-03-23
前端jQuery

一、阻止事件預設行為和阻止事件冒泡

1、阻止事件預設行為

阻止事件的預設行為是指阻止瀏覽器在特定事件發生時執行的預設操作。這對於定製使用者互動體驗非常有用，可以透過阻止預設行為來實現自定義行為或效果。

<script>
    $('#d2').click(function (){
        $('#d1').text('你看不見我')
        // 阻止標籤後續事件的執行  方式一
        return false
        // 阻止標籤後續事件的執行  方式二
        e.preventDefault()
    })
</script>

以下是一些常見事件的預設行為以及如何阻止它們的示例：

（1）點選連結的預設行為：

  • 當使用者點選一個連結時，瀏覽器會預設跳轉到連結指定的頁面。
  • 使用 event.preventDefault() 可以阻止這種預設行為，從而在點選連結時執行你自定義的操作，而不跳轉到新頁面。
$('a').on('click', function(event) {
    event.preventDefault(); // 阻止連結的預設跳轉行為
    // 執行你想要的操作
});

（2）表單提交的預設行為：

  • 當使用者提交表單時，瀏覽器會預設重新整理頁面或跳轉到指定的 URL。
  • 使用 event.preventDefault() 可以阻止表單的預設提交行為，從而在提交表單時執行你自定義的操作，而不重新整理頁面或跳轉到新頁面。
$('form').on('submit', function(event) {
    event.preventDefault(); // 阻止表單的預設提交行為
    // 執行你想要的操作
});

（3）鍵盤事件的預設行為：

  • 比如在輸入框按下Enter鍵會觸發表單提交。
  • 使用 event.preventDefault() 可以阻止鍵盤事件的預設行為，從而在按下Enter鍵時執行你自定義的操作，而不觸發表單提交。
$('input').on('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // 阻止Enter鍵的預設提交行為
        // 執行你想要的操作
    }
});

透過阻止事件的預設行為，你可以完全控制事件的處理方式，實現更加靈活和個性化的互動效果。

2、阻止事件冒泡

事件冒泡是指當一個事件發生在巢狀的元素上時，它會沿著DOM樹從最內層的元素向外層元素逐級傳播的過程。這意味著如果你在一個子元素上觸發了一個事件，它會一直向上冒泡，直到達到文件根節點或者直到有一個處理程式呼叫了 event.stopPropagation() 方法來停止冒泡。

阻止事件冒泡的常見方法是使用 event.stopPropagation() 方法。當你呼叫這個方法時，它會阻止事件繼續向父元素傳播，即停止冒泡。這樣可以防止事件影響到其他父元素上繫結的相同型別事件處理程式。

簡單示例：

<script>
    $('#d1').click(function (){
        alert('div')
    })
    $('#d2').click(function (){
        alert('p')
    })
    $('#d3').click(function (){
        alert('span')
        // 阻止事件冒泡的方式1
        return false
        // 阻止事件冒泡的方式2
        // e.stopPropagation()
    })
</script>

下面是一個比較完善的示例，演示如何阻止事件冒泡：

<!DOCTYPE html>
<html>
<head>
    <title>Event Bubbling Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.inner').on('click', function(event) {
                event.stopPropagation(); // 阻止事件冒泡
                console.log('Inner div clicked');
            });

            $('.outer').on('click', function() {
                console.log('Outer div clicked');
            });
        });
    </script>
</head>
<body>
    <div class="outer" style="padding: 20px; background-color: lightblue;">
        Outer Div
        <div class="inner" style="padding: 20px; background-color: lightcoral;">
            Inner Div
        </div>
    </div>
</body>
</html>

在這個例子中，當你點選內部的 div 元素時，會觸發內部 div 的點選事件處理程式，並且會阻止事件繼續向外傳播到外部 div。因此，只會看到 "Inner div clicked" 這條日誌，而不會看到 "Outer div clicked"。這就是事件冒泡被阻止的效果。

透過阻止事件冒泡，你可以更精確地控制事件的傳播，避免意外觸發其他元素上的事件處理程式，從而實現更加可靠和靈活的互動效果。

3、兩者的區別

在 jQuery 中，阻止事件的執行和阻止事件冒泡是兩個不同的概念，它們的作用也不同：

  1. 阻止事件的執行（event.preventDefault()）：

    • 使用 event.preventDefault() 方法可以阻止事件的預設行為。比如，當點選一個連結時，瀏覽器會預設跳轉到連結指定的頁面，使用 event.preventDefault() 可以阻止這種預設行為，從而在點選連結時執行你自定義的操作，而不跳轉到新頁面。
    • 這個方法主要用於阻止瀏覽器對事件的預設處理方式。

  2. 阻止事件冒泡（event.stopPropagation()）：

    • 使用 event.stopPropagation() 方法可以阻止事件在DOM樹中的傳播，即阻止事件冒泡到父元素或祖先元素。
    • 這個方法主要用於阻止事件繼續向上冒泡，從而防止其他元素的事件處理程式被觸發。

示例：

$('#myElement').on('click', function(event) {
    event.preventDefault(); // 阻止預設行為
    event.stopPropagation(); // 阻止事件冒泡
    // 執行你想要的操作
});

在上面的示例中，同時使用了 event.preventDefault() 和 event.stopPropagation()，這樣既阻止了事件的預設行為，也阻止了事件冒泡，從而完全控制了事件的處理方式。

二、事件委託

事件委託（Event delegation）是一種常用的JavaScript程式設計技術，它利用事件冒泡的特性，透過將事件處理程式繫結到一個父元素上來管理子元素的事件。這樣做的好處是可以減少事件處理程式的數量，提高效能，並且可以處理動態生成的子元素。

基本思想是將事件處理程式繫結到父元素，然後利用事件冒泡的機制，當子元素上的事件被觸發時，事件會冒泡到父元素，父元素上的事件處理程式就會捕獲到這個事件，從而實現對子元素事件的處理。

下面是一個簡單的示例來說明事件委託的工作原理：

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 繫結事件處理程式到父元素
            $('#parent').on('click', 'button', function() {
                alert('Button clicked: ' + $(this).text());
            });

            // 動態新增子元素
            $('#parent').append('<button>Button 1</button>');
            $('#parent').append('<button>Button 2</button>');
        });
    </script>
</head>
<body>
    <div id="parent">
        <!-- 這裡沒有任何按鈕 -->
    </div>
</body>
</html>

在這個例子中，我們將事件處理程式繫結到 #parent 元素上，但是事件處理程式是針對子元素 button 的點選事件。當點選 #parent 元素下的任何 button 元素時，事件會冒泡到 #parent 元素，然後由 #parent 元素上的事件處理程式來處理這個事件。

透過事件委託，我們可以避免為每個子元素都繫結事件處理程式，而是在父元素上統一管理。這樣不僅可以減少程式碼量，還可以提高效能，特別是當有大量子元素時，事件委託可以顯著減少記憶體消耗和提高頁面效能。

總的來說，事件委託是一種最佳化和簡化事件處理的方法，特別適用於動態生成的元素或者大量相似元素的情況。

三、頁面載入

1、原生js內碼表面載入

window.onload 是原生 JavaScript 中用於在頁面載入完成後執行指定函式的方法。類似於 jQuery 中的 $(window).load()，window.onload 會等待頁面上所有資源（包括圖片）載入完成後執行指定的函式。

下面是程式碼的示例：

window.onload = function(){
    // 在頁面上所有資源載入完成後執行的程式碼
    // 可以在這裡進行頁面元素的操作，繫結事件等
};

在這個函式內部，你可以執行任何 JavaScript 程式碼，包括操作頁面元素、繫結事件等。這種方式確保你的程式碼在頁面載入完成後執行，以確保操作的元素已經被完全載入到 DOM 中。

需要注意的是，如果你同時使用了 jQuery 和原生 JavaScript 來處理頁面載入事件，最好保持一致性，不要混合使用，以避免可能出現的衝突或不一致性。

2、jQuery頁面載入

在 jQuery 中，你可能想要做一些操作來處理頁面載入的事件或者在頁面載入完成後執行一些操作。以下是一些在 jQuery 中處理頁面載入的常見方法：

（1）$(document).ready()

$(document).ready() 是 jQuery 提供的一個方法，用於在文件載入完成後執行指定的函式。這個方法確保在 DOM 完全載入後執行程式碼，而無需等待其他資源的載入完成。

$(document).ready(function(){
    // 在文件載入完成後執行的程式碼
});

（2）$(window).load()

$(window).load() 用於在頁面上所有資源（包括圖片）載入完成後執行指定的函式。這與 $(document).ready() 不同，後者只等待 DOM 載入完成。

$(window).load(function(){
    // 在頁面上所有資源載入完成後執行的程式碼
});

（3）簡化的 $(function() {})

這是 $(document).ready() 方法的簡化寫法，等同於 $(document).ready(function() {})。

$(function(){
    // 在文件載入完成後執行的程式碼
});

（4）最暴力的方法

直接寫在 body 標籤 內部 ！

3、示例：

$(window).load(function(){
    // 在頁面上所有資源載入完成後執行的程式碼
});

$(document).ready(function(){
    // 在文件載入完成後執行的程式碼
    // 可以在這裡進行頁面元素的操作，繫結事件等
});

$(function(){
    // 在文件載入完成後執行的程式碼
});

透過以上方法，你可以在頁面載入完成後執行相應的操作，確保你的 JavaScript 程式碼在正確的時機執行，提高使用者體驗和頁面互動的效果。

四、動畫效果

jQuery 是一個流行的 JavaScript 庫，它提供了許多簡單易用的方法來操作 HTML 元素、處理事件和執行動畫效果。以下是一些常用的 jQuery 動畫效果：

1、.show() 和 .hide()

這兩個方法可以用來顯示和隱藏元素，可以新增引數來控制動畫的速度和效果。

$('.element').show(1000); // 顯示元素，動畫持續 1 秒
$('.element').hide(500); // 隱藏元素，動畫持續 0.5 秒

2、.fadeIn() 、 .fadeOut() 和 fadeTo ()

這三個方法可以實現元素的淡入和淡出效果。

$('.element').fadeIn(1000); // 淡入元素，動畫持續 1 秒
$('.element').fadeOut(500); // 淡出元素，動畫持續 0.5 秒
$('.element').fadeTo(5000,0.5); // 元素將在 5 秒的時間內淡入到指定的不透明度 0.5

3、.slideDown()、.slideUp() 和 .slideToggle()

這些方法可以實現元素的下拉、上升和切換效果。

$('.element').slideDown(1000); // 下拉顯示元素，動畫持續 1 秒
$('.element').slideUp(500); // 上升隱藏元素，動畫持續 0.5 秒
$('.element').slideToggle(800); // 切換元素的顯示狀態，動畫持續 0.8 秒

五、補充

（1）each方法

  • 該方法接受一個回撥函式作為引數，在每個元素上執行此回撥函式。
  • 回撥函式提供兩個引數：
    • 第一個引數是當前處理的元素
    • 第二個引數是該元素在集合中的索引位置。
  • 透過在回撥函式中對每個元素進行操作，可以實現批次處理元素的目的
  • 一個引數
$("div")
// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$("div").each(function (params) {console.log(params)  
})
/* VM271:1 0
VM271:1 1
VM271:1 2
VM271:1 3
VM271:1 4
VM271:1 5
VM271:1 6
VM271:1 7
VM271:1 8
VM271:1 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */
  • 兩個引數
$("div").each(function (params,obg) {console.log(params,obg)    
})
/* VM302:1 0 <div>​1​</div>​
VM302:1 1 <div>​2​</div>​
VM302:1 2 <div>​3​</div>​
VM302:1 3 <div>​4​</div>​
VM302:1 4 <div>​5​</div>​
VM302:1 5 <div>​6​</div>​
VM302:1 6 <div>​7​</div>​
VM302:1 7 <div>​8​</div>​
VM302:1 8 <div>​9​</div>​
VM302:1 9 <div>​10​</div>​
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */
  • 陣列作為引數
$.each([11,22,33,44,55,66],function (params,obg) {console.log(params,obg)})

/* VM368:1 0 11
VM368:1 1 22
VM368:1 2 33
VM368:1 3 44
VM368:1 4 55
VM368:1 5 66
(6) [11, 22, 33, 44, 55, 66] */

each 可以 幫我們 省略 for 迴圈

（2）data方法

能讓我們的標籤幫我們儲存資料，但是標籤看不見

  • 給標籤 div 新增了一個 屬性是 info 值是 資訊
$('div').data('info','這是一條咪咪資訊!')

// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
  • 在標籤本身的程式碼中看不到，但是可以透過以下方法進行取值
$('div').first().data()
// {info: '這是一條咪咪資訊!'}
$('div').last().data()
// {info: '這是一條咪咪資訊!'}
  • 刪除 某個標籤 data 中 對應的資料
$('div').first().removeData('info')
// S.fn.init [div, prevObject: S.fn.init(10)]
$('div').first().data()
// {}

相關文章