jQuery极大增强并扩展了基本事件的处理机制,同时也让我们从恼人的兼容性问题中大大地解放。更好的消息是,jQuery进行事件处理更加简单易用,废话不多说,我们下面看如何用三步进行jQuery的事件处理。
选择元素
用户在Web页面中通常是和页面的元素进行交互的,比如点击某个按钮,移动到某个div,点击链接等等。当分配事件的时候,我们第一步要做的就是选择该元素。
jQuery支持使用css选择器来选择我们想要操作的页面部分,例如:
$('#id-name') //通过id选择器
$('.class-name') //通过类选择器
$('a') //通过元素选择器
为元素分配事件
在选择一个元素之后,接下来就是为该元素分配指定的事件,事件的种类很多。例如当我们的鼠标移动到某个<a>
链接上时:
$('a').mouseover()
当我们点击id为button1的按钮时:
$('#button1').click()
为事件传递函数
第二步只是指定了元素的某个事件,但是当该事件触发时具体做什么我们还没有指定。这一步就是为事件指定处理函数,即当事件触发时,执行该函数的操作。
比如,当我们鼠标移动到导航栏时,显示隐藏的id为submenu的子菜单:
$('#mainmenu').mouseover(function(){
$('#submenu').show();
}
);
上面是使用传入匿名函数作为参数的方法,当然我们也可以传递之前定义好的函数名,以上代码可以重写如下:
function showSubmenu(){
$('#submenu').show();
}
$('#mainmenu').mouseover(showSubmenu);
这里需要注意,在将函数名指定为事件处理参数时,是没有圆括号的。不知大家还记不记得,如果我们传入带圆括号的函数,那么该函数会立即执行,传入的参数实际上是该函数执行的结果。而没有圆括号,传入的是函数的引用。
$(document).ready()与window.onload
当文档完全下载到浏览器时,会触发window.onload事件,此时,页面上全部元素对于JavaScript而言都是可操作的。 $(document).ready()与之类似,但是有着微妙的差别。 $(document).ready()会在页面DOM准备就绪的时候就可以使用了。当页面需要加载较多的资源的时候这种差异便会体现出来。
比如我们在加载相册类的界面的时候,使用window.onload要等到每一幅图片都加载完毕才会触发该事件,这通常需要数秒的时间。如果在这之前用户进行了某种页面的操作,这些结果都是不可预料的。但是使用$(document).ready()会在DOM树解析完成时即可,也就是说页面会“更早地准备好”。
通常情况下$(document).ready()是一个更好的方法,作为jQuery初学者只需要知道每次把需要执行的代码放在以下片段即可:
- 1
- 2
- 3
由于$(document).ready()十分常用,可以简写为以下形式:
- 1
- 2
- 3
但是 (document).ready()这种写法会更清楚地表明 $( document).ready()是在document的jQuery对象上调用.ready()方法的代码过程。初学者没太大必要做这样的简化。
this和$(this)
this几乎是在所有语言中都随处可见的一个关键字,它的含义也万变不离其宗。在jQuery中,this引用正在调用匿名函数的元素。比如说:
- 1
- 2
- 3
上面的代码中的this就是对id为button1的按钮元素的引用。
$(this)则是this引用元素对应的jQuery对象,在jQuery中,对元素的操作是通过对应的jQuery对象实现的。this的使用十分常见,后面我们会举例说明。
常用的hover()和toggle()
hover()
在鼠标事件中,mouseover和mouseout事件通常组合使用。例如,当光标移动到某menu上,出现一个下拉菜单,移出时隐藏该下拉菜单。这样的组合十分常见,jQuery提供了一种简单的方式——hover()。
hover()接收2个函数作为参数,第一个函数表示当鼠标移动到该位置时执行的操作,第二个函数表示鼠标离开时所要执行的操作。我们以上面的menu操作为例,当鼠标移动到menu按钮时,弹出下拉菜单,移出时,隐藏下来菜单:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
该事件可以用以下图示表示:
toggle()
toggle()与hover()的用法十分相似,它接收若干个函数作为参数。第一次点击时执行第一个函数,第二次点击时执行第二个函数……,当执行到最后一个函数的时候,循环回第一个函数。
我们常用的是传入2个函数作为参数,比如第一次点击某个标题,显示段落内容,再次点击隐藏段落内容:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8