摘要:我們可以利用可以對用戶發起的事件進行處理,這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法,將處理事件的程序綁定到同名事件上面。
我們可以利用 jQuery 可以對用戶發起的事件進行處理,這里以樣式轉換為例來說明。
增添樣式基于用戶的事件,對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形,舉例說明,當用戶點擊輸入框后,會增添 highlight 的樣式:
highlight 的樣式:
.highlight { border: 1px solid orange; }
jQuery 代碼:
$("input[type="text"]").on("click", function() { $(this).addClass("highlight"); });
1.《Learning jQuery》 一書中先介紹使用 .on() 方法,但是書中也明確指明這不是最佳的方法,所以我就按照書中的節奏來記錄下筆記。
2.這里的 this 指的是當前的 DOM 元素,并不是 jQuery 對象。
效果為:
點擊后:
簡寫事件在上例中,我們通過 .on() 方法來處理 click 事件,而 jQuery 實際上提供了一種更為簡單的方法,我們可以使用 .click() 方法來簡寫代替。
因此,上例中的 jQuery 代碼可以簡寫為:
$(function() { $("input[type="text"]").click(function() { $(this).addClass("highlight"); }); })
此時,取得的效果是相同,不過代碼要比之前簡潔不少。
其他類似的 DOM 操作事件都可以通過這個方法,將處理事件的程序綁定到同名事件上面。
對于上例中添加樣式的效果,我們希望在點擊第二次時又能取消該樣式,即常見的折疊樣式的需求,在 jQuery 中,我們可以通過 toggleClass 來實現。
$(function() { $("input[type="text"]").click(function() { $(this).toggleClass("highlight"); }); })
此時點擊第一次后,highlight 樣式添加成功,點擊第二次后,樣式取消成功,如此這般。
移除樣式假設原本輸入框是有指定樣式的,通過點擊輸入框后我們希望取消該樣式,我們可以使用 removeAttr 方法。
alert 樣式:
.alert { border: 1px solid red; }
那么移除該樣式的 jQuery 代碼可以這樣寫:
$("input[type="text"]").click(function() { $(this).removeClass("alert"); });
而如果希望點擊輸入框后,先移除現有的 alert 樣式,而增添 highlight 樣式,則可以利用 jQuery 的連綴方法:
$("input[type="text"]").click(function() { $(this).removeClass("alert").addClass("highlight"); });
效果為:
點擊后:
參考http://book.douban.com/subject/24669823/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78143.html
摘要:此時,點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法,將新內容作為參數傳遞即可,例如修改上例中的文本內容方法同理。 我們知道通過 $() 函數可以訪問文檔中的元素,并返回一個 jQuery 對象,并且通過一系列方法,我們可以修改元素的樣式和內容,實際上,我們還可以通過該函數做更多的事情,例如添加、刪除、復制等操作來改變 DOM 樹的結構。 創建元素 我們可以通過 $() ...
摘要:是如何決定由哪個元素來處理事件的,以及又是如何優化處理這個問題的,這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會導致意料之外的行為,例如在響應事件時,依舊是上例,當為最外層的添加一個事件。使用方法可以避免事件傳播導致的問題。 Javascript 是如何決定由哪個元素來處理事件的,以及 jQuery 又是如何優化處理這個問題的,這些都涉及到了事件傳播。 事件傳播策略 當頁面內...
摘要:事件對象是一種結構,它會在元素獲得處理事件的機會時傳遞給調用的事件處理程序。事件對象的屬性指的是事件目標,它將保存發生事件的目標元素。所以,接下來我們就要想辦法改變事件過程來阻止這個行為。 在 《細說 jQuery 事件篇(三) - 事件傳播》 中提到了事件冒泡可能造成的弊端,當時舉了 mouseout 的例子,對于 mouseout 這個特殊情況,我們可以用 hover 方法來解決,...
摘要:同樣將其綁定在按鈕點擊事件上查看結果為這里需要注意,如果文檔內的格式錯誤,雖然不會報錯,但是將無法執行回調函數。 Ajax 通俗來講即不需要刷新頁面即可從服務器或客戶端上加載數據,當然這些數據的格式是多種多樣的。 加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段,并插入到指定位置,假設當前頁面為: load showImg(http://segmen...
摘要:一種做法是在事件處理程序中使用條件語句進行判斷,另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個按鈕,當點擊按鈕后,所有的事件的處理程序又被重新綁定回來。 如果我們需要移除已經注冊的事件處理程序,使某些處理程序失效。一種做法是在事件處理程序中使用條件語句進行判斷,另一種更徹底的做法就是直接移除該處理程序。 移除處理程序 假設有個 div 和 button,當我們點擊...
閱讀 2336·2021-11-23 09:51
閱讀 1137·2021-11-22 13:52
閱讀 3611·2021-11-10 11:35
閱讀 1187·2021-10-25 09:47
閱讀 2994·2021-09-07 09:58
閱讀 1059·2019-08-30 15:54
閱讀 2817·2019-08-29 14:21
閱讀 3025·2019-08-29 12:20