JQuery快速学三之一.docx - 冰豆网
JQuery快速学三之一.docx
- 文档编号：10912874
- 上传时间：2023-02-23
- 格式：DOCX
- 页数：14
- 大小：18.58KB
JQuery快速学三之一.docx
《JQuery快速学三之一.docx》由会员分享，可在线阅读，更多相关《JQuery快速学三之一.docx（14页珍藏版）》请在冰豆网上搜索。
JQuery快速学三之一
JQuery快速学三之一（事件）
首先我们来看一看JQuery事件，包括如下几部分：
1.页面载入ready（fn）
2.事件处理bind,one,trigger,triggerHandler,unbind
3.事件委派live,die
4.事件切换hover,toggle
5.普通事件click,blur,focus......
页面载入：
ready事件是JQuery的一个标志性事件,ready事件和传统的javascript的load事件有点相像，主要区别是在执行时机方面。
我们先来看一个例子吧：
[javascript]
functionTest（）{
alert（"JavaScript"）;
}
functionTest2（）{
alert（"JQuery"）;
}
$（document）.ready（function（）{
Test2（）;
}）
functionTest（）{
alert（"JavaScript"）;
}
functionTest2（）{
alert（"JQuery"）;
}
$（document）.ready（function（）{
Test2（）;
}）
运行这个例子，会发现先弹出"JQuery",然后再弹出"JavaScript",这是他们两者之间的一个明显的区别。
区别：
1.）window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器之后才执行，即JavaScript此时才可以访问网页中的任何元素（图片，div）等等。
而通过JQuery中的$（document）.ready（）方法注册的事件处理程序，在DOM完全就绪时就可以被调用了,也就是说JQuery的ready方法优于js的onload方法。
2.）JQuery中的$（document）.ready（）方法可以多次使用，而window.onload只加载一次，需要点技巧才可以多次使用（想知道的话，XX一下哈）。
案例：
[javascript]
$（function（）{
JQTe（）;
}）
$（function（）{
JQTe2（）;
}）
functionJQTe（）{
alert（"abc1"）;
}
functionJQTe2（）{
alert（"abc2"）;
}
functionJs（）{
alert（"0"）;
}
functionJs2（）{
alert（"1"）;
}
window.onload=Js;
window.onload=Js2;
$（function（）{
JQTe（）;
}）
$（function（）{
JQTe2（）;
}）
functionJQTe（）{
alert（"abc1"）;
}
functionJQTe2（）{
alert（"abc2"）;
}
functionJs（）{
alert（"0"）;
}
functionJs2（）{
alert（"1"）;
}
window.onload=Js;
window.onload=Js2;
运行如上的案例：
我们会发现通过JQuery中的$（document）.ready（）方法弹出了两个提示框，而传统的JavaScript只执行了最后一个。
温馨提示：
$（document）.ready（function（）{...Code..}）可以简写成：
$（function（）{..Code..}）
事件处理：
（bind,one,trigger,triggerHandler,unbind）
bind事件:
绑定的元素必定要事先存在，后添加进来的元素无效（例如通过js动态添加新的元素，该元素将不会被bind事件所绑定）。
语法：
$（选择器）.bind（'事件',function（）{}）;
例如：
html代码：
Div内容
js代码：
$（'#abc'）.bind（'click',function（）{
alert（'bind事件'）;
}）;
one事件：
为元素绑定一次性事件，该事件只会执行一次。
语法：
$（'选择器'）.one（'click',function（）{}）
例如：
html代码：
Div内容
js代码：
$（'#abc'）.one（'click',function（）{
alert（'只会弹出一次'）;
}）;
trigger事件：
模拟用户触发事件，该事件会引起冒泡（冒泡事件会在稍后提到）
例如：
html代码：
Div2内容Div内容
js代码：
[javascript]
$（function（）{
$（'#abc'）.click（function（）{
alert（'test'）;
}）
$（'#abc2'）.click（function（）{
alert（'test2'）;
}）
$（'#abc'）.trigger（'click'）;
$（'#abc'）.click（）;
}）
$（function（）{
$（'#abc'）.click（function（）{
alert（'test'）;
}）
$（'#abc2'）.click（function（）{
alert（'test2'）;
}）
$（'#abc'）.trigger（'click'）;
$（'#abc'）.click（）;
}）程序运行的时候为id为abc的元素绑定单击事件，并且为id为abc2的元素也绑定单击事件，绑定完成之后使用trigger模拟用户的点击操作，程序弹出alert（'test'）;和alert（'test2'）;
如此可见，该trigger会触发事件冒泡，模拟事件还可以使用如上写到的直接调用事件（$（'#abc'）.click（）），不为事件指定方法体即可，实现的效果和trigger一致。
要阻止事件冒泡可以使用：
stopPropagation（）,该方法稍后会提到。
triggerHandler事件：
与trigger事件相似，有如下不同之处：
1）triggerHandler方法并不会触发事件的默认行为。
（例如，表单提交）。
2）trigger（）会影响所有与jQuery对象相匹配的元素，而triggerHandler（）仅影响第一个匹配到的元素。
3）使用triggerHandler（）创建的事件，并不会在DOM树中向上冒泡。
如果事件没有被目标元素直接处理，那么它就不会进行任何处理。
4） 与普通的方法返回jQuery对象（这样就能够使用链式用法）相反，triggerHandler（）返回最后一个处理的事件的返回值。
如果没有触发任何事件，会返回undefined。
unbind事件：
移除bind方法绑定的事件。
1）当直接使用unbind方法的时候，将去除对应元素上所有的bind方法绑定的事件，例如:
$（'#abc'）.unbind（）;
2）当然unbind方法也可以指定移除具体的事件，例如：
$（'#abc'）.unbind（'click'）;移除id为abc上的click事件。
3）通过指定click事件类型,只有该事件类型的处理程序将解除绑定。
但是,这种方法有种负面影响，这是因为有可能在代码的其它地方在相同的元素上绑定了相同的事件处理。
为了避免该问题，对于一个健壮性和扩展性强的应用程序而言，通过在使用该方法时，会传入两个参数，例如：
$（'#abc'）.unbind（'click',handler）;
对于指定两个参数的情况下：
下面的代码实现上是错误的：
[javascript]
$（function（）{
$（'#abc'）.bind（'click',function（）{
alert（'aa'）;
}）
$（'#btnTest'）.click（function（）{
$（'#abc'）.unbind（'click',function（）{
alert（'abc'）;
}）;
}）
}）
Div内容
按钮
$（function（）{
$（'#abc'）.bind（'click',function（）{
alert（'aa'）;
}）
$（'#btnTest'）.click（function（）{
$（'#abc'）.unbind（'click',function（）{
alert（'abc'）;
}）;
}）
}）
Div内容
按钮
这里当点击按钮移除元素id为abc的单击事件时，移除将会失败，程序会认为这是两个不同的事件。尽管上述代码中，两个匿名函数的内容是一样的，但是它们是在不同的地方被创建的，因此JavaScript会将它们当成是不同的函数对象。
若要解除绑定特定的事件处理函数，我们需要的是指向该函数的引用，而不是内容相同的不同函数。
4）为了移除绑定处理程序的范围进一步的缩小，我们可以使用unbind（）来移除相应命名空间的处理程序。
例如：
[javascript]
$（function（）{
$（'#txtName'）.bind（'click.abc1',function（）{
alert（'clickabc1命名空间'）;
}）;
$（'#txtName'）.bind（'click.abc',function（）{
alert（'click'）;
}）;
$（'#txtName'）.bind（'blur.abc',function（）{
alert（'blur'）;
}）;
$（'#btnTest'）.click（function（）{
$（'#txtName'）.unbind（'click.abc'）;//只移除id为txtName元素上命名空间为.abc的click事件
}）
$（'#btnTest2'）.click（function（）{
$（'#txtName'）.unbind（'.abc'）;//移除id为txtName元素上命名空间为.abc的所有事件
}）
}）
移除abc命名空间中的点击事件
移除abc命名空间中的所有事件
$（function（）{
$（'#txtName'）.bind（'click.abc1',function（）{
alert（'clickabc1命名空间'）;
}）;
$（'#txtName'）.bind（'click.abc',function（）{
alert（'click'）;
}）;
$（'#txtName'）.bind（'blur.abc',function（）{
alert（'blur'）;
}）;
$（'#btnTest'）.click（function（）{
$（'#txtName'）.unbind（'click.abc'）;//只移除id为txtName元素上命名空间为.abc的click事件
}）
$（'#btnTest2'）.click（function（）{
$（'#txtName'）.unbind（'.abc'）;//移除id为txtName元素上命名空间为.abc的所有事件
}）
}）
移除abc命名空间中的点击事件
移除abc命名空间中的所有事件
5）unbind（）也可以在事件处理内部解除事件处理。例如：
[javascript]
varnum=1;
$（function（）{
$（'#btnTest'）.bind（'click',function（event）{//注意此处要加event
alert（'第'+num+"次"）;
num++;
if（num>3）{
$（this）.unbind（event）;
}
}）
}）
调用3次就移除事件
varnum=1;
$（function（）{
$（'#btnTest'）.bind（'click',function（event）{//注意此处要加event
alert（'第'+num+"次"）;
num++;
if（num>3）{
$（this）.unbind（event）;
}
}）
}）
调用3次就移除事件
当我们点击按钮到第四次时，事件已经不会再触发了，事件已经被移除。注意：
JQuery1.7版本以上推荐使用off移除事件处理。
off事件：
移除一个事件处理。
语法：
$（'元素选择器'）.off（事件event,[选择器selector],[,函数]）;
[javascript]
$（function（）{
$（'#abc'）.bind（'click',function（）{
$（'body'）.on（'click','#abc1',aClick）;//当点击id为abc的元素时，为body下的id为abc1的元素附加事件aClick
}）;
functionaClick（）{
alert（'text'）;
}
$（'#btnTest'）.click（function（）{
$（'body'）.off（'click','#abc1',aClick）;//去除body中id为abc1的元素的aClick事件
}）
}）
div内容
abc1内容
off移除
$（function（）{
$（'#abc'）.bind（'click',function（）{
$（'body'）.on（'click','#abc1',aClick）;//当点击id为abc的元素时，为body下的id为abc1的元素附加事件aClick
}）;
functionaClick（）{
alert（'text'）;
}
$（'#btnTest'）.click（function（）{
$（'body'）.off（'click','#abc1',aClick）;//去除body中id为abc1的元素的aClick事件
}）
}）
div内容
abc1内容
off移除
注意：当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。
事件委派:
（live,die,on）
Jquery1.7版本上已经不推荐使用live,die,他们都有对应的优化使用方案：
live推荐使用on,die推荐使用off,在这里我们就讲解on的用法。
on:
在选定的元素上绑定一个或多个事件处理函数。
语法：
on（事件event[,选择器selector][,要传递给事件处理函数的event.data。
data][,事件被执行要触发的函数]）
$（'#abc'）.on（'click',function（）{}）;//为id为abc的元素绑定一个点击事件，无论这个元素是已经存在的，还是动态创建（后续添加进来的）
事件切换:
（hover，toggle）
hover事件：
是mouseenter和mouseleve方法的结合,这是官方API给出的，其实这两个方法就是我们所熟知的mouseover和mouseout。
因为mouseenter和mouseleve这两个方法是专门针对IE的，JQuery对其进行了优化和适用。
[javascript]
$（function（）{
$（'div'）.hover（function（）{
alert（'a'）;//鼠标悬浮弹出
},function（）{
alert（'b'）;//鼠标离开位置弹出
}）
}）
200px;height:
200px;background:
#ccc;">
$（function（）{
$（'div'）.hover（function（）{
alert（'a'）;//鼠标悬浮弹出
},function（）{
alert（'b'）;//鼠标离开位置弹出
}）
}）
200px;height:
200px;background:
#ccc;">
toggle事件:显示或隐藏事件，当元素是隐藏时，把元素显示出来，当元素是显示时，把元素进行隐藏。
语法一：
toggle（[,时间][,执行完触发的函数]）
语法二：
toggle（options）,有如下附加参数：
1）duration运行时间，
2
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
JQuery
快速
之一
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
《Java程序设计》考试大纲及样题试行.docx
