JavaScript与jQuery项目化教程（活页式）

编排新颖：采用活页式装订，突出项目与任务。

思政融合：课程内容巧妙结合思政相关元素。

内容实用：以任务为驱动，培养读者的职业能力。

在信息技术迅猛发展的背景下，产生了对Web应用的大量需求，而良好的Web前端交互设计在吸引用户方面起着至关重要的作用。JavaScript脚本语言是目前Web应用开发的主流脚本语言，由于其开源编辑的特性，目前几乎所有的主流浏览器都支持，且绝大部分的网站都采用了JavaScript脚本技术。随着JavaScript在Web应用开发领域的广泛使用，基于JavaScript的框架和插件也层出不穷。其中jQuery就是JavaScript框架中的优秀代表，也是目前Web应用中使用范围最广泛的JavaScript函数库之一。它的出现让需要大量JavaScript代码才能完成的功能和特效，仅通过简单的语句就能轻松完成，实现了“写得少，做得多”的语法理念；同时，对操作CSS、DOM、Ajax等各种标准Web技术提供了许多实用且简便的方法，很好地解决了浏览器之间的兼容性问题。

本书采用“项目—任务—实训”的方式，从基础开始讲解JavaScript与jQuery技术，然后进行强化。全书以任务为驱动，内容循序渐进，案例丰富实用，既可作为JavaScript和jQuery初学者的入门教程，也可为具有一定Web前端基础的读者进一步学习提供参考。本书对“Web前端工程师”所需技能进行了梳理，结合了常见的Web前端开发中所涉及的一些工作任务，以工作任务为核心重新选择和组织专业知识体系，按工作过程设计学习情景，强化Web前端工程师所需技能，提升动手能力，是一本应用当前流行的前端技术实现客户端交互效果的实用教程。本书具有以下特点：

（1）编排新颖。采用了新形态活页式教材的方式编写，突出了项目和任务，并在每个任务前加入任务实施单，对所完成的任务进行设计、分工、实施、评价，突出了对读者的工作能力的培养。

（2）能力培养。突出了对网页交互效果制作能力的培养，按照工学结合的编写思

路，充分考虑学生的认知规律，化解知识难点。精心设计了3个教学环节：任务、课后练习和实训。让读者在实践中，学会应用所学知识解决实际问题。

（3）思政融合。在教学内容中融合了思政元素，从时政热点、家国情怀、个人理想等方面出发，将思政育人与教学相结合，将社会主义核心价值观、职业基本素养等融入课堂。

本书为校企合作开发教材，由广西机电职业技术学院与东软教育科技集团共同编写，是广西“双高”专业建设—焊接自动化专业群建设成果之一，作者团队高校教学经验丰富，具备“双师型”教师素质。本书由林沣、蓝雪燕、宋家慧任主编，韦波、李敏、刘春霞、邓谞婵任副主编。此外，韦善周、农丹华、梁瑾、盘晓莹、玉杨阳参与了教材的编写工作。人员分工如下：宋家慧编写了项目1，邓谞婵编写了项目2，刘春霞编写了项目3，蓝雪燕编写了项目4，韦善周编写了项目5，农丹华编写了项目6，梁瑾编写了项目7，盘晓莹编写了项目8，林沣编写了项目9和项目10，任务案例由

李敏、韦波、宋家慧和林沣共同完成，“思政目标”部分由玉杨阳完成。

由于编者水平有限，书中难免存在疏漏之处，敬请各位专家和读者批评指正。

编 者

2022年8月

