《JQuery基础教程》第四版课后练习代码--第三章

1、在Charles Dickens被单击时，给它应用selected样式

      $(function(){

   	$(".author").click(function(){
      	 	$(this).addClass("selected");
  	 })
	})

2、在双击标题（<h3 class="chapter-title">)时，切换章文本的可读性

   $(function(){
   	 $(".chapter-title").dblclick(function(){
      	 	 $(this).nextAll().toggleClass("hidden"); // nextAll()获得匹配元素集合中每个元素的所有跟随的同胞元素
    		})
	})

3、当用户按下向右方向键时，切换到下一个body类；右方向键的键码是39。

$(function(){
    var setBodyClass=function(className){
        $("body").removeClass().addClass(className);
        $(".switcher button").removeClass("selected");
        $("#switcher-"+className).addClass("selected");
    }
    $("#switcher-default").addClass("selected");//页面初始时默认为选中状态
    var bodyClass=["default","narrow","large"];
    var count=0;//设置一个计数器
    $(document).keyup(function(event){
        if (event.keyCode == 39) {
                setBodyClass(bodyClass[(count+1)%3]);//如果设置为count%3则在第一次按下右键时页面不会有反应（因为默认是setBodyClass[0]）
                count++;
            }
    })
})

设置计数器的方法从后台来讲不是非常好，因为多一个变量就会就给该变量多分配一个内存。比较好的方法是创建一个循环链表。设置循环链表还有个好处是如果要继续设置按下键盘左键可以改变body类，会更方便些。

今天还在网上看见一个个人觉得更好的、用的封装方法比较多的方法：

var setBodyClass=function(className){
    $("body").removeClass().addClass(className);
    $(".switcher button").removeClass("selected");
    $("#switcher-"+className).addClass("selected");
}
$("#switcher-default").addClass("selected");//页面初始时默认为选中状态
$(document).keyup(function (event) {
    var num=$(".switcher button").filter(".selected").index()-1;
    if(event.which==39) num=(num+1)%3;
    else if(event.which==37) num=(num-1)%3;
    else return false;
    var btnClassname=$(".switcher button").eq(num).attr("id").split("-")[1];
    setBodyClass(btnClassname);
    })

4、挑战：使用console.log()函数记录在段落中移动的鼠标的坐标位置。（注意：console.log()可以在FireFox的firebug扩展，Safari的Web Inspector或Chrome 、IE中的developer tools中使用）

两种方法：

$(function(){
    $(document).mouseover(function(event) {
            console.log(event.pageX);
            console.log(event.pageY);
    })
})

或者console.log(event.clientX + ',' + event.clientY);

sreenX、clientX和pageX的区别（摘抄）：

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

5、挑战：使用.mousedown()和.mouseup()跟踪页面中的鼠标事件。如果鼠标按键在按下它的地方被释放，则为所有段落添加hidden类。如果是在按下它的地方之下被释放的，删除所有段落的hidden类。(这

$(function(){
    var posx_down,posx_up,posy_down,posy_up;
    $(document).mousedown(function(event){
        posx_down=event.clientX;
        posy_down=event.clientY;
    })
    $(document).mouseup(function(event){
        posx_up=event.clientX;
        posy_up=event.clientY;
        if(posx_down==posx_up&&posy_down==posy_up){
            $("p").addClass("hidden");
        }else if(posy_down<posy_up){
            $("p").removeClass("hidden");
        }
    })
})