细说 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 对象。

效果为:

细说 jQuery 事件篇(二) - 处理简单事件

点击后:

细说 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');
  });

效果为:

细说 jQuery 事件篇(二) - 处理简单事件

点击后:

细说 jQuery 事件篇(二) - 处理简单事件

参考

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


8 responses on “细说 jQuery 事件篇(二) – 处理简单事件

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>