使用jQuery快速高效制作网页交互特效TP04
Web前端实训案例使用jQuery库实现动态网页效果
Web前端实训案例使用jQuery库实现动态网页效果Web前端实训案例：使用jQuery库实现动态网页效果在现代的网页开发中，为了丰富用户的浏览体验和提升网页的交互性，动态网页效果成为了一个重要的开发方向。
而jQuery库作为一种功能强大的JavaScript工具库，为我们提供了丰富的API和插件，便于我们开发出各种各样的动态效果。
本文将通过一个实际的Web前端实训案例，来详细介绍如何使用jQuery库来实现动态网页效果。
【案例简介】我们的案例是一个产品展示页面，页面中展示了多个产品的图片和简要描述。
我们希望当用户鼠标悬停在某个产品图片上时，能够展示该产品的详细描述，并且在用户点击某个产品时，能够跳转到该产品的详情页面。
【案例实现步骤】1. 引入jQuery库和CSS文件首先，我们需要在HTML页面的<head>标签中引入jQuery库和相应的CSS文件。
将jQuery库和CSS文件放置于项目文件夹内，并使用相对路径引入。
```html<head><script src="jquery.min.js"></script><link rel="stylesheet" href="style.css"></head>```2. 设计HTML结构接下来，我们需要设计HTML的结构，包括产品的图片、简要描述和详细描述等。
```html<div class="product"><img src="product1.jpg" alt="产品1"><div class="description"><h3>产品1</h3><p>这是产品1的简要描述。
使用jQuery快速高效制作网页交互特效TP03
jQuery语法结构
语法
$(selector).action() ;
工厂函数$()：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素 方法action()：jQuery中提供的方法，其中包 括绑定事件处理的方法
示例
$("#current").addClass("current");
弹出消息框，显示“非常满意” 将DOM对象转换为jQuery对象，再调用jQuery对象 的方法
讲解需求说明
31/38
学员操作—使用jQuery方式弹出消息2-2
指导
实现思路
1. 在新建的HTML文档中引入jQuery库 2. 使用$(document).ready()创建文档加载事件 3. 获取DOM对象 4. 将DOM对象转换成jQuery 对象 5. 使用jQuery对象的click()方法，弹出对话框
文本节点：元素节点内的文本内容
<p>你最喜欢的食品是？ </p>
属性节点：元素节点的子节点
<p title="提示">……</p>
19/38
DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点 对象
var objDOM=document.getElementById("title"); var objHTML=objDOM.innerHTML;
jquery-1.版本号 .min.js（发布版）
约91KB
在页面中引入jQuery
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
jQuery网页特效任务驱动式教程-实现动画效果
使用显隐动画模拟文件夹的树形列表结构
任务实现 初始状态，使用jQuery代码将所有包含ul子元素的列表项li （ $("li").has("ul") ）鼠标指针设置为手状，列表符号图片为表示折叠状 态的向右箭头，子元素ul都是隐藏的。 对所有不包含ul子元素的列表项li，设置鼠标默认，列表符号为none。 单击包含ul子元素的列表项li时，判断当前单击操作的是否是该元素自身 （ if (this == event.target) ），这是因为在单击子元素触发click事件 时，会同时触发父元素的click事件（事件的冒泡），所以此处必须要进行判 断处理。若是，则根据其子元素的显示隐藏状态（is(":hidden")）更改其样 式效果和子元素的隐藏显示效果；若单击的是子元素，则不做任何操作。
slideUp() 以逐渐改变高度的滑动方式隐藏显示的被选中元素。 格式：$(selector).slideUp(speed, callback)
slideToggle() 可以在slideDown()与slideUp ()方法之间进行切换。 格式：$(selector).slideToggle(speed, callback)
使用显隐动画模拟文件夹的树形列表结构
显隐动画
显示隐藏的元素 show(speed,easing,回调函数) speed：可选。设置动画变化过程持续的时间，取值可以是“slow|normal|fast|毫秒”， 其中slow表示600毫秒，normal表示400毫秒，fast表示200毫秒，也可以自行定义动画 持续的毫秒数。如果没有定义该参数，则元素会由隐藏状态直接变为显示状态，也就是 没有完成修改的动画过程；如果定义了该参数，则元素的宽度、高度、透明度、外边距 和内填充等样式属性，会在指定的时间内逐渐变化到完整显示 easing：可选。规定在动画的不同点上元素的速度。默认值为 “swing”，表示在开头 和结尾移动慢，在中间移动快；"linear" 表示匀速移动。 回调函数，表示在动画完成时要执行的函数，函数内部定义动画完成之后要执行的功能， 该参数可以省略。
jQuery网页特效任务驱动式教程-图像处理特效
购物网站中的放大镜
页面元素样式 shopping_left中下面的元素min用于存放缩略图 下面的小图，样式要求：要设计为网格容器，分 为5个列，最左侧和最右侧两个列的宽度都是30像 素，中间3个列的宽度都是60像素，列与列之间的 间距是15像素，共占据300像素。 min中所有图片的样式要求：宽度100%（是指与 min中网格对应的列宽一致），白色1像素实线边 框，鼠标指向时显示为手状。 使用.min>img:nth-child(2)定义图片 lianyiqunMin1.jpg初始时为红色边框，表示初始 时被选中显示的是这幅图。 shopping_right的背景设置为#ddf颜色，只是为 显示商品信息预留空间。
购物网站中的放大镜
页面元素样式 shopping_left中上面的元素zoom的样式要 求：宽度300像素，高度300像素，边框为1 像素实线颜色#aaf，因为zoom内部有多个元 素需要使用绝对定位，所以zoom需要设置为 相对定位。 zoom内部的origin用于设置原始缩略图， scale用于显示放大之后的效果图。 origin的样式要求：宽度300像素，高度300 像素，相对定位。 origin中img元素的样式要求：宽度和高度 与origin相同。
JavaScript高级编程
任务7 图像处理特效
任务7 图像处理特效
任务7.1 购物网站中的放大镜 任务7.2 瀑布流图像布局 任务7.3 添加文件类型图标 任务7.4 超链接背景图的切换 任务7.5 使用图片精灵实现星级评价
购物网站中的放大镜
任务描述 左侧下方有3幅不同角度的商品小图， 小图左侧和右侧的向左向右箭头在 本页面中没有定义功能，如果提供 的图片更多，这两个箭头可以用于 向左或者向右滚动小图；上方是一 幅缩略图，缩略图区域显示的图片 根据用户选择的小图来确定，初始 显示的是第1幅小图对应的缩略图， 此时第1幅小图带着红色边框。 下面是选择第二幅小图并选择放大 区域之后的效果
如何使用JavaScript构建交互式网页特效
如何使用JavaScript构建交互式网页特效第一章：介绍JavaScript是一种常用的网页编程语言，它可以用来创建各种交互式网页特效。
在本章节中，我们将讨论JavaScript的基本知识，并简要介绍如何使用JavaScript来构建交互式网页特效。
第二章：JavaScript基础知识在这一章节中，我们将介绍JavaScript的基础知识，包括变量、数据类型、操作符、控制结构等。
这些知识是构建交互式网页特效的基础，通过了解这些知识，我们才能更好地利用JavaScript来实现各种特效。
第三章：DOM操作DOM（Document Object Model）是JavaScript操作HTML和XML文档的一种标准方法。
在这一章节中，我们将学习如何使用JavaScript来访问和修改HTML元素，以及如何使用DOM事件来实现交互效果。
通过掌握DOM操作，我们可以实现点击按钮、改变文本内容、动态添加元素等各种交互效果。
第四章：动画效果在这一章节中，我们将讨论如何使用JavaScript来实现各种动画效果。
通过使用JavaScript的定时器和CSS的transition属性，我们可以创建平滑的过渡效果和动画效果。
此外，我们还将介绍一些常用的动画库，如jQuery和GSAP，它们能够更容易地实现复杂的动画效果。
第五章：表单验证与交互效果在这一章节中，我们将学习如何使用JavaScript来验证用户输入，并实现表单的交互效果。
通过使用正则表达式、条件判断和DOM操作，我们可以实现各种表单验证功能，如验证邮箱、密码强度等。
此外，我们还可以实现表单的动态显示和隐藏、输入框的自动完成等交互效果，提升用户体验。
第六章：响应式设计与媒体查询在这一章节中，我们将介绍如何使用JavaScript和CSS媒体查询来实现响应式设计。
响应式设计可以使网页在不同的设备上自适应显示，并提供不同的交互特效。
通过掌握响应式设计的基本原理和使用方法，我们可以在不同的设备上提供更好的用户体验。
jQuery网页特效任务驱动式教程-漂浮广告相关知识
获取页面卷入部分的宽度和高度
JavaScript中的做法 使用document.documentElement.scrollLeft获取横向滚动条左侧卷入的 宽度 使用document.documentElement.scrollTop获取纵向滚动条顶部卷入的 高度
元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条 的宽度 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条 的高度 无论元素设置了overflow:visible或者overflow:hidden 或者overflow:auto样式 属性，获取的宽度都是包括从元素左填充开始到子元素右边框结束之间的 像素数 当元素设置了overflow:hidden 或者overflow:auto样式属性时，获取的高度包 括从元素上填充开始到下填充结束之间的像素数； 当元素设置了overflow:visible时，获取的高度包括从元素的上填充开始到 子元素的下边距结束之间的像素数
jQuery中获取和设置元素的位置
使用offset()方法返回元素的位置 此时offset()方法不带有参数，返回的结果对象中包含两个整型属性 left和top，分别表示指定的jQuery对象到网页左上角的横坐标和纵坐标， 坐标值不带有取值单位px。 无论元素本身是否定位，也无论该元素是否是某个定位的祖先元素的后 代元素，使用offset()返回的都是元素自身相对于网页的偏移量。
应用offsetLeft和offsetTop
具体要求如下： 页面中共有5个div，最外层div类名是div，宽660像素，高400像素，填充50 像素，背景色#eef；里面有向左浮动的两个div，类名分别是divL和divR，宽 度都是300像素，高度200像素，右边距20像素，边框1像素实线蓝色；divR内 部有相对定位的div，类名是divM，宽度200像素，高度150像素，背景色为绿 色，定位横坐标left取值80像素，纵坐标top取值40像素；divM内部有绝对定 位的div，类名是divS，宽度100像素，高度100像素，边框1像素实线红色， 定位横坐标left取值50像素，纵坐标top取值30像素。 使用脚本代码分别获取divR、divM、divS三个div的位置并输出。 获取divS左上角到窗口左上角的距离（页面有无滚动条两种情况）
网页特效设计基础第8章-使用jQuery-UI插件
$( "#elem" ).progressbar();
另外，在安装时，jQuery UI 还可以传递一组选项， 这样即可重写默认选项。代码如下：
本章将对 jQuery UI 插件的使用进行详细讲解。
8.1 初识 jQuery UI 插件
jQuery UI 是一个建立在 jQuery JavaScript 库 上的插件和交互库，开发人员可以使用它创建高度交互 的 Web 应用程序。本节将对 jQuery UI 及其插件进行 简单的介绍。
8.1.1 jQuery UI 概述
（3）广泛兼容。兼容各主流桌面浏览器。包括 IE 6+、 Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
（4）轻便快捷。组件间相对独立，可按需加载，避免 浪费带宽，拖慢网页打开速度。
（5）美观多变。提供近 20 种预设主题，并可自定义 多达 60 项可配置样式规则，提供 24 种背景纹理选择。
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库，它包含底层用户交互、动画、特效 和可更换主题的可视控件，其主要特点如下。
（1）简单易用。继承 jQuery 简易使用特性，提供高度 抽象接口，短期改善网站易用性。
（2）开源免费。采用 MIT & GPL 双协议授权，轻松满足 自由产品至企业产品各种授权需求。
（3）在 Download Builder 页面的最底部，可以看到一 个下拉列表框，列出了一系列为 jQuery UI 插件预先设计 的主题，可以从这些提供的主题中选择一个，如图 8-3 所 示。 （4）单击“Download”按钮，即可下载选择的 jQuery UI。
使用jQuery和AJAX实现可重用的网页特效
使用jQuery和AJAX实现可重用的网页特效
使用jQuery和AJAX来实现可重用的网页特效是一个很棒的
想法，而且可以让我们的网站拥有更快、更加有趣的特性。
要做到这一点，我们需要充分利用jQuery和AJAX的强大功能。
使用jQuery可以让你的网页拥有更加富有表现力的特效，它
还可以让你在处理DOM操作时拥有更好的体验。
通过使用jQuery，你也可以轻松地利用各种JavaScript框架，以便快速
地实现可重用的页面特效。
而AJAX可以让你创建异步应用，它可以帮助你有效地更新
或提交数据，同时又不会影响到当前页面的状态。
数据传输可以有效地保持系统的流畅性，通过将数据发送到服务器并获得响应，可以很容易地实现可重用的特效。
最后，要实现可重用的页面特效，需要时刻牢记DRY（Don't Repeat Yourself）原则。
将所有的DOM操作和JavaScript代码封装放置于函数中，这样一来，你就可以简单的调用这个函数来重复使用它，节省宝贵的开发时间。
总之，使用jQuery和AJAX来实现可重用的网页特效是十分
简单有效的，它可以让你的网站更快、更具有表现力，让用户拥有更好的使用体验。
实现这一点，需要不断地保持DRY原则，帮助你创建可重复使用的代码，让你的开发工作更加高效简单。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
预习检查
3/46
掌握基本选择器的使用 掌握层次选择器的使用 掌握属性选择器的使用 掌握基本过滤选择器的使用 掌握可见性过滤选择器的使用
本章任务
4/46
本章目标
会使用基本选择器获取元素 会使用层次选择器获取元素 会使用属性选择器获取元素 会使用基本过滤选择器获取元素 会使用可见性过滤选择器获取元素
演示示例3：属性选择器
23/46
根据属性值获取元素
属性选择器可以根据属性的值来选取元素
$("[class=odds]").css("background-color","#09F") 改变class属性的值为odds的元素的背景颜色 属性选择器也支持属 性值的模糊匹配
演示示例3：属性选择器
24/46
ID选择器
语法构成
描述
示例
element 根据给定的标签 $("h2" )选取所有
名匹配元素
h2元素
.class #id
根据给定的class $(" .title")选取所
匹配元素
有class为title的
元素
根据给定的id匹 $(" #title")选取id
配元素
为title的元素
8/46
基本选择器2-2
选取满足多个条件的 $("li[id][title=新闻
复合属性的元素
要点]" )选取含有id
属性和title属性为新
闻要点的<li>元素
22/46
根据属性名获取元素
属性选择器可以根据是否包含某属性来选取元素
$("h2[title]").css("background-color","#09F") 改变含有title属性的<h2>元素的背景颜色
名称
语法构成
[attribute]
描述
示例
选取包含给定属性的 $(" [href]" )选取含
元素
有href属性的元素
属性选 择器
[attribute=valu 选取等于给定属性是
e]
某个特定值的元素
[attribute !=val 选取不等于给定属性
ue]
是某个特定值的元素
$(" [href ='#']" )选 取href属性值为“#” 的元素
选取最后一个元素
$(" li:last" )选取所 有<li>元素中的最后 一个<li>元素
选取索引是偶数的所 $(" li:even" )选取索
有元素（index从0开 引是偶数的所有<li>
始）
元素
选取索引是奇数的所 $(" li:odd" )选取索
有元素（index从0开 引是奇数的所有<li>
演示示例4：基本过滤选择器
35/46
基本过滤选择器
基本过滤选择器还支持一些特殊的选择方式
名称
语法构成
描述
示例
:not(selecto 选取去除所有与给定 $(" li:not(.three)" )
r)
选择器匹配的元素 选取class不是three
的元素
基本过滤选 :header 择器
选取所有标题元素， $(":header" )选取网
将在后续章节中讲解
内容过滤选择器、子元素过滤选择器……
参考在线学习平台
31/46
基本过滤选择器
基本过滤选择器可以选取第一个元素、最后一个元素、 索引为偶数或奇数的元素
名称
语法构成 :first
:last
基本过滤选
择器
:even
:odd
描述
示例
选取第一个元素
$(" li:first" )选取所 有<li>元素中的第一 个<li>元素
多属性条件选择
属性选择器支持多属性条件复合查找元素
$("li[class][title*=y]").css("background-color","#09F") 改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色
演示示例3：属性选择器
25/46
学员操作—使用jQuery美化英雄联盟简介页
:gt(index) 基本过滤选 择器
:lt(index)
描述
示例
选取索引等于index $("li:eq(1)" )选取索 的元素（index从0开 引等于1的<li>元素 始）
选取索引大于index $(" li:gt(1)" )选取索
的元素（index从0开 引大于1的<li>元素
始）
（注：大于1，不包
6/46
jQuery选择器分类
jQuery选择器功能强大，种类也很多，分类 如下：
类CSS选择器
基本选择器 层次选择器 属性选择器
过滤选择器
基本过滤选择器 可见性过滤选择器
7/46
基本选择器2-1
基本选择器包括标签选择器、类选择器、ID 选择器、并集选择器、交集选择器和全局选 择器
名称 标签选择器 类选择器
第四章
jQuery选择器
回顾及作业点评
提问
使用jQuery如何实现隔行变色效果？ $(document).ready()与window.onload有什 么区别？ 如何实现DOM对象和jQuery对象间的转化？
2/46
提问
jQuery选择器包括哪几大类？ 类选择器和ID选择器有什么区别？ 如何通过name属性来查找元素？
5/46
jQuery选择器
jQuery选择器类似于CSS选择器，用来选取 网页中的元素
$("h3").css("background","#09F");
获取并设置网页中所有<h3>元素的背景 “h3”为选择器语法，必须放在$()中 $(“h3”)返回jQuery对象 .css()是为jQuery对象设置样式的方法
演示示例1：基本选择器
12/46
并集选择器
并集选择器用来合并元素集合
$("h2,dt,.title").css("background","#09F") 获取并设置所有<h2>、<dt>、class为title的元素的背景颜色
演示示例1：基本选择器
13/46
交集选择器
交集选择器可以对元素集合根据class或id再筛选
子选择器
子选择器用来获取元素的子元素
$("#menu>span").css("background-color","#09F") 获取并设置#menu下的子元素<span>的背景颜色
演示示例2：层次选择器
18/46
相邻选择器
相邻选择器用来选取紧邻目标元素的下一个元素
$("h2+dl").css("background-color","#09F") 获取并设置紧接在<h2>元素后的<dl>元素的背景颜色
$(" h2~dl " )选取 <h2>元素之后所有 的同辈元素<dl>
16/46
后代选择器
后代选择器用来获取元素的后代元素
$("#menu span").css("background-color","#09F") 获取并设置#menu下的<span>元素的背景颜色
演示示例2：层次选择器
17/46
演示示例2：层次选择器
19/46
同辈选择器
同辈选择器用来选取目标元素之后的所有同辈元素
$("h2~dl").css("background-color","#09F") 获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
演示示例2：层次选择器
20/46
属性选择器
属性选择器通过HTML元素的属性来选择元素
$(" [href !='#']" )选 取href属性值不为 “#”的元素
21/46
属性选择器
名称
语法构成
描述
示例
[attribute^= 选取给定属性是以某 $(" [href^='en']" )选
value]
些特定值开始的元素 取href属性值以en开
头的元素
[attribute$= 选取给定属性是以某 $(" [href$='.jpg']" )
括1）
选取索引小于index $(“li:lt(1)” )选取索引
的元素（index从0开 小于1的<li>元素
始）
（注：小于1，不包
括1）
34/46
选取索引值等于1的元素
$("li:eq(1)")
选取索引值大于1的元素
$("li:gt(1)")
选取索引值小于1的元素
$("li:lt(1)")