細說 jQuery 事件篇（二） - 處理簡單事件

咱們能夠利用 jQuery 能夠對用戶發起的事件進行處理，這裏以樣式轉換爲例來講明。

增添樣式

基於用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框後，會增添 highlight 的樣式：

<input type="text" />

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 方法。

<input type="text" class="alert" />

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/