Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 细说 jQuery 事件篇(二) – 处理简单事件

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

发布时间:2016-09-12   编辑:www.jquerycn.cn
jquery中文网为您提供细说 jQuery 事件篇(二) – 处理简单事件等资源,欢迎您收藏本站,我们将为您提供最新的细说 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/

您可能感兴趣的文章:
细说 jQuery 事件篇(二) – 处理简单事件
细说 jQuery 事件篇(三) – 事件传播
细说 jQuery 事件篇(四) – 改变事件过程
jQuery源码分析系列
细说 jQuery 事件篇(五) – 事件的移除和重绑定
解密jQuery事件核心 – 委托设计(二)
解密jQuery事件核心 – 自定义设计(三)
解密jQuery事件核心 – 模拟事件(四)
解密jQuery事件核心 – 绑定设计(一)
浅析jquery某一元素重复绑定的问题

[关闭]