成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

細(xì)說 jQuery 事件篇（二） - 處理簡單事件

ckllj / 2012人閱讀

摘要：我們可以利用可以對用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。其他類似的操作事件都可以通過這個(gè)方法，將處理事件的程序綁定到同名事件上面。

我們可以利用 jQuery 可以對用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。

增添樣式

基于用戶的事件，對特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見的情形，舉例說明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highlight 的樣式：

highlight 的樣式：

.highlight {
  border: 1px solid orange；
}

jQuery 代碼：

  $("input[type="text"]").on("click", function() {
    $(this).addClass("highlight");
  });

  
1.《Learning jQuery》 一書中先介紹使用 .on() 方法，但是書中也明確指明這不是最佳的方法，所以我就按照書中的節(jié)奏來記錄下筆記。

  2.這里的 this 指的是當(dāng)前的 DOM 元素，并不是 jQuery 對象。

效果為：

點(diǎn)擊后：

簡寫事件

在上例中，我們通過 .on() 方法來處理 click 事件，而 jQuery 實(shí)際上提供了一種更為簡單的方法，我們可以使用 .click() 方法來簡寫代替。
因此，上例中的 jQuery 代碼可以簡寫為：

$(function() {
  $("input[type="text"]").click(function() {
    $(this).addClass("highlight");
  });
})

此時(shí)，取得的效果是相同，不過代碼要比之前簡潔不少。
其他類似的 DOM 操作事件都可以通過這個(gè)方法，將處理事件的程序綁定到同名事件上面。

折疊樣式

對于上例中添加樣式的效果，我們希望在點(diǎn)擊第二次時(shí)又能取消該樣式，即常見的折疊樣式的需求，在 jQuery 中，我們可以通過 toggleClass 來實(shí)現(xiàn)。

$(function() {
  $("input[type="text"]").click(function() {
    $(this).toggleClass("highlight");
  });
})

此時(shí)點(diǎn)擊第一次后，highlight 樣式添加成功，點(diǎn)擊第二次后，樣式取消成功，如此這般。

移除樣式

假設(shè)原本輸入框是有指定樣式的，通過點(diǎn)擊輸入框后我們希望取消該樣式，我們可以使用 removeAttr 方法。

alert 樣式：

.alert {
  border: 1px solid red;
}

那么移除該樣式的 jQuery 代碼可以這樣寫：

  $("input[type="text"]").click(function() {
    $(this).removeClass("alert");
  });

而如果希望點(diǎn)擊輸入框后，先移除現(xiàn)有的 alert 樣式，而增添 highlight 樣式，則可以利用 jQuery 的連綴方法：

  $("input[type="text"]").click(function() {
    $(this).removeClass("alert").addClass("highlight");
  });

效果為：

點(diǎn)擊后：

參考

http://book.douban.com/subject/24669823/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78143.html

相關(guān)文章

  • 細(xì)說 jQuery DOM操作篇（二） - DOM 樹操作

    摘要：此時(shí)，點(diǎn)擊新建的將會(huì)觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。 我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個(gè) jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實(shí)際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來改變 DOM 樹的結(jié)構(gòu)。 創(chuàng)建元素 我們可以通過 $() ...

    Anchorer 評論0 收藏0

  • 細(xì)說 jQuery 事件篇（三） - 事件傳播

    摘要：是如何決定由哪個(gè)元素來處理事件的，以及又是如何優(yōu)化處理這個(gè)問題的，這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會(huì)導(dǎo)致意料之外的行為，例如在響應(yīng)事件時(shí)，依舊是上例，當(dāng)為最外層的添加一個(gè)事件。使用方法可以避免事件傳播導(dǎo)致的問題。 Javascript 是如何決定由哪個(gè)元素來處理事件的，以及 jQuery 又是如何優(yōu)化處理這個(gè)問題的，這些都涉及到了事件傳播。 事件傳播策略 當(dāng)頁面內(nèi)...

    Cc_2011 評論0 收藏0

  • 細(xì)說 jQuery 事件篇（四） - 改變事件過程

    摘要：事件對象是一種結(jié)構(gòu)，它會(huì)在元素獲得處理事件的機(jī)會(huì)時(shí)傳遞給調(diào)用的事件處理程序。事件對象的屬性指的是事件目標(biāo)，它將保存發(fā)生事件的目標(biāo)元素。所以，接下來我們就要想辦法改變事件過程來阻止這個(gè)行為。 在 《細(xì)說 jQuery 事件篇（三） - 事件傳播》 中提到了事件冒泡可能造成的弊端，當(dāng)時(shí)舉了 mouseout 的例子，對于 mouseout 這個(gè)特殊情況，我們可以用 hover 方法來解決，...

    nifhlheimr 評論0 收藏0

  • 細(xì)說 jQuery Ajax操作篇（一） - 數(shù)據(jù)加載

    摘要：同樣將其綁定在按鈕點(diǎn)擊事件上查看結(jié)果為這里需要注意，如果文檔內(nèi)的格式錯(cuò)誤，雖然不會(huì)報(bào)錯(cuò)，但是將無法執(zhí)行回調(diào)函數(shù)。 Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。 加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設(shè)當(dāng)前頁面為： load showImg(http://segmen...

    paulli3 評論0 收藏0

  • 細(xì)說 jQuery 事件篇（五） - 事件的移除和重綁定

    摘要：一種做法是在事件處理程序中使用條件語句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕后，所有的事件的處理程序又被重新綁定回來。 如果我們需要移除已經(jīng)注冊的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。 移除處理程序 假設(shè)有個(gè) div 和 button，當(dāng)我們點(diǎn)擊...

    boredream 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<