细说 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/