学习JQuery - 9

3. 键盘事件响应

我们知道js中响应键盘最常用的方法为keyup()，jQuery也是一样。

获得键值：

var key = String.fromCharCode(event.which);

定义键值：

var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};

我们希望鼠标移到“switcher”时变更颜色，移出时恢复。

css代码

.hover {
cursor: pointer;
background-color: #afa;
}

js代码

$('#switcher').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);

把隐藏“button”和设置文章样式分成2个函数

js代码1：

var setBodyClass = function(className) {
$('body').removeClass().addClass(className);
$('#switcher button').removeClass('selected');
$('#switcher-' + className).addClass('selected');
$('#switcher').off('click', toggleSwitcher);
if (className == 'default') {
$('#switcher').on('click', toggleSwitcher);
}
};

“off()”事件表示关闭或者停止响应某个事件。

js代码2：

var toggleSwitcher = function() {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};

附：

chapter3-1.html(详见《学习jQuery-7》)

chapter03.css

@charset "utf-8";
/* CSS Document */
/***************************************
Default Styles
************************************** */

html, body {
margin: 0;
padding: 0;
}

body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#container {
font-size: 1.2em;
margin: 10px 2em;
}

h1 {
font-size: 2.5em;
margin-bottom: 0;
}

h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
/* Chapter Styles */
.chapter {
margin: 1em;
}
.switcher {
float: right;
background-color: #ddd;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
.switcher h3 {
margin: .5em 0;
}
#header {
clear: both;
}
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
.hidden {
display: none;
}
.selected {
font-weight: bold;
}
.hover {
cursor: pointer;
background-color: #afa;
}

chapter03-3.js

$(document).ready(function() {

var setBodyClass = function(className) {
$('body').removeClass().addClass(className);
$('#switcher button').removeClass('selected');
$('#switcher-' + className).addClass('selected');
$('#switcher').off('click', toggleSwitcher);
if (className == 'default') {
$('#switcher').click(toggleSwitcher);
}
};

var toggleSwitcher = function() {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};

$('#switcher').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);

$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
setBodyClass(bodyClass);
}
});

$('#switcher').on('click', toggleSwitcher);

$(document).keyup(function(event) {
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};
var key = String.fromCharCode(event.which);
if (key in triggers) {
setBodyClass(triggers[key]);
}
});
});

-------------------------------P.S.-------------祝大家新年快乐^_^,--------------------Happy new year, 2014---------------------------------