《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进行编程之前，取回该$的操作权。

方式１：

jQuery.noConflict();

方法２：

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 阻止默认操作

实现方式１：return false;

<a href="#">我是被阻止的超链接</a><script type='text/javascript'>    $("a").click(function(){        return false;    });</script>

实现方式２：event.preventDefault()

<a href="#">我是被阻止的超链接</a><script type='text/javascript'>    $("a").click(function(event){        event.preventDefault();    });</script>

3.4.4 事件委托

我们知道jQuery是事件冒泡的，所以当一个元素下有多个子元素具有相同的操作时，就可以将这些相同的事件绑定在一个父元素中，如上面的例子中，我们想让用户单击span p时跳出一个alert()框，并在这个框中显示是哪个元素被点击了。

实现方式１：

$('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事件。