《dom编程-document对象》由会员分享，可在线阅读，更多相关《dom编程-document对象（22页珍藏版）》请在金锄头文库上搜索。
1、第三章,DOM编程document对象,本章任务,制作浮动的广告图片特效 制作带关闭按钮的浮动窗口 制作全选/全不选特效,演示示例1：浮动的广告图片,演示示例2：带关闭按钮的浮动窗口,演示示例3：全选/全不选特效,本章目标,会使用document对象的getElementById( )方法访问DIV层对象 会使用document对象的getElementsByName( )方法访问表单元素 会使用DIV对象的样式属性控制层的隐藏和显示,document对象,属性 方法,制作浮动的广告图片-1,如何在页面上方显示广告图片？如何控制图片的移动？,使用DIV层，把图片放在层中，然后使用JavaScr
2、ipt控制层的位置坐标,制作浮动的广告图片-2,实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementByID( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标,制作浮动的广告图片-3,常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度,制作浮动的广告图片-4, var advInitTop=0; function inix( ) x=document.getElementById(“advLayer“).style.pixelTop
3、; function move( ) document.getElementById(“advLayer“).style.pixelTop= advInitTop+document.body.scrollTop; window.onscroll=move ; /当页面滚动时调用move( )函数 ,查看完整代码,获取层的初始与上边界的距离,通过页面滚动的高度来改变层距离上边界的距离,如何实现带关闭功能的浮动窗口？,把带关闭的图标放到层中，当点击图标时层消失。,制作带关闭按钮的浮动窗口-2,实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层
4、对象 2、设置层的样式style的显示属性display=“none“,制作带关闭按钮的浮动窗口-3, var advInitTop=0; function inix( ) advInitTop=document.getElementById(“advLayer“).style.pixelTop; function move( ) document.getElementById(“advLayer“).style.pixelTop= advInitTop+document.body.scrollTop; function closeMe( ) document.getElementById(“
5、closeLayer“).style.display=“none“; document.getElementById(“advLayer“).style.display=“none“; window.onscroll=move ; /当页面滚动时调用move( )函数 ,查看完整代码,隐藏关闭图标所在的层和浮动窗口所在的层,制作带关闭按钮的浮动窗口-4,上一张PPT中示例能实现关闭了，但关闭图片不能跟随滚动，怎么办？,让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。,解决办法：在move( )方法中添加图标所在的层与页面滚动的高度保持同步的代码即可,制作带关闭按钮的浮动窗口-5, va
6、r advInitTop=0; var closeInitTop=0; function inix( ) advInitTop=document.getElementById(“advLayer“).style.pixelTop;closeInitTop=document.getElementById(“closeLayer“).style.pixelTop; function move( ) document.getElementById(“advLayer“).style.pixelTop= advInitTop+document.body.scrollTop ; document.get
7、ElementById(“closeLayer“).style.pixelTop= closeInitTop+document.body.scrollTop ; function closeMe( ) document.getElementById(“closeLayer“).style.display=“none“; document.getElementById(“advLayer“).style.display=“none“; window.onscroll=move ; /窗口的滚动事件 ,查看完整代码,关闭图片所在的层和滚动条同步滚动,小结 1,制作右边栏浮动的带关闭按钮的广告图片,
8、与滚动条同步滚动广告窗口,练习答案,练习代码,制作实现全选效果-1,如何实现如图所示的全选或全不选效果？,全选效果,全不选效果,制作实现全选效果-2,1、复选框是否选中的属性是哪个？ 2、写代码逐个复选框设置为true，有没有更好的办法？,checked属性,解决办法: 使用复选框数组， 通过循环给checked属性赋值,制作实现全选效果-3,实现思路： 创建一组同名的复选框 编写脚本 1、使用getElementsByName( )方法获得一组同名的复选框对象。 2、通过循环来改变复选框是否被选中属性checked的值。,制作实现全选效果-4, function checkAll(boolV
9、alue ) var allCheckBoxs=document.getElementsByName(“isBuy“) ; for (var i=0;i 全选 全不选 ,查看完整代码,判断同名元素中是否是复选框,是复选框就改变是否选中属性checked的值,小结 2,编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。,练习答案,练习代码,常见错误-1, function checkAll(boolValue ) alert(“OK“); var allCheckBoxs=document.getElementsByName(“isBuy“) ; alert(allCheckBoxs0.type); for (var i=0;i,这里是判断关系所以应该是比较运算符“=“，而不是赋值运算符“=“, function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(“isBuy“) ; for (var i=0;i 全选 全不选 ,常见错误-2,调用时，参数不要加单引号，false和false的含义不一样,总结,请介绍Document对象的常用属性？ 请详细解释Document对象的常用方法？ 请简述制作带关闭按钮的浮动窗口实现思路？ 请简要回答如何制作全选/全不选复选框效果？,
