jQuery 中的 this 關鍵字在很多情況下都非常有用。this 代表當前正在操作的 DOM 元素,可以用于遍歷、綁定事件以及調用方法。
例如,我們可以使用 this 遍歷所有 class 為 box 的元素并為它們添加點擊事件:
$('.box').click(function() {
$(this).addClass('active');
});
這個例子中,點擊時會為所點擊的元素添加 active 類名,而不是為所有 class 為 box 的元素都添加。
當然,在一些情況下,this 也可以代表整個 jQuery 集合,而不僅僅代表一個元素。例如:
$('.box').hover(function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
});
在這個例子中,當鼠標移入或移出 class 為 box 的元素時,該元素都會添加或移除 active 類名。
另外,this 在調用方法時也非常有用。我們可以在一個方法內使用 this,表示當前操作的元素。例如:
$.fn.toggleActive = function() {
return this.each(function() {
$(this).toggleClass('active');
});
};
$('.box').toggleActive();
在這個例子中,我們定義了一個名為 toggleActive 的方法,并將其添加到 jQuery 的原型中。使用該方法時,會為所有 class 為 box 的元素添加一個 toggleActive 方法,調用該方法后會為這些元素添加或移除 active 類名。
總的來說,this 關鍵字在 jQuery 中的應用非常多,大大提高了我們的編程效率。