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