web程序设计 第五课 - javascript基础3

Web程序设计(考研)

利用javascript开发动态文档

元素的移动

1. 利用position定为来实现元素的移动
2. 利用css3属性transform来实现文档的移动

元素的显隐

1.利用display属性来实现元素的绘制与不绘制，常用属性如下：

• block：展示为块级元素
• inline：展现为内联元素
• inline-block：展现为内联块级元素
• none：不绘制

2.利用visibility属性来实现元素的显隐，主要属性如下：

• visible：可见的
• hidden：隐藏的

3.通过设置opacity元素的透明度，来实现显隐效果

注意：diplay:none;是不会绘制元素，压根不会出现在文档流上(所以事件也是无效的)；而visibility:hidden;仅仅是不显示元素，依然会绘制在文档流上

鼠标的位置：

1.获取鼠标相对于屏幕的位置：

document.addEventListener("mousemove", function(event) {
    console.log("鼠标所在的X坐标：" + event.pageX);
    console.log("鼠标所在的Y坐标：" + event.pageY);
    console.log("-----------");
}, false)

2.获取鼠标相对于某个元素的位置：

ele.addEventListener("mousemove", function(event) {
   console.log(event.clientX, event.clientY);
}, false)  

获取元素的基本信息

元素的大小和相对于浏览器的位置

ele.getBoundingClientRect()：返回信息如下：
* top：元素相对于浏览器上部位置
* left：元素相对于浏览器左边位置
* bottom：元素相对于浏览器下部位置
* right：元素相对于浏览器右边位置
* width：元素本身宽度
* height：元素本身高度

元素的宽高

1. clientHeight, clientWidth：元素的可视区宽高(width + padding)
2. offsetHeight, offsetWidth：元素实际所占的宽高(width + padding + border + 滚动条)
3. scrollHeight, scrollWidth：元素发生滚动后，元素的实际区域

元素的样式操作

1. ele.style：设置元素样式
2. 添加class修改样式

定时函数

1. setTimeout：延时触发某个动作
2. setInterval：持续触发某个动作

附录：

1. 理解对象深浅拷贝的含义，实现一个函数的深拷贝
2. 实现一个元素的拖拽
3. 实现一个Tag选项卡
4. 完成一个倒计时的程序，要求在页面上能够现实倒计时的时间(s)