接着学习第三章。Learning jQuery总共13章，我计划学习到第8章。给个目录先：
第一章：开始 （略过）
第二章：选择元素 （已学）
第三章：操纵事件
第四章：样式和动画
第五章：操作DOM
第六章：Ajax
第七章：使用插件
第八章：插件开发
Performing tasks on page load
$(document).ready()执行jQuery函数的入口，window.onload是JS的原生接口。
原生JS绑定事件的做法：
function doStuff() {
//perform a task...
}
或者 window.onload = doStuff;
可以有多个$(document).ready()函数，它们按注册的顺序执行。
Simple events
首先是三个按钮的html代码：
- <div id="switcher" class="switcher">
- <h3>Style Switcher</h3>
- <button id="switcher-default">
- Default
- </button>
- <button id="switcher-narrow">
- Narrow Column
- </button>
- <button id="switcher-large">
- Large Print
- </button>
- </div>
有一段文字，默认的style是：
我们想点击一个按钮，style变成：
body.large .chapter {
font-size: 1.5em;
}
代码如下：
- $(document).ready(function() {
- $('#switcher-large').bind('click', function() {
- $('body').addClass('large');
- });
- });
就这么简单，绑定了一个click事件，让我们继续。
Event handler context
事件操纵上下文
（睡觉，明天继续，我擦嘞，2013年1月7日22:53:42）
（MD，2013年1月9日23:09:13，两天没更新了）
上下文也就是this指针，来一句代码：
$('#switcher button').bind('click', function() {
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
所有button去掉了selected属性，只有被点的那个有selected属性。
Shorthand events
事件速记
由
$('#button-id').bind('click', function(){
$('body').addClass('large');
});
变成：
$('#button-id').click(function(){
$('body').addClass('large');
});
Compound events组合事件
Showing and hiding advanced feature
.toggle()方法，接收两个或更多个函数参数，每次单击就顺序执行这些函数。
- $(document).ready(function() {
- $('#switcher h3').toggle(function() {
- $('#switcher button').addClass('hidden');
- },
- function() {
- $('#switcher button').removeClass('hidden');
- });
- });
Highlighting clickable items
首先CSS自己有一个伪类:hover，就是鼠标悬浮在上面的样式，IE6对此只支持连接。
我们可以借助.hover()方法。.hover()接收两个函数参数，一个在悬浮的时候执行，一个退出悬浮的时候执行。
- $(document).ready(function() {
- $('#switcher h3').hover(function() {
- $(this).addClass('hover');
- }, function() {
- $(this).removeClass('hover');
- });
- });
事件触发执行的钩子函数可以传入event object，即事件对象，其中包含此次事件的信息。
$(document).ready(function() {
$('#switcher').click(function(event) {
$('#switcher button').toggleClass('hidden');
});
});
这里的"event"可以是任何你想要的名字。
Event targets
$(document).ready(function() {
$('#switcher').click(function(event) {
if (event.target == this) {
$('#switcher button').toggleClass('hidden');
}
});
});
上面这段代码，当单击#switcher这个div时，只有单击的对象正是div时才执行，如果单击的是
中的子对象就不执行。
Removing an event handler
就是一个unbind方法
Simulating user interacton
模拟用户行为， .trigger()方法
$(document).ready(function() {
$('#switcher').trigger('click');
});
有一个简写的方法，即click不传任何参数，如下：
$(document).ready(function() {
$('#switcher').click();
});
键盘事件
- $(document).ready(function() {
- var triggers = {
- D: 'default',
- N: 'narrow',
- L: 'large'
- };
-
- $(document).keyup(function(event) {
- var key = String.fromCharCode(event.keyCode);
- if (key in triggers) {
- $('#switcher-' + triggers[key]).click();
- }
- });
- });
上面代码是一个例子。
书中每章的summary写的很具体，偷懒复制一下，不翻译了：
• Use the .ready() method to let multiple JavaScript libraries coexist on a
single page with .noConflict()
• React to a user's click on a page element with mouse event handlers and the
.bind() and .click() methods
• Observe event context to perform different actions depending on the element
clicked, even when the handler is bound to several elements
• Alternately expand and collapse a page element by using .toggle()
• Highlight elements under the mouse cursor by using .hover()
• Influence event propagation and default actions to determine which
elements get to respond to an event by using .stopPropagation() and
.preventDefault()
• Implement event delegation to reduce the number of bound event handlers
necessary on a page
• Call .unbind() to remove an event handler we're finished with
• Segregate related event handlers with event namespacing so they can be
acted on as a group
• Cause bound event handlers to execute with .trigger()
• Use keyboard event handlers to react to a user's key press with .keyup()
后记：
OK，第三章 操纵事件结束了，这周连上8天班，托了好久才学完这一章。总起来这章还是蛮简单的，绑定事件，响应事件就完事了。
继续第四章 样式和动画 的学习。
阅读(1285) | 评论(0) | 转发(0) |
