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"); } }) })