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