JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元3 设计文字类网页特效.ppt

《JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元3 设计文字类网页特效.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元3设计文字类网页特效任务3-1JavaScript实现滚动网页标题栏中的文字任务3-2jQuery实现向上滚动网站促销公告【知识必备】3.1JavaScript的循环语句如果希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的，循环可以将代码块执行指定的次数。1．while循环While循环会在指定条件为真时循环执行代码块，只要指定条件为true，循环就可以一直执行代码。2．do…while循环do…while循环是while循环的变体，该循环在检查条件是否为真之前会执行一次代码块，然后如果条件为真的话，就重复

2、这个循环。3．for循环（1）表达式1。通常使用表达式1来初始化循环中所用的变量（vari=0）。表达式1是可选的，也就是说，不使用表达式1也可以。可以在表达式1中初始化任意（或者多个）值。（2）表达式2。通常表达式2用于判断条件是否成立，表达式2同样是可选的。如果表达式2返回true，则循环再次开始，如果返回false，则循环将结束。（3）表达式3。通常表达式3会增加初始变量的值。表达式3也是可选的，表达式3有多种用法。增量可以是负数（i--），或者更大（i=i+15）。4．for…in循环JavaScript的for…in语句用于循

3、环遍历对象的属性，for…in循环中的代码块将针对每个属性执行一次。5．比较while循环和for循环使用while循环来显示num数组中的所有值。6．break语句在单元2学习switch()语句时已经见到过break语句，它用于跳出switch()语句。break语句也可用于跳出循环，break语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。7．continue语句Continue语句用于跳过循环中的一个迭代。如果出现了指定的条件，就继续执行循环中的下一个迭代。8．JavaScript标签可以对JavaScript语句进行

4、标记，如需标记JavaScript语句，则在标签名称后加上冒号。3.2HTMLDOM（文档对象模型）文档对象模型（DocumentObjectModel,DOM）是用以访问HTML元素的正式W3C标准，HTMLDOM定义了访问和操作HTML文档的标准方法，通过HTMLDOM，可以访问HTML文档的所有元素。HTMLDOM独立于平台和语言，可被任何编程语言使用，如Java、JavaScript和VBscript。1．查找HTML元素通常，JavaScript需要操作HTML元素。为此，必须首先找到该元素。（1）通过id查找HTML元素。（

5、2）通过标签名查找HTML元素。（3）通过类名找到HTML元素。2．改变HTML元素的内容HTMLDOM允许JavaScript改变HTML元素的内容，修改HTML内容最简单的方法是使用innerHTML属性。3．改变HTML元素的属性4．改变HTML元素的样式5．创建新的HTML元素6．删除已有的HTML元素3.3JavaScript的位置与尺寸方法3.3.1网页元素的宽度和高度尺寸1．浏览器窗口的尺寸大小和网页的尺寸大小（1）innerWidth和innerHeight属性。（2）clientWidth和clientHeight属性

6、。2．屏幕分辨率的高和宽window.screen.height用于获取屏幕分辨率的高度，window.screen.width用于获取屏幕分辨率的宽度。3．屏幕可用工作区的高度和宽度window.screen.availHeight用于获取屏幕可用工作区的高度，window.screen.availWidth用于获取屏幕可用工作区的宽度。3.3.2网页元素的位置1．offsetLeft和offsetTop属性2．scrollLeft和scrollTop属性3．screenTop和screenLeft属性4．getBoundingCli

7、entRect()方法3.3.3通过网页元素的样式属性style获取或设置元素的尺寸和位置通过网页元素的样式属性style可以获取或设置元素的长度、宽度、上边界（元素与页面顶边界的距离）、左边界（元素与页面左边界的距离）和颜色等属性。1.style.left2.style.pixelLeft3.style.posLeft3.4jQuery的选择器jQuery的选择器就是“选择某个网页元素，然后对其进行某种操作”，使用jQuery的第一步，往往就是将一个选择表达式放进构造函数jQuery()（简写为$），然后得到被选中的元素。jQuery

8、的选择器允许对元素组或单个元素进行操作。jQuery元素选择器和属性选择器通过标签名、属性名或内容对HTML元素进行选择。jQuery使用CSS选择器来选取HTML元素，使用路径表达式来选择带有给定属性的元