- 1.1. jQuery 事件注册
- 1.2. jQuery 事件处理
- 1.3. jQuery 事件对象
- 1.4. jQuery 拷贝对象
- 1.5. jQuery 多库共存
- 1.6. jQuery 插件
- 1.7. 综合案例: toDoList案例分析(代码略)
- 1.8. 今日总结
- 事件总结
学习目标:
能够说出4种常见的注册事件
能够说出 on 绑定事件的优势
能够说出 jQuery 事件委派的优点以及方式
能够说出绑定事件与解绑事件
能够说出 jQuery 对象的拷贝方法
能够说出 jQuery 多库共存的2种方法
能够使用 jQuery 插件
1.1. jQuery 事件注册
jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:
- 优点: 操作简单,且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。
语法
演示代码
1 | <body> |
1.2. jQuery 事件处理
因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下:
- on(): 用于事件绑定,目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
1.2.1 事件处理 on() 绑定事件
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
- click()
- on()
- one():绑定一次事件
ps:所有的参数中的function都可以填写false
语法
演示代码
1 | <body> |
1.2.2. 案例:发布微博案例
1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。
2.点击的删除按钮,可以删除当前的微博留言。
代码实现略。(详情参考源代码)
1.2.3. 事件处理 off() 解绑事件
当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ;
语法
演示代码
1 | <body> |
1.2.4. 事件处理 trigger() 自动触发事件
有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
注意这里的自动触发事件的前提是已经绑定了触发事件
语法
演示代码
1 | <body> |
1.3. jQuery 事件对象
jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。
语法
演示代码
1 | <body> |
注意:jQuery中的 event 对象使用,可以借鉴 API 和 DOM 中的 event 。
1.4. jQuery 拷贝对象
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。
语法
演示代码
1 | // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象 |
1 | <script> |
1.5. jQuery 多库共存
实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。
1 | // jQuery多库共存的解决方案 |
语法
演示代码
1 | <script> |
1.6. jQuery 插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入
jQuery文件,因此也称为 jQuery 插件。
jQuery 插件常用的网站:
jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤:
引入相关文件。(jQuery 文件 和 插件文件)
复制相关html、css、js (调用插件)。
1.4.1. 瀑布流插件(重点讲解)
我们学习的第一个插件是jQuery之家的开源插件,瀑布流。我们将重点详细讲解,从找到插件所在网页,然后点击下载代码,到插件的使用等,后面的插件使用可参考瀑布流插件的使用。
下载位置
代码演示
插件的使用三点: 1. 引入css. 2.引入JS 3.引入html。 (有的简单插件只需引入html和js,甚至有的只需引入js)
- 1.引入css.
1 | <link rel="stylesheet" href="css/normalize.css"> |
- 2.引入js.
1 | <!-- 前两个必须引入 --> |
- 3.引入html.
1 | <!-- html结构一般为事先写好,很难修改结构,但可以修改内容及图片的多少(article标签) --> |
总结:jQuery插件就是引入别人写好的:html 、css、js (有时也可以只引入一部分,读懂后也可以修改部分内容)
1.4.2. 图片懒加载插件
图片的懒加载就是:当页面滑动到有图片的位置,图片才进行加载,用以提升页面打开的速度及用户体验。(下载略)
下载网址
图片懒加载中需要的注意事项在jQuery下载的页面有使用说明,且在使用过程中需要将js文件的导入放在body的后面,先加载页面在进行图片缓存加载
代码演示
懒加载只需引入html 和 js操作 即可,此插件不涉及css。
- 1.引入js
1 | <script src="js/EasyLazyload.min.js"></script> |
- 2.引入html
1 | <img data-lazy-src="upload/floor-1-3.png" alt=""> |
1.4.3. 全屏滚动插件
全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。全屏滚动插件介绍比较详细的网站为:
http://www.dowebok.com/demo/2014/77/
代码演示
全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js 变化不大。所以下面只演示js的引入,html和css引入根据自己实际
项目需要使用哪种风格引入对应的HTML和CSS。
1 | <script src="js/jquery.min.js"></script> |
注意:实际开发,一般复制文件,然后在文件中进行修改和添加功能。
1.4.4. bootstrap组件
Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,他依靠jQuery实现,且支持响应式
bootstrap官网
布局,使得 Web 开发更加方便快捷。
凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使
用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html
代码演示
- 引入bootstrap相关css和js
1 | <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> |
- 去官网复制html的功能模块
1 | <div class="container"> |
1.4.5. bootstrap插件(JS)
bootstrap中的js插件其实也是组件的一部分,只不过是需要js调用功能的组件,所以一般bootstrap的js插件一般会伴随着js代码(有的也可以
省略js,用属性实现)。
在bootstrap中引入的内容必须放在div的container类中,引入js文件时必须先引入jQuery文件在引入bootstrap的js文件,
步骤: 1.引入bootstrap相关css和js 2.去官网复制html 3.复制js代码,启动js插件。
代码演示
- 引入bootstrap相关css和js
1 | <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> |
- 去官网复制html的功能模块
1 | <!-- 模态框 --> |
- 复制js代码,启动js插件。
1 | <script> |
1.4.6. bootstrap案例-阿里百秀
1.通过调用组件实现导航栏
2.通过调用插件实现登录
3.通过调用插件标签页实现 tab 栏
代码实现略。(详情参考源代码)
1.7. 综合案例: toDoList案例分析(代码略)
1.7.1 案例:案例介绍
1 | // 1. 文本框里面输入内容,按下回车,就可以生成待办事项。 |
1.7.2 案例:toDoList 分析
1 | // 1. 刷新页面不会丢失数据,因此需要用到本地存储 localStorage |
1.7.3 案例:toDoList 按下回车把新数据添加到本地存储里面
1 | // 1.切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。 |
1.7.4 案例:toDoList 本地存储数据渲染加载到页面
1 | // 1.因为后面也会经常渲染加载操作,所以声明一个函数 load,方便后面调用 |
1.7.5 案例:toDoList 删除操作
1 | // 1.点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。 |
1.7.6 案例:toDoList 正在进行和已完成选项操作
1 | // 1.当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表。 |
1.7.7 案例:toDoList 统计正在进行个数和已经完成个数
1 | // 1.在我们load 函数里面操作 |
1.8. 今日总结
事件总结
- 本地存储localStorage
- 设置存储localStorage.setItem()
- 获取存储的值localStorage.getItem()
- 本地存储只能存储字符串,保存时通过JSON.stringify()转化为字符串保存,获取存储值通过JSON.parse()方法转化为对应的对象进行操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16var todolist = [{
title: "题目1",
done: false
}, {
title: "题目2",
done: false
}]
// 本地存储设置
// localStorage.setItem("todo", todolist);//存储的是数组对象,不是字符串
// 1.地存储localStorage只能存储字符串的数据格式,把我们的数组对象转化为字符串格式,通过json转化为字符串JSON.stringify()
localStorage.setItem("todo", JSON.stringify(todolist));//此时输出则会正常显示
// 从本地存储的string需要转化为数组,通过JSON.parse()转化为json对象,这样就可以获取指定索引的对象
var data = localStorage.getItem("todo");
console.log(JSON.parse(data)[0]);
本文链接: https://sparkparis.github.io/2020/03/31/jQuery-%E7%AC%94%E8%AE%B03-%E4%BA%8B%E4%BB%B6/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!