学习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---------------------------------