单元3 设计文字类网页特效
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery会抛掉多余的空格，并按照 一行长代码来执行上面的代码行。
这样的话，浏览器就不必多次查找 相同的元素。
如需链接一个动作，只需简单地把 该动作追加到之前的动作上。
链式操作是jQuery最令人称道、最方 便的地方。
它的原理在于每一步的jQuery操作， 返回的都是一个jQuery对象，所以不同操 作可以连在一起。
jQuery使用CSS选择器来选取HTML 元素，使用路径表达式来选择带有给定属 性的元素。
3.5 jQuery的链式操作
jQuery有一种名为链接（chaining） 的技术，允许用户在相同的元素上运行 多条jQuery命令，允许将所有操作连接 在一起，以链条的形式写出来。
链接是一种在同一对象上执行多个 任务的便捷方法。
使用while循环来显示num数组中的 所有值。
6．break语句
在单元2学习switch()语句时已经见到过 break语句，它用于跳出switch()语句。
break语句也可用于跳出循环，break语 句跳出循环后，会继续执行该循环之后的代 码（如果有的话）。
7．continue语句
Continue语句用于跳过循环中的一 个迭代。
HTML DOM独立于平台和语言，可被 任何编程语言使用，如Java、JavaScript和 VBscript。
1．查找HTML元素
通常， JavaScript需要操作HTML 元素。
为此，必须首先找到该元素。 （1）通过id查找HTML元素。 （2）通过标签名查找HTML元素。 （3）通过类名找到HTML元素。
如果出现了指定的条件，就继续执 行循环中的下一个迭代。
8．JavaScript标签
可以对JavaScript语句进行标记，如 需标记JavaScript语句，则在标签名称后 加上冒号。
3.2 HTML DOM（文档对象模型）
文档对象模型（Document Object Model, DOM）是用以访问HTML元素的正式W3C标 准，HTML DOM定义了访问和操作HTML文 档的标准方法，通过HTML DOM，可以访问 HTML文档的所有元素。
3.6 jQuery的效果方法
jQuery的效果主要包括隐藏、显示、切 换、淡入淡出、滑动和动画效果等。
许多jQuery函数涉及动画，这些函数也 许会将speed或duration作为可选参数。
speed或duration参数可以设置许多不同 的值，如“slow”、“fast”、“normal”或 毫秒。
3．屏幕可用工作区的高度和宽度
window.screen.availHeight用于获取 屏幕可用工作区的高度，
window.screen.availWidth用于获取 屏幕可用工作区的宽度。
3.3.2 网页元素的位置
1．offsetLeft和offsetTop属性 2．scrollLeft和scrollTop属性 3．screenTop和screenLeft属性 4．getBoundingClientRect()方法
3.4 jQuery的选择器
jQuery的选择器就是 “选择某个网 页元素，然后对其进行某种操作”，使 用jQuery的第一步，往往就是将一个选 择表达式放进构造函数jQuery()（简写为 $），然后得到被选中的元素。
jQuery的选择器允许对元素组或单个 元素进行操作。
jQuery元素选择器和属性选择器通过 标签名、属性名或内容对HTML元素进行 选择。
2．改变HTML元素的内容
HTML DOM允许JavaScript改变HTML 元素的内容，修改HTML内容最简单的方法 是使用innerHTML属性。
3．改变HTML元素的属性 4．改变HTML元素的样式 5．创建新的HTML元素 6．删除已有的HTML元素
3.3 JavaScript的位置与尺寸方法
3.3.3 通过网页元素的样式属性style 获取或设置元素的尺寸和位置
通过网页元素的样式属性style可以 获取或设置元素的长度、宽度、上边界 （元素与页面顶边界的距离）、左边界 （元素与页面左边界的距离）和颜色等 属性。
1. style.left 2. style.pixelLeft 3. style.posLeft
Βιβλιοθήκη Baidu
（3）表达式3。
通常表达式3会增加初始变量的值。 表达式3也是可选的，表达式3有多种用 法。增量可以是负数（i--），或者更大 （i= i +15）。
4．for…in循环
JavaScript的for…in语句用于循环遍 历对象的属性，for…in 循环中的代码块 将针对每个属性执行一次。
5．比较while循环和for循环
通常使用表达式1来初始化循环中所用 的变量（var i=0）。表达式1是可选的，也 就是说，不使用表达式1也可以。可以在表 达式1中初始化任意（或者多个）值。
（2）表达式2。
通常表达式2用于判断条件是否成立， 表达式2同样是可选的。如果表达式2返回 true，则循环再次开始，如果返回false，则 循环将结束。
1．while循环
While循环会在指定条件为真时循环 执行代码块，只要指定条件为true，循环 就可以一直执行代码。
2．do…while循环
do…while循环是while循环的变体， 该循环在检查条件是否为真之前会执行 一次代码块，然后如果条件为真的话， 就重复这个循环。
3．for循环
（1）表达式1。
单元3 设计文字类网页特效
任务3-1 JavaScript实现滚动网 页标题栏中的文字 任务3-2 jQuery实现向上滚动网 站促销公告
【知识必备】
3.1 JavaScript的循环语句
如果希望一遍又一遍地运行相同的 代码，并且每次的值都不同，那么使用 循环是很方便的，循环可以将代码块执 行指定的次数。
3.3.1 网页元素的宽度和高度尺寸
1．浏览器窗口的尺寸大小和网页的 尺寸大小
（1）innerWidth和innerHeight属性。 （2）clientWidth和clientHeight属性。
2．屏幕分辨率的高和宽
window.screen.height用于获取屏幕 分辨率的高度，window.screen.width用 于获取屏幕分辨率的宽度。
这样的话，浏览器就不必多次查找 相同的元素。
如需链接一个动作，只需简单地把 该动作追加到之前的动作上。
链式操作是jQuery最令人称道、最方 便的地方。
它的原理在于每一步的jQuery操作， 返回的都是一个jQuery对象，所以不同操 作可以连在一起。
jQuery使用CSS选择器来选取HTML 元素，使用路径表达式来选择带有给定属 性的元素。
3.5 jQuery的链式操作
jQuery有一种名为链接（chaining） 的技术，允许用户在相同的元素上运行 多条jQuery命令，允许将所有操作连接 在一起，以链条的形式写出来。
链接是一种在同一对象上执行多个 任务的便捷方法。
使用while循环来显示num数组中的 所有值。
6．break语句
在单元2学习switch()语句时已经见到过 break语句，它用于跳出switch()语句。
break语句也可用于跳出循环，break语 句跳出循环后，会继续执行该循环之后的代 码（如果有的话）。
7．continue语句
Continue语句用于跳过循环中的一 个迭代。
HTML DOM独立于平台和语言，可被 任何编程语言使用，如Java、JavaScript和 VBscript。
1．查找HTML元素
通常， JavaScript需要操作HTML 元素。
为此，必须首先找到该元素。 （1）通过id查找HTML元素。 （2）通过标签名查找HTML元素。 （3）通过类名找到HTML元素。
如果出现了指定的条件，就继续执 行循环中的下一个迭代。
8．JavaScript标签
可以对JavaScript语句进行标记，如 需标记JavaScript语句，则在标签名称后 加上冒号。
3.2 HTML DOM（文档对象模型）
文档对象模型（Document Object Model, DOM）是用以访问HTML元素的正式W3C标 准，HTML DOM定义了访问和操作HTML文 档的标准方法，通过HTML DOM，可以访问 HTML文档的所有元素。
3.6 jQuery的效果方法
jQuery的效果主要包括隐藏、显示、切 换、淡入淡出、滑动和动画效果等。
许多jQuery函数涉及动画，这些函数也 许会将speed或duration作为可选参数。
speed或duration参数可以设置许多不同 的值，如“slow”、“fast”、“normal”或 毫秒。
3．屏幕可用工作区的高度和宽度
window.screen.availHeight用于获取 屏幕可用工作区的高度，
window.screen.availWidth用于获取 屏幕可用工作区的宽度。
3.3.2 网页元素的位置
1．offsetLeft和offsetTop属性 2．scrollLeft和scrollTop属性 3．screenTop和screenLeft属性 4．getBoundingClientRect()方法
3.4 jQuery的选择器
jQuery的选择器就是 “选择某个网 页元素，然后对其进行某种操作”，使 用jQuery的第一步，往往就是将一个选 择表达式放进构造函数jQuery()（简写为 $），然后得到被选中的元素。
jQuery的选择器允许对元素组或单个 元素进行操作。
jQuery元素选择器和属性选择器通过 标签名、属性名或内容对HTML元素进行 选择。
2．改变HTML元素的内容
HTML DOM允许JavaScript改变HTML 元素的内容，修改HTML内容最简单的方法 是使用innerHTML属性。
3．改变HTML元素的属性 4．改变HTML元素的样式 5．创建新的HTML元素 6．删除已有的HTML元素
3.3 JavaScript的位置与尺寸方法
3.3.3 通过网页元素的样式属性style 获取或设置元素的尺寸和位置
通过网页元素的样式属性style可以 获取或设置元素的长度、宽度、上边界 （元素与页面顶边界的距离）、左边界 （元素与页面左边界的距离）和颜色等 属性。
1. style.left 2. style.pixelLeft 3. style.posLeft
Βιβλιοθήκη Baidu
（3）表达式3。
通常表达式3会增加初始变量的值。 表达式3也是可选的，表达式3有多种用 法。增量可以是负数（i--），或者更大 （i= i +15）。
4．for…in循环
JavaScript的for…in语句用于循环遍 历对象的属性，for…in 循环中的代码块 将针对每个属性执行一次。
5．比较while循环和for循环
通常使用表达式1来初始化循环中所用 的变量（var i=0）。表达式1是可选的，也 就是说，不使用表达式1也可以。可以在表 达式1中初始化任意（或者多个）值。
（2）表达式2。
通常表达式2用于判断条件是否成立， 表达式2同样是可选的。如果表达式2返回 true，则循环再次开始，如果返回false，则 循环将结束。
1．while循环
While循环会在指定条件为真时循环 执行代码块，只要指定条件为true，循环 就可以一直执行代码。
2．do…while循环
do…while循环是while循环的变体， 该循环在检查条件是否为真之前会执行 一次代码块，然后如果条件为真的话， 就重复这个循环。
3．for循环
（1）表达式1。
单元3 设计文字类网页特效
任务3-1 JavaScript实现滚动网 页标题栏中的文字 任务3-2 jQuery实现向上滚动网 站促销公告
【知识必备】
3.1 JavaScript的循环语句
如果希望一遍又一遍地运行相同的 代码，并且每次的值都不同，那么使用 循环是很方便的，循环可以将代码块执 行指定的次数。
3.3.1 网页元素的宽度和高度尺寸
1．浏览器窗口的尺寸大小和网页的 尺寸大小
（1）innerWidth和innerHeight属性。 （2）clientWidth和clientHeight属性。
2．屏幕分辨率的高和宽
window.screen.height用于获取屏幕 分辨率的高度，window.screen.width用 于获取屏幕分辨率的宽度。