隐藏页面标签的两种方式
- display:none 元素隐藏并脱离文档流, 改回原来的值则显示
- visibility:hidden(隐藏)/visible(显示) 隐藏元素不脱离文档流
自定义对象(了解)
-
第一种方式:
function Person(name,age){
//给对象添加属性
this.name=name;
this.age=age;
//给对象添加方法
this.run = function(){
alert(this.name+":"+this.age);
}
} */
//实例化对象
//var p = new Person(“关羽”,42);
//p.run(); -
第二种:
var p2 = { /* 以键值对的形式添加属性和方法 */ "name":"刘备", "age":43, "run":function(){ alert(this.name+":"+this.age); } } p2.run();
DHTML
-
简介: Dynamic(动态)HTML=html+css+js
-
对象分类:
- JavaScript内置对象:包括 string number boolean array
- BOM:Browser(浏览器) Object Modle,包含和浏览器相关的各种对象
- DOM:Document(文档) Object Model,包含和页面相关的各种对象
BOM
- window对象, 该对象里面属性和方法称为全局属性和全局方法,访问时可以省略window.
- window对象中常见的方法:
- parseInt/Flaot()
- alert() //弹出提示框
- confirm() //弹出确认框
- prompt() //弹出文本框
- isNaN() 判断是否是数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function fn1(){
alert("弹出提示框");
}
function fn2(){
var a =confirm("吃了吗?");
alert(a);
return a;
}
function fn3(){
var b = prompt();
alert(b)
return b;
}
</script>
</head>
<body>
<input type="button" value="弹出提示框" οnclick="fn1()">
<input type="button" value="弹出确认框" οnclick="fn2()">
<input type="button" value="弹出文本框" οnclick="fn3()">
</body>
</html>
- window中常见的属性
- location 位置
获得和修改浏览器的访问地址:
location.href //获取
location.href=“http://tmooc.cn” //修改 注意必须要加http://
location.reload(); 重新加载(刷新) - history 历史 当前窗口的历史页面
history.length 页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n正值则前进 负值后退 0刷新 - screen 屏幕
screen.width/height 获得屏幕的分辨率
screen.availWidth/availHeight 获取屏幕可用分辨率 - navigator 导航/帮助
navigator.userAgent 获取浏览器的版本信息
- location 位置
- window中相关的事件
- onclick 窗口点击事件
- onload 页面加载完成事件 ****
- onfocus 页面获取焦点事件
- onblur 页面失去焦点事件
注意:切换页面,鼠标点击页面会触发 onfocus、onblur时间
eval()方法
- 可以将字符串以js代码的形式执行
“2+3*5-5”
通过js代码给标签添加css样式
- 在start方法中调用stop方法 为了避免重复开启定时器 ###通过标签名获取元素们
var arr = document.getElementsByTagName(“标签名”);
###Low版轮播图步骤
- 页面中添加div在div里面添加三个img
- 通过样式让div和img设置相同的宽高200*150
- 让所有图片隐藏(脱离文档流的隐藏)
- 在页面加载完成的时候获取第一张图片 并让其显示
- 开启定时器准备一个递增的全局变量x然后在定时器的方法中让其对3取余数
- 获取所有的图片数组,遍历数组,遍历时判断如果i等于第5步取到的余数时让当前遍历的图片显示 其它的隐藏
###定时器
- 开启 var timer = setInterval(方法,时间间隔);
- 停止 clearInterval(timer);
###只执行一次的定时器 - setTimeout(方法,时间间隔);
###DOM Document Object Model文档对象模型
- 和页面相关的内容
####查找页面元素的方法
- 通过id查找
document.getElementById() - 通过标签名查找
document.getElementsByTagName() - 通过标签的name属性查找
document.getElementsByName() - 通过标签的class属性查找
document.getElementsByClassName(); - 获取页面的body元素
document.body
####创建新元素
- var d = document.createElement(“div”);
d.innerText=“abc”;
####添加到页面 - 父元素.appendChild(新元素);
document.body.appendChild(d);
####插入元素 - 父元素.insertBefore(新元素,弟弟元素);
####删除元素 - 父元素.removeChild(被删除的元素);
###代码介绍
- 定时器移动图片
- 添加数字练习
- 循环添加三张图片
- low版轮播图
- 高级版轮播图 ***
- 倒计时练习
- dom相关练习
- 北上广练习
###高级版轮播图步骤: - 搭建页面,通过css给图片和div设置相同的宽高
- 修改图片的定位为绝对定位,并且在上级div里添加相对定位
- 在页面加载完成的时候得到所有的图片数组,遍历数组,让数组里面图片的left值为i*200
- 创建1秒执行100次的定时器 在定时器里面获取所有图片数组,遍历数组,得到当前遍历图片的left值 让其-=2 把新的值再次给到图片
- 在移动图片时 如果left值<=-200时 让left值=400
- 让上级div超出范围不显示
- 让定时器通过一个moveTimer记录 ,在判断left值<=-200时让定时器停止
- 把移动一张 图片定时器的所有代码封装到一个方法中,再开启另外一个定时器,每隔2秒调用次方法
- 给div添加鼠标悬停事件悬停时调用stop方法 方法中停止2秒执行的定时器
- div添加鼠标移出事件 调用start方法 方法中再次开启2秒执行的定时器。
- 当页面失去焦点时调用 stop方法 当页面获取焦点时调用 start方法