前言
项目1　初识JavaScript 001
任务1.1　JavaScript入门 003
1.1.1　JavaScript的起源和发展 003
1.1.2　JavaScript的作用 004
1.1.3　JavaScript的组成 005
1.1.4　JavaScript的特点 006
任务1.2　JavaScript的开发流程 008
1.2.1　HBulider X简介 008
1.2.2　使用HBuilder X 008
1.2.3　JavaScript的基本结构 011
1.2.4　引入JavaScript脚本 011
任务1.3　运行和调试JavaScript脚本 015
1.3.1　运行JavaScript脚本 015
1.3.2　调试JavaScript脚本 016
任务1.4　常用的输出语句和对话框 019
1.4.1　页面输出语句 019
1.4.2　控制台输出语句 020
1.4.3　警告对话框 020
1.4.4　提示对话框 021
1.4.5　消息对话框 022
小结 023
课后练习 023
实训1　输出页面元素和弹窗 026
项目2　JavaScript基础语法 027
任务2.1　变量 029
2.1.1　标识符 029
2.1.2　变量的使用 030
任务2.2　数据类型 032
任务2.3　运算符 035
任务2.4　数据类型的转换与获取 039
2.4.1　数据的转换 039
2.4.2　typeof操作符 041
任务2.5　分支结构 043
2.5.1　单分支语句 043
2.5.2　双分支语句 043
2.5.3　多分支语句 044
任务2.6　循环结构 049
2.6.1　while循环语句 049
2.6.2　do...while循环语句 050
2.6.3　for循环语句 050
2.6.4　嵌套循环 051
任务2.7　跳转语句 054
2.7.1　break语句 054
2.7.2　continue语句 054
小结 055
课后练习 055
实训2　猜数字游戏 058
项目3　JavaScript函数 060
任务3.1　函数 062
3.1.1　函数的声明 062
3.1.2　函数的参数 062
3.1.3　函数的调用 063
3.1.4　函数的返回值 065
3.1.5　变量的作用域 065
任务3.2　匿名函数 068
任务3.3　闭包函数 070
小结 070
课后练习 071
实训3　制作简易四则运算计算器 074
项目4　JavaScript对象 076
任务4.1　对象 078
4.1.1　初识对象 078
4.1.2　自定义对象的声明 078
4.1.3　访问对象的属性和方法 079
任务4.2　内置对象 082
4.2.1　Math对象 082
4.2.2　定时器 083
4.2.3　Date对象 084
4.2.4　Array对象 087
4.2.5　String对象 089
小结 091
课后练习 091
实训4　轮播图和扶贫日活动倒计时的
　　　 制作 094
项目5　DOM基础 096
任务5.1　DOM简介 098
5.1.1　DOM的含义 098
5.1.2　DOM树 098
任务5.2　获取元素 101
5.2.1　通过Id获取 101
5.2.2　通过TagName获取 102
5.2.3　通过Name获取 103
5.2.4　通过ClassName获取 104
任务5.3　事件 106
5.3.1　事件的分类 106
5.3.2　事件的绑定方式 107
5.3.3　事件的对象 107
任务5.4　操作元素 110
5.4.1　获取和设置元素内容 110
5.4.2　获取和设置元素属性 112
小结 113
课后练习 113
实训5　鼠标拖拽div 116
项目6　DOM进阶操作 118
任务6.1　节点操作 120
6.1.1　按层次关系访问节点 120
6.1.2　创建和添加节点 121
6.1.3　删除和复制节点 123
6.1.4　替换节点 124
任务6.2　JavaScript与CSS交互 127
6.2.1　操作元素样式 127
6.2.2　Tab栏目切换 128
6.2.3　鼠标指针进入缩略图切换大图 130
6.2.4　首页滚动显示对联宣传图标 131
6.2.5　图片放大特效 133
小结 136
课后练习 137
实训6　购物车操作 140
项目7　BOM 145
任务7.1　BOM概述 147
任务7.2　window对象 149
7.2.1　打开和关闭窗口 150
7.2.2　操作窗口 153
任务7.3　location对象、history对象
　　　　 和navigator对象的使用 157
7.3.1　location对象 157
7.3.2　history对象 158
7.3.3　navigator对象 160
小结 161
课后练习 162
实训7　制作网站登录效果 164
项目8　jQuery基础 167
任务8.1　初识jQuery 169
8.1.1　jQuery概述 169
8.1.2　获取jQuery 169
8.1.3　使用jQuery 171
任务8.2　jQuery对象与选择器 174
8.2.1　jQuery对象 174
8.2.2　基本选择器 175
8.2.3　层级选择器 178
8.2.4　筛选选择器 180
8.2.5　表单选择器 187
小结 189
课后练习 190
实训8　畅销书简介 193
项目9　jQuery的DOM操作 196
任务9.1　元素样式的操作 198
9.1.1　css()方法 198
9.1.2　类样式方法 198
任务9.2　元素属性的操作 202
9.2.1　prop()方法 202
9.2.2　attr()方法 202
任务9.3　元素内容的操作 209
任务9.4　节点元素的操作 213
9.4.1　遍历元素 213
9.4.2　创建元素 214
9.4.3　插入元素 215
9.4.4　移除元素 216
小结 218
课后练习 218
实训9　购物车添加商品 222
项目10　jQuery的事件与动画 224
任务10.1　jQuery事件 226
10.1.1　事件绑定 226
10.1.2　事件解绑 229
10.1.3　事件对象 229
10.1.4　切换事件 232
任务10.2　jQuery动画 237
10.2.1　隐藏与显示动画 237
10.2.2　滑动动画 238
10.2.3　淡入淡出动画 240
小结 242
课后练习 243
实训10　设计地址管理页面 246
参考文献 248

1. 零基础玩转国产大模型DeepSeek [徐永冰 张帅 编著]
2. 网络工程师5天修炼（适配第6版考纲） [主编　朱小平 施游]
3. 信息系统项目管理师考试32小时通关（适用第4版考纲） [薛大龙]
4. 信息系统管理工程师考试32小时通关（适配第2版考纲） [薛大龙　刘伟]
5. 土木工程材料检测实训 [洪晓江 达则晓丽 钱波]
6. 科技信息检索与论文写作实用教程 [李振华]
7. 传统山水画论解读与实践 [陈钠 著]
8. Python数据库编程 [主编 殷树友 邢 翀]
9. 计算机基础实训指导 [主编 袁春萍 朱妮]
10. 嵌入式人工智能技术应用（数字教材） [主编 胡娜 杨国勇 晏廷荣]
11. Vienna整流器技术 [桂存兵 著]
12. 变频器与伺服应用 [陈刚 叶云飞]
13. 物联网工程设计与实践 [汤琳 李敏]
14. 炉边夜话——深入浅出话AI [汪建　著]
15. 电商运营与管理 [钟肖英 陈潇]
16. Java面向对象程序设计 [主编 姜春磊 陈虹洁]
17. 信息技术基础（Windows 10+WPS Office）（微课版） [主编　石利平　田辉平　谢盛嘉]
18. 人工智能应用 [主编　陈　萍　刘培培　陈孟军]
19. 大学生职业发展与就业指导 [主编　刘志坚]
20. 高级办公应用项目教程 [主编 屈晶 赵成丽]
21. 微信小程序开发项目实战（微课版） [主编 黄龙泉 郭峰 朱倩]
22. 企业档案工作实战宝典百问百答 [华俊 卢秀英 邵甜甜 著]
23. 计算机网络原理及应用 [主编 唐继勇 叶坤 孙梦娜]
24. 大学生创业基础 [主编 王丽莉 王 杨]
25. 船舶辅机 [主编 王连海 于洋 姜淑翠]
26. 大学生就业指导 [主编 王丽莉 董宴廷]
27. 系统架构设计师章节习题与考点特训 [主编 薛大龙 邹月平]
28. 高校学生工作探索与实践 [郭亮 著]
29. 大学生情商管理 [方雄 著]
30. 2023年长沙市会展业发展报告 [主编 周栋良]