《jQuery基础教程》第三章摘记
很久很久之前摘记过《jQuery基础教程》第二章摘记,今天来更第三章。
3.1 在页面加载后执行任务
3.1.1 代码执行时机选择
- window.onload
- $(document).ready()
两者之间的区别:
当文档完全下载到浏览器中时,会触发window.onload事件。这意味着页面上的全部元素对javascript而言都是可以操作的,这种情况对编写功能性的代码非常有利,因为无需考虑加载的次序。
另一方面,通过$(document).ready()注册的事件处理程序,则会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,却不意味着所有关联文件都已经下载完毕。换句话说,当HTML下载完成并解析为DOM树之后,代码就可以运行。
简单点来说就是$(document).ready()要优先于window.onload执行。
3.1.2 基于一个页面执行多个脚本
window.onload只能保存一个函数,如:
function onload(){
//code...
}
function another(){
//code...
}
window.onload=onload;
window.onload=another;
则第二个函数会覆盖第一个函数。并且当这样编写时:
window.onload=onload();
会直接执行onload()
函数,这里是调用该函数,而不是引用该函数。
另外穿插一个额外知识点:
无论是window.onload=onload
还是$(document).ready(onload)
都无法在调用的时候传入参数,不仅如此,任何使用这种方式调用函数的时候都无法往其中传入参数,所以解决的办法就是添加一个中间的过渡函数,如:
function temp(){
var param='';
onload(param);
}
window.onload(temp);
3.1.3 ready()的简写形式
# 完全形式
$(document).ready(function(){});
# 简写形式
$(function(){});
3.1.4 向.ready()回调函数中传入参数
好像是什么对$
的使用权,我也不是很懂,只是说当一个页面中有多种javascript库函数时(jQuery也是javascript的一种库函数),会引起对$
操作符的竞争,比如在另一个库函数中,$
表示的是实例化一个该库函数的对象,那么在接下来的过程中,调用$()
的形式就不是实例化一个jQuery对象了,而这样很容易引起问题,所以解决办法就是在开始使用jQuery进行编程之前,取回该$
的操作权。
方式1:
jQuery.noConflict();
方法2:
jQuery(document).ready(function($){
//这里就可以使用$了
});
或者可以使用刚才写的简写形式:
jQuery(function($){
//这里就可以正常使用$了
});
从上面的代码就可以看出,我们原先的情况就是使用$
代替jQuery
。
3.2 处理简单的事件-
3.2.1 简单的样式转换器
先把例子贴出来,接下来的讲解都是根据这个例子来的:
<style type='text/css'>
.large{width:400px}
.narrow{width:200px}
</style>
<div id='switcher' class='switcher'>
<h3>样式转换</h3>
<button id='switcher-default'>恢复默认样式</button>
<button id='switcher-narrow'>变窄</button>
<button id='switcher-large'>变宽</button>
</div>
为按钮添加事件:
$(document).ready(function(){
$("#switcher-large").on('click',function(){
$("body").addClass('large');
});
});
这里调用的函数是:on
3.2.2 启用其他按钮
这一段很简单,而且后面有更高级的编写方法,我就开始跳了。
3.2.3 利用事件处理程序的上下文
3.2.4 使用事件上下文进一步减少代码
3.2.5 简写的事件
//原先的形式
$('#switcher').on('click',function(){});
//简写的形式
$('#switcher').click(function(){});
3.2.6 显示和隐藏高级特性
这个名字没有多大的关系,其实就是一个函数:toggleClass('className')
,这个函数的作用就是在奇数次调用时为调用对象添加该属性,在偶数次调用时,删除该属性。
3.3 事件传播
先不要纠结什么是事件的传播,先接着往下看。
3.1.1 事件的旅程
先看下面这个例子:
<div class='foo'>
<span class='bar'>
<a href='#'>
我是div span a
</a>
</span>
<p>
我是div p
</p>
</div>
当对div
设置点击事件后,div
和该元素下的全部子元素都会监听该单击事件,这叫做事件捕获,即点击div
下的span
也会触发div
的单击事件。
而另一种相反的策略则是事件冒泡。如为div
添加单击事件,div
下的子元素不会监听该事件,而当为span
设置单击事件后,div
会监听该事件,与事件捕获是相反的操作。
jQuery
采用的是事件冒泡。
3.2.2 事件冒泡的副作用
在上面的例子中,假设为span
和div
同时设置了单击事件,而且这两个事件需要分别单独执行,那么事件冒泡就会成为一个问题。如,由于事件冒泡,div
会监听span
的单击事件,当点击span
时,也会触发div
的单击事件,这个时候的解决办法是使用事件对象。
$("#foo").click(function(event){
if(event.target==this){
//执行div的单击函数
}else{
//执行span的单击函数
}
});
这里的重点就是event.target=this
。
其中的知识点:
- event表示的是事件对象,即该单击事件本身
- event.target则是该事件的DOM对象,在上述代码中,可能值是
div span a p
- this则是
div
,即#switcher
3.4.2 停止事件传播
除了上面的使用event.target
进行判断之外,还可以使用propagation
阻止事件的冒泡。例如,对span
设置单击事件时:
$('span').click(function(event){
//code...
event.propagation();
});
这样就不会向上冒泡,div
就不会监听该click
事件了。
3.4.3 阻止默认操作
实现方式1:return false;
<a href="#">我是被阻止的超链接</a>
<script type='text/javascript'>
$("a").click(function(){
return false;
});
</script>
实现方式2:event.preventDefault()
<a href="#">我是被阻止的超链接</a>
<script type='text/javascript'>
$("a").click(function(event){
event.preventDefault();
});
</script>
3.4.4 事件委托
我们知道jQuery
是事件冒泡的,所以当一个元素下有多个子元素具有相同的操作时,就可以将这些相同的事件绑定在一个父元素中,如上面的例子中,我们想让用户单击span p
时跳出一个alert()
框,并在这个框中显示是哪个元素被点击了。
实现方式1:
$('span').click(function(){
alert('span元素被点击了');
});
$('p').click(function(){
alert('p元素被点击了');
});
或者我们可以把上述功能写进div
的单击事件中:
$("div").click(function(event){
if($(event.target).is('span')){
alert('span元素被点击了');
}else{
alert('p元素被点击了');
}
});
当span p
元素被点击后,点击事件会进行冒泡,最终被div
元素接收,这里我们使用了$(event.target)
,$()
的作用是获取一个jQuery
对象,而event.target
则是获取该单击对象。而函数is()
则是jQuery
的一个函数,在其中可以填写入jQuery支持的选择符,如果符合则返回true
。
3.4.5 使用内置的事件委托功能
上面的那段代码,我们可以使用.on()
函数的另一种用法:
$("div").on('click','span',function(){
alert('span元素被点击了');
});
可以看到,就是把$(event.target).is('span')
中的span
传入到了第二个参数,这里仅仅起演示所用,所以具体功能实现的并不完全。
3.5 移除事件处理程序
$("span").off('click');
上面这样就是移除了span
元素的click
事件。
3.5.1 为事件程序添加命名空间
//这里就为该单击事件设置了命名空间:NameSpace,当然,名字你随便起
$("span").on('click.NameSpace',function(){});
//移除该事件时,也需要指定命名空间
$("span").off("click.NameSpace");
3.5.2 重新绑定事件
就是使用.on()
配合将函数传递给一个变量,来实现事件的重新绑定
var functionName=function(){};
$("span").on('click',funcionName);
$("span").off("click");
$("span").on("click",functionName);
这里再穿插一个,使绑定的函数仅能生效一次的方法:.one()
。
var functionName=function(){};
$("span").one("click",functionName);
3.6 模仿用户操作
其实就是人为触发一些函数
$("span").trigger('click');
这样就在用户点击的情况之外触发了span
的click
事件。