一.JS组成及Web API介绍
1.JS组成(JS语法,DOM,BOM)
2.Web API介绍
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
二. 文档对象模型DOM
DOM是W3C定义的一系列改变网页内容，结构和样式的编程接口
1.DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中所有标签都是元素，DOM中使用element表示元素
- 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
2.使用DOM提供的接口操作元素
获取页面元素
-
根据id获取元素: getElementById()
// 返回元素对象 var element = document.getElementById("元素id"); -
获取某类标签的元素
// 返回带有该类标签名的元素对象集合，伪数组存储 var data = document.getElementsByTagName("标签名称"); // 获取第一个元素 var ele1 = data[0];注意：
-
得到的对象集合，可以通过遍历得到每个元素对象
-
得到的元素对象是动态的
-
-
获取body元素和html元素
//获取body元素 var bodyEle = document.body; // 获取html元素 var htmlEle = document.documentElement;
操作页面元素触发事件
事件三要素：事件源，事件类型，事件处理程序。
事件的执行步骤：
- 获取事件源
- 注册事件
- 添加事件处理程序（使用函数的形式）
<body>
<button id = 'btn'>点击事件触发</button>
<script>
//点击按钮，弹出对话框
// 事件有三部分组成，事件源 事件类型 事件处理程序 组成，合成事件三要素
// 1.事件被触发的对象 哪里触发了这个事件？ 按钮
var btn = document.getElementById("btn");
// 2.事件类型，如何触发事件，如鼠标点击（onclick)
btn.onclick = function(){
alert("1111111");
}
</script>
</body>
常见的事件类型
案例一：修改元素内容（点击按钮，显示时间）
<body>
<button id = 'btn'>点击显示时间</button>
<div id = 'div'></div>
<script>
//事件源
var btn = document.getElementById("btn");
var div = document.getElementById("div");
//时间类型，点击；事件程序修改页面内容，显示时间
btn.onclick = function(){
div.innerText = getDate();
}
function getDate(){
Date date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var date = date.getDate();
return year + '年' + month + '月' + date + '日';
}
</script>
</body>
案例二：修改元素属性（图片切换）
<body>
<button id = 'ldh'>刘德华</button>
<button id = 'zxy'>张学友</button>
<img id = 'img' src ='/img/ldh.jpg' alt = '' title = '刘德华' />
<script>
//事件源
var ldh = document.getElementById("ldh");
var zxy = document.getElementById("zxy");
var img = document.getElementById("img");
ldh.onclick = function(){
img.src = '/img/ldh.jpg';
img.title = '刘德华';
}
zxy.onclick = function(){
img.src = '/img/zxy.jpg';
img.title = '张学友';
}
</script>
</body>
案例三：修改表单属性
<body>
<button id = 'btn'>按钮</button>
<input id = 'input' type = 'text' value = '请输入内容' />
<script>
//事件源
var btn = document.getElementById("btn");
var input = document.getElementById("input");
btn.onclick = function(){
// 修改表单里面的内容
input.value = '按钮点击了';
}
</script>
</body>
案例四：表格隔行换色
<head>
<style>
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size:12px;
color: red;
}
.bg {
backgroud-color:pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>03</td>
<td>王五</td>
<td>女</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector("tbody").querySelectorAll("tr");
for (i = 0 ; i < trs.lenth; i++){
// 鼠标经过，修改背景颜色
trs[i].onmouseover = function(){
this.className = 'bg';
}
// 鼠标离开，还原
trs[i].onmouseout = function(){
this.className = '';
}
}
</script>
</body>
三. 浏览器对象模型BOM
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window，BOM是浏览器厂商在各自浏览器上定义的，存在兼容性问题。我们主要学习一些各个浏览器通用的api。
1.BOM的构成
window对象是浏览器的顶级对象，它具有双重角色
-
它是js访问浏览器的一个接口
-
它是定义在全局作用域中的一个对象，定义在全局作用域中的变量函数都是window的属性和方法，在调用时我们可以省略widow，如alert()等。
2.widow对象常见事件
窗口加载事件
window.onload = function(){}
//或者
window.addEventListener("load",function(){})
window.onload() 是窗口（页面）加载事件，当文档内容完全加载完成触发该事件，调用函数。
有了window.onload() 就可以将js代码写到html页面的上方了。
定时器：setTimeout
5s后关闭广告
<body>
<img id="ad" src = 'img/ad.jpg'/>
<script>
var ad = document.getElementById("ad");
// 5s后关闭广告
setTimeout(function(){
ad.style.display = 'none';
},5000)
</script>
</body>
定时器：setInterval
60s可重新发送短信
<body>
手机号码：<input id="input" /> <button id="btn">发送</button>
<script>
//按钮点击后，会禁用，disabled=true
//同时按钮的内容发生改变，按钮中的内容需要使用innerHtml改变
//按钮内容的秒数变化需要使用定时器
//如果时间变为0，需要停止定时器，并还原按钮状态
var btn = document.getElementById("btn");
var time = 60;
btn.onclick = function(){
btn.disabled = true;
var timer = setInterval(function(){
if(time == 0){
// 如果时间变为0，需要停止定时器，并还原按钮状态
// 清除定时器
clearInterval(timer);
btn.disabled = false;
btn.innerHtml = '发送';
time = 60;
}else{
btn.innerHtml = '还剩下' + time + '秒';
time --;
}
},1000);
}
</script>
</body>
setTimeout与setInterval的区别
- setTimeout：指定的延迟时间到了就去调用回调函数，只调用一次回调函数
- setInterval：每隔指定时间就会去调用回调函数，只要不清除定时器，就会一直调用
3.JS的同步和异步及其执行机制
同步：按代码排列顺序执行任务
异步：不按照代码顺序执行任务，对于耗时较长的任务进行异步处理，下一个任务不必等待上面的代码执行结束
console.log(1);
//异步
setTimeout(function(){
console.log(3);
},2000);
console.log(2);
js的执行机制
1）先执行执行栈中的同步任务
2）异步任务放入任务队列中。
3）执行栈中的同步任务执行完毕，系统会按次序读取队列中的异步任务
4.window对象下的location属性
window对象给我们提供了一个location属性（这个属性本身也是一个对象，也成为location对象）用于设置窗体的URL,并且可以解析URL.
5.window对象下的history属性
window对象提供了history属性对象，与浏览器历史记录进行交互。
4666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
