1、$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。在浏览器进行下载过程中,只要DOM完全就绪,就可以使用,不必等待整个页面下载完成后,再进行相关的操作。其次,在使用JavaScript对页面进行操作时,不用考虑页面加载的次序。再者,同过ready()机制能够很好的实现一个页面执行多个脚本
简写:$(document).ready(function(){ ...//代码... })
$().ready(function(){ ...//代码... })
$(function(){ ...//代码... })
推荐使用较长的形式,因为较长的形式能够更清楚的表达代码在做什么。
PS:jQuery能够很好的与其他库实现共存,当然要使用的是一个.noConflict()的方法。$==jQuery
2、简单事件
渐进增强原则:如果浏览器不支持JavaScript,则将其功能隐藏起来,最好的是,能够在当前页面的替代版本而仍然起到应有的作用。
bind()方法:指定任何JavaScript事件,并为该事件添加一种行为。
简写事件方法:鉴于为某个事件(例如简单的单击事件)绑定处理程序极为常用,jQuery提供了一种简化事件操作的方式。
jQuery为标准的DOM事件提供了响应的简写事件方法:
blur\\mousedown\\change\\mousemove\\click\\mouseout\\dblclick\\mouseover\\error\\mouseup\\focus\\resize\\keydown\\scroll\\keypress\\select\\keyup\\submit\\load\\unload
这些简写的方法,能够把一个事件处理程序绑定到同名事件上。
3、复合事件
.ready()
.toggle() 用户鼠标点击某个元素时,改变元素外观。优点:交替执行两种或更多种不同的操作语言,.toggle()的适用性更强
.hover() 用户鼠标指针悬停在某个元素上时,影响元素的外观。优点:解决跨浏览器的版本兼容问题;很好的解决了事件的冒泡处理问题。
4、事件旅程
事件捕获:从祖先元素一层层下次搜索,直至找到具体的元素。
事件冒泡:首先发送给最具体的元素,在这个元素获得响应机会之后,事件向上冒泡到更一般的元素。
他俩的共同之处是允许多个元素响应单击事件。
在执行过程中,首先,事件从一般元素到具体元素逐层捕获,然后,事件在通过冒泡返回DOM树顶层。而时间处理程序可以注册到这个过程中的任何一个阶段。
jQuery始终会在模型的冒泡阶段注册事件处理程序,因此,最具体的元素会首先获得响应事件的机会。在这样的过程中,就像打开了,潘多拉魔盒。
jQuery隐式迭代能力:一次隐藏所有按钮,而不需要使用包转元素。
5、通过事件对象改变事件的旅程
$(document).ready(function(){
$('#switcher').click(function(){
$('#switcher .button').toggleClass('hidden');
});
$('#switcher .button').bind('click',function(){
$('body').removeClass();
if(this.id == 'switcher-large'){
$('body').addClass('large')
}
else if(this.id == 'switcher-narrow'){
$('body').addClass('narrow')
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected')
});
});
事件对象:事件对象时一种JavaScript结构,它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含着与事件有关的信息,也提供了可以用来影响事件在DOM中传递进程的一些方法。为了在处理程序汇总使用事件对象,需要为函数添加一个参数:event。
事件处理程序中的变量event保存着事件对象,而event.target属性保存着发生事件的目标元素。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接受到事件的元素。
pe:
$(document).ready(function(){
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
});});
event.target的真正作用,是将事件的对象和html里面的元素真实的对应起来。click这样一个事件,如果不适用event.target来进行标记,那么,js文件无法识别这个事件,究竟是谁发起的。默认情况下,它将所有由click触发的响应全部由最具体的元素一直向外延伸。
event.target使得click有了明确的对象指向
停止事件传播
.stopPropagation()可以完全阻止事件冒泡。虽然存在跨浏览器环境中无法安全的使用,只要保证jQuery来注册所有的事件处理程序。
$('#switcher .button').click(function(event){ ..../code/.... event.stopPropagation();})
事件委托
事件委托是利用冒泡的一向高级技术,通过事件委托,可以借助一个元素上的事件的事件处理程序完成很多工作。
is()这个方法用于接收一个选择符表达是,然后用选择符来测试当前的jQuery对象。如果集合中至少有一个元素与选择符匹配,is()返回true。