内容简介
本书以任务驱动方式对网页特效相关知识进行讲解，按照特效类别划分出10个项目，根据这些网页特效的实现要求，将HTML、CSS和jQuery完美融合在一起，将网页特效真实再现到本书中。每个特效任务都从任务描述和任务实现两个方面展开详细讲解，帮助读者深入理解使用jQuexy实现特效的原理和方法；同时在实现特效的过程中穿插讲解需要的知识点，并在此基础上适当扩充知识点，让读者做到学为所用、学以致用。本书在任务实现的过程中将容易出现的问题设计为陷阱，帮助读者深刻理解每一行代码在任务实现中的重要性和必要性，将代码学懂、弄通、做实，提升项目开发能力。
展开全文
- A-fy
- 58547-bq
- C-qy
- D-ml
- 01
- 项目1
- 实现表单输入框外围的动态阴影效果
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 【任务描述】
- 【任务实现】
- 1．页面元素结构及样式说明
- 2．脚本功能实现
- 【相关知识】
- 一、JavaScript简介及DOM
- （一）ECMAScript
- 1．ECMAScript的组成部分
- 2．ECMAScript的语言特性
- （二）DOM
- 1．DOM节点的概念及树形结构
- 【思政提示】
- 2．获取DOM节点信息
- （三）BOM
- 二、jQuery概述
- （一）下载和安装jQuery
- （二）使用jQuery
- 1．jQuery的功能简介
- 2．jQuery的接口函数及简单应用示例
- 【思考问题】
- 【问题解析】
- 3．jQuery的ready事件
- 4．对比分析jQuery中的ready事件和JavaScript中的load事件
- （三）jQuery对象与DOM对象的相互转换
- 1．jQuery对象转换为DOM对象
- 2．DOM对象转换为jQuery对象
- 三、jQuery中的选择器
- （一）基本选择器
- 1．id选择器
- 2．标记名选择器
- 3．其他几个基本选择器
- （二）层级选择器
- 1．包含选择器
- 2．子对象选择器
- 3．相邻选择器
- 4．兄弟选择器
- （三）过滤器eq()和伪类选择器:eq()
- 1．过滤器eq()
- 2．伪类选择器:eq()
- 四、jQuery中的元素查找操作
- （一）向下查找后代元素
- 1．查找直接子元素—— children()方法
- 2．查找后代元素—— find()方法
- （二）向上查找祖先元素
- 1．查找直接父元素—— parent()方法
- 2．查找各个层级的祖先元素—— parents()方法
- （三）查找兄弟元素
- 1．向上查找兄弟元素
- 2．向下查找兄弟元素
- 3．查找所有兄弟元素—— siblings()方法
- （四）查找方法应用举例
- 五、jQuery中操作DOM元素的基本方法
- （一）jQuery中操作属性的attr()方法
- 1．attr("checked")的结果
- 2．prop("checked")的结果
- （二）jQuery中的each()方法
- 1．jQuery.each()方法
- 2．jQuery().each()方法
- （三）关于元素的索引的问题
- （四）为元素添加和移除类
- 1．addClass()方法
- 2．removeClass()方法
- 六、jQuery中的事件机制
- （一）注册事件
- 1．on()方法
- 2．jQuery中的快捷方法
- 【思考问题】
- 【问题解析】
- 3．one()方法
- （二）注销事件—— off()方法
- 小结
- 习题
- 一、选择题
- 二、简答题
- 三、操作题
- 02
- 项目2
- 制作页面中的漂浮广告
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务2.1 实现不加任何控制的漂浮广告
- 【任务描述】
- 【任务实现】
- 一、漂浮广告的定位及移动方向控制
- 1．漂浮广告的定位
- 2．漂浮广告的移动方向控制
- 二、使用固定定位方式实现漂浮广告
- 1．漂浮广告的设计方案说明
- 2．使用JavaScript实现漂浮广告特效
- 3．使用jQuery实现漂浮广告特效
- 4．使用setInterval()的注意事项
- 【思考问题】
- 【问题解析】
- 5．全局变量gox和goy
- 【思考问题】
- 【问题解析】
- 【问题解析】
- 【思考问题】
- 【问题解析】
- 【思考问题】
- 【问题解析】
- 三、使用绝对定位实现漂浮广告
- 【思政提示】
- 任务2.2 实现漂浮广告中的控制功能
- 【任务描述】
- 【任务实现】
- 1．鼠标指针指向漂浮广告时增加的控制功能
- 2．鼠标指针离开漂浮广告时增加的控制功能
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 【相关知识】
- 一、获取窗口及页面的宽度和高度
- （一）使用JavaScript获取窗口及页面的宽度和高度
- 1．页面中没有设置DTD
- 2．页面中设置了DTD
- 3．混合使用document.body和document.documentElement的问题
- （二）使用jQuery获取窗口及页面的宽度和高度
- 1．在jQuery中获取窗口及页面宽度和高度的方法
- 2．应用示例
- 二、获取滚动条卷入部分的页面宽度和高度
- （一）在JavaScript中获取
- （二）在jQuery中获取
- 三、获取元素的宽度和高度
- （一）使用JavaScript获取元素的宽度和高度
- 1．设置元素的overflow为auto
- 2．设置元素的overflow为visible
- （二）使用jQuery获取元素的宽度和高度
- 四、获取和设置页面元素的位置
- （一）在JavaScript中获取和设置页面元素的位置
- 1．JavaScript中的getBoundingClientRect()方法
- 2．JavaScript中的offsetLeft和offsetTop
- 3．JavaScript中设置元素的位置
- （二）在jQuery中获取和设置元素的位置
- 1．使用offset()方法返回元素的位置
- 2．使用offset()方法设置元素的位置
- 五、jQuery中的css()方法
- （一）使用css()方法返回元素的样式属性取值
- 1．css("width")与width()的对比
- 2．css("top")与offset().top的对比
- （二）使用css()方法设置元素的样式属性取值
- 1．使用两个参数的形式
- 2．参数使用{}定界的形式
- 小结
- 习题
- 一、选择题
- 二、简答题
- 三、操作题
- 03
- 项目3
- 在jQuery中实现表单数据验证
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务3.1 实现表单数据验证功能
- 【思政提示】
- 【任务描述】
- 【任务实现】
- 1．表单界面设计
- 2．使用HTML5表单元素属性对部分数据进行验证
- 3．使用脚本对选择性元素进行验证
- 4．验证确认密码和密码的一致性
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 【相关知识】
- 一、表单过滤器
- 二、在jQuery中获取或设置表单元素的值
- 1．attr()方法
- 2．prop()方法
- 3．val()方法
- 三、使用jQuery实现邮箱自动导航
- 任务3.2 判断密码强度
- 【任务描述】
- 【任务实现】
- 1．修改表单界面
- 2．使用JavaScript中的正则表达式判断密码字符串强弱
- 1．正则表达式的test()方法
- 2．使用正则表达式检测密码字符串
- 任务3.3 使用JavaScript正则表达式完成数据的即时验证
- 【任务描述】
- 【任务实现】
- 1．对用户名的即时验证
- 2．对密码的即时验证
- 3．对手机号的即时验证
- 小结
- 习题
- 一、选择题
- 二、简答题
- 三、操作题
- 04
- 项目4
- 使用闭包实现级联菜单功能
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务4.1 实现年月日级联菜单
- 【任务描述】
- 【思政元素】
- 【任务实现】
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 【相关知识】
- 一、使用JavaScript和jQuery操作select和option
- 二、改变DOM树形结构的常用方法
- 1．创建元素
- 2．更换元素的内部结构
- 3．在元素内部插入子元素
- 4．在元素外部插入兄弟元素
- 5．删除指定元素
- 任务4.2 实现省市区级联菜单
- 【任务描述】
- 【任务实现】
- 一、页面元素的结构及样式要求
- 1．页面元素的结构
- 2．元素说明及样式定义
- 3．代码
- 二、JSON数据的定义和访问
- 1．JSON数据的定义
- 2．JSON数据的访问
- 三、使用闭包实现省市区级联菜单
- 1．获取并处理所有的省份名称
- 2．单击选项卡时的功能设置
- 3．选择省份
- 4．选择地市
- 5．选择区县
- 6．省市区级联菜单的完整脚本代码
- 【思考问题】
- 【问题解析】
- 【相关知识】trigger()方法
- 小结
- 习题
- 一、选择题
- 二、简答题
- 05
- 项目5
- 实现jQuery动画
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务5.1 使用css()制作动画——实现文本动画效果
- 【任务描述】
- 【任务实现】
- 【相关知识】hover()方法
- 任务5.2 显示与隐藏动画制作——实现树形列表动画
- 【任务描述】
- 【任务实现】
- 【相关知识】
- 一、显示和隐藏的动画方法
- 1．show()方法
- 2．hide()方法
- 3．toggle()方法
- 二、显示与隐藏动画的基本应用案例
- 1．简单的显示与隐藏动画
- 2．有动画效果的显示与隐藏动画
- 3．应用动画的回调函数
- 【思政元素】
- 任务5.3 淡入淡出动画
- 【任务描述】
- 【任务实现】
- 【相关知识】淡入淡出的动画方法
- 1．fadeIn()
- 2．fadeOut()
- 3．fadeToggle()
- 4．fadeTo()
- 任务5.4 使用上卷下拉实现折叠框动画
- 【任务描述】
- 【任务实现】
- 【相关知识】上卷下拉动画方法
- 1．slideDown ()
- 2．slideUp()
- 3．slideToggle()
- 任务5.5 使用上卷下拉实现百叶窗动画
- 【任务描述】
- 【任务实现】
- 任务5.6 阶梯式上卷下拉动画
- 【任务描述】
- 【任务实现】
- 1．队列内容说明
- 2．回调函数的写法问题
- 3．队列代码的改写
- 【思考问题】
- 【问题解析】
- 【相关知识】jQuery中的队列控制方法
- 任务5.7 animate()——实现返回页面顶部的滚动动画
- 【任务描述】
- 【任务实现】
- 【相关知识】
- 一、animate()方法
- 二、停止动画——stop()方法
- 三、关闭和延迟动画
- 1．关闭动画——off属性
- 2．延迟动画——delay()方法
- 小结
- 习题
- 一、选择题
- 二、简答题
- 三、操作题
- 06
- 项目6
- 图像轮播
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务6.1 索引切换轮播
- 【任务描述】
- 【任务实现】
- 一、实现简单的索引切换轮播功能
- 二、扩展索引切换轮播功能
- 1．停止和重启轮播
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 2．跟随轮播图变化的数字索引
- 3．单击数字索引切换图片
- 4．后退和前进功能
- 5．完整的轮播控制代码
- 任务6.2 使用animate()实现无缝滚动轮播
- 【任务描述】
- 【思政提示】
- 【任务实现】
- 一、实现简单的无缝滚动轮播功能
- 1．无缝滚动轮播区域页面元素的结构及样式说明
- 2．滚动轮播的实现原理
- 3．定义函数实现轮播
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 4．完整的无缝滚动轮播代码
- 二、扩展无缝滚动轮播功能
- 1．停止和重启滚动轮播
- 2．跟随图片变化的数字索引
- 3．后退和前进功能
- 【思考问题】
- 【问题解析】
- 4．完整的无缝滚动轮播控制代码
- 任务6.3 使用CSS3动画实现无缝滚动轮播
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．添加商品信息的脚本代码
- 任务6.4 旋转滚动轮播
- 【任务描述】
- 【任务实现】
- 1．添加页面元素
- 2．元素样式定义
- 3．实现旋转滚动轮播功能的脚本
- 【思考问题】
- 【问题解析】
- 4．停止和重启旋转滚动轮播的脚本代码
- 5．完整的旋转滚动轮播代码
- 小结
- 习题
- 一、选择题
- 二、简答题
- 07
- 项目7
- 图像处理特效
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务7.1 购物网站中的放大镜
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．放大镜的实现原理
- 【思政提示】
- 3．实现放大镜脚本功能
- 4．更换选定的图片
- 任务7.2 瀑布流布局
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．瀑布流的实现原理
- 3．瀑布流的脚本实现
- 任务7.3 添加文件类型图标
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．脚本功能实现
- 【思考问题】
- 【问题解析】
- 【相关知识】JavaScript读取外部文件
- 1．FileReader对象的方法
- 2．FileReader对象的事件
- 3．FileReader对象的属性
- 任务7.4 超链接背景图的切换
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．脚本功能实现
- 任务7.5 使用图片精灵实现星级评价
- 【任务描述】
- 【任务实现】
- 小结
- 习题
- 一、选择题
- 二、简答题
- 08
- 项目8
- 使用jQuery实现表格操作特效
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务8.1 应用模态框添加和修改表格数据
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 【思政提示】
- 2．脚本功能实现
- 【相关知识】关于模态框
- 任务8.2 应用模态框实现签到和评分功能
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．脚本功能实现
- 任务8.3 读取Excel数据表并进行排序操作
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．脚本功能实现
- 【相关知识】应用FileReader读取Excel文件
- 小结
- 习题
- 一、选择题
- 二、简答题
- 三、操作题
- 09
- 项目9
- 数组应用特效
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 任务9.1 实现随机点名功能
- 【任务描述】
- 【任务实现】
- 【思考问题】
- 【问题解析】
- 【解决方案】
- 任务9.2 实现随机选图并放大功能
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．脚本功能实现
- 任务9.3 制作百度新闻页面的滑块
- 【任务描述】
- 【任务实现】
- 1．元素设计及样式定义
- 2．脚本功能实现
- 任务9.4 单击时的文字动画
- 【任务描述】
- 【思政提示】
- 【任务实现】
- 小结
- 习题
- 一、选择题
- 二、简答题
- 10
- 项目10
- 综合应用——购物车中的商品管理功能
- 【情景导入】
- 【知识点及项目目标】
- 【思政元素】
- 【任务描述】
- 【任务实现】
- 一、元素设计及样式定义
- 1．元素设计
- 2．样式定义
- 【思政提示】
- 二、购物车商品管理脚本功能实现
- 1．计算每种商品的总价（小计）
- 2．一次性选中购物车中的全部商品并计算商品总量和总价
- 3．单个单击商品复选框，计算商品总量和总价
- 4．减少某种商品的数量
- 5．增加某种商品的购买量
- 6．删除购物车中的某种商品
- 7．注册“结算”按钮的click事件函数
- 小结
展开全部
版权信息
出版社：人民邮电出版社
出版时间：2022
作者：王爱华
温馨提示：
1.本电子书已获得正版授权，由出版社通过知传链发行。
2.该电子书为虚拟物品，付费之后概不接收任何理由退款。电子书内容仅支持在线阅读，不支持下载。
3.您在本站购买的阅读使用权仅限于您本人阅读使用，您不得/不能给任何第三方使用，由此造成的一切相关后果本平台保留向您追偿索赔的权利！版权所有，后果自负！
得书感谢您对《jQuery网页特效任务驱动式教程（微课版）》关注和支持，如本书内容有不良信息或侵权等情形的，请联系本网站。
出版时间：2022
作者：王爱华
温馨提示：
1.本电子书已获得正版授权，由出版社通过知传链发行。
2.该电子书为虚拟物品，付费之后概不接收任何理由退款。电子书内容仅支持在线阅读，不支持下载。
3.您在本站购买的阅读使用权仅限于您本人阅读使用，您不得/不能给任何第三方使用，由此造成的一切相关后果本平台保留向您追偿索赔的权利！版权所有，后果自负！
得书感谢您对《jQuery网页特效任务驱动式教程（微课版）》关注和支持，如本书内容有不良信息或侵权等情形的，请联系本网站。
jQuery网页特效任务驱动式教程（微课版）
免费读 (VIP)