jQuery基础教程第四版 第3章学习笔记
来源:互联网 发布:filezilla是什么软件 编辑:程序博客网 时间:2024/05/16 11:38
第3章
3.1 在页面加载后执行任务
3.1.1 代码执行的时机选择
① 当文档完全下载到浏览器中时,会触发window.onload事件,意味着页面上的全部元素对于JavaScript而言都是可以操作的。
② 通过
3.1.3 .ready()的简写形式
①
//这里是代码……
});
可以简写成:
$(function() {
//这里是代码……
}
3.1.4 向.ready()回调函数中传入参数
3.2 处理简单的事件
3.2.1 简单的样式转换器
① 在用户单击按钮时执行,需要引入.on()方法。通过这个方法,可以指定任何DOM事件,并为该事件添加一种行为。此时,事件是click。
eg: (‘#switcher-large’).on(‘click’,function(){ });
3.2.2 启用其他按钮
3.2.3 利用事件处理程序的上下文
① 当触发任何事件处理程序时,关键字this引用的都是携带相应行为的DOM元素。通过在事件处理程序中使用(this),可以为相应的元素创建jQuery对象,然后就如同使用CSS选择符找到该元素一样对它进行操作。
3.2.4 使用事件上下文进一步减少代码
上下文关键字this引用的是DOM元素,而不是jQuery对象,所以可以使用原生的DOM属性来确定被单击元素的ID。
3.2.5 简写的事件
3.2.6 显示和隐藏高级特性
jQuery的toggleClass()方法,能够根据相应的类是否存在而添加或删除类。
3.3 事件传播
3.3.1 事件的旅程
① 事件捕获:事件首先会交给最外层的元素,接着再交给更具体的元素。
上图中,单击事件首先会传递给
② 事件冒泡:事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。
上图中:会首先处理事件,然后按照顺序依次是和
③ 最终出台的DOM标准规定应该同时使用这两种策略:首先,事件要从一般元素到具体元素逐层捕获,然后,事件再通过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一个阶段。
jQuery始终会在模型的冒泡阶段注册事件处理程序。因此,我们总是可以假定最具体的元素会首先获得响应事件的机会。
3.3.2 事件冒泡的副作用
事件冒泡可能会导致始料不及的行为,特别是在错误的元素响应mouseover或mouseout事件的情况下。
3.4 通过事件对象改变事件的旅程
事件对象是一种DOM结构,他会在元素获得处理事件的机会时传递给被调用的事件处理程序。这个对象中含着与事件有关的信息(例如事件发生时的鼠标指针位置),也提供了可以用来影响事件在DOM中传递进程的一些方法。
3.4.1 事件目标
事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。 通过.target,可以确定DOM中首先接收到事件的元素(即实现被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素。
3.4.2 停止事件传播
事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。与.target类似,这个方法也是一种基本的DOM特性。
3.4.3 阻止默认操作
.stopPropagation()方法不能禁止默认操作(例如,当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生)。.preventDefault()方法则可以在触发默认操作之前终止事件。
3.4.4 事件委托
事件委托就是利用冒泡的一项高级技术。想为更多元素注册处理程序,可以只在DOM中的一个祖先元素上指定单击处理程序。由于事件会冒泡,未遭拦截的单击事件最终会到达这个祖先元素,而我们可以在此时再作出相应处理。
3.4.5 使用内置的事件委托功能
3.5 移除事件处理程序
3.5.1 为事件处理程序添加命名空间
事件命名空间,即在绑定事件时引入附加信息,以便将来识别特定的处理程序。要使用命名空间,需要退一步使用绑定事件处理程序的非简写方法,即.on()方法本身。
- jQuery基础教程第四版 第3章学习笔记
- 学习笔记:《jQuery基础教程》第四版第二章课后练习
- 学习笔记:《jQuery基础教程》第四版第三章课后练习
- 学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画
- jQuery基础教程第四章学习
- 学习笔记:《jQuery基础教程》第四版第五章课后练习——操作DOM
- 学习笔记:《jQuery基础教程》第四版第六章课后练习——通过Ajax发送数据
- Object-C基础教程第四版学习笔记
- Python基础教程学习笔记----第四章 字典
- 《JQuery基础教程》第四版课后练习代码--第四章
- jQuery基础教程(第四版)
- 《Python基础教程 第2版·修订版》第3章 使用字符串(学习笔记)
- jQuery基础教程学习笔记·第二章
- jQuery基础教程学习笔记·第三章
- 《Ajax基础教程》学习笔记---第2章
- 《Python基础教程》第20章学习笔记
- jQuery基础教程-第3章练习
- 《JQuery基础教程》第四版课后练习代码--第三章
- ECO论文翻译:Efficient Convolution Operators for Tracking论文翻译
- C语言中auto,register,static,const,volatile的区别详细解析
- ps备忘2
- php 不等待返回的实现方法(异步调用)
- 堆排序(heapsort)
- jQuery基础教程第四版 第3章学习笔记
- 深度学习与计算机视觉 看这一篇就够了
- 写了个最low的"多"条件查询,JDBC实现,记录一下。
- ListView与BaseAdapter的优化
- SpringMvc 文件上传
- DeepLearning.ai学习笔记(一)神经网络和深度学习--Week3浅层神经网络
- HTML5里video标签支持哪些格式的视频文件?
- Android 开发调用相机拍照如何获取清晰照片
- D30 Scala自定义排序和stage分区