今日内容： 1. ECMAScript： 2. BOM： 3. DOM： 1. 事件
## DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象： 1. 修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容： * 属性：innerHTML 1. 获取元素对象 2. 使用innerHTML属性修改标签体内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="img/off.gif"> <h1 id="title">悔创阿里杰克马</h1> <script> // var light = document.getElementById("light"); // alert("我要换图片了！"); // light.src = "img/on.gif"; //1.获取h1标签对象 var title = document.getElementById("title"); alert("我要换内容了！"); //2.修改内容 title.innerHTML = "不识妻美刘强东"; </script> </body> </html>## 事件简单学习 * 功能： 某些组件被执行了某些操作后，触发某些代码的执行。 * 造句： xxx被xxx,我就xxx * 我方水晶被摧毁后，我就责备对友。 * 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件 1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码 1. 事件：onclick--- 单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> </head> <body> <img id="light" src="img/off.gif" onclick="fun()"> <img id="light2" src="img/off.gif"> <script> function fun() { alert("我被点了！"); } function fun2() { alert("咋老点我？"); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2;//注意！带括号就执行了！ </script> </body> </html>案例：电灯开关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> //1.获取图片对象 <img id="light" src="img/off.gif"> <script> //2.获取light对象 var light = document.getElementById("light"); var flag = false;//代表灯是灭的 function fun() { if (flag) {//判断如果灯是开的，则灭掉 light.src = "img/off.gif"; flag = false; } else { light.src = "img/on.gif"; flag = true; } } light.onclick = fun; </script> </body> </html># BOM: 1. 概念：Browser Object Model 浏览器对象模型 * 将浏览器的各个组成部分封装成对象。
2. 组成： * Window：窗口对象 * Navigator：浏览器对象 * Screen：显示器屏幕对象 * History：历史记录对象 * Location：地址栏对象
3. Window：窗口对象 1. 创建 2. 方法 1. 与弹出框有关的方法： alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 * 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。 * 返回值：获取用户输入的值
2. 与打开关闭有关的方法： close() 关闭浏览器窗口。 * 谁调用我 ，我关谁 open() 打开一个新的浏览器窗口 * 返回新的Window对象 3. 与定时器有关的方式 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 * 参数： 1. js代码或者方法对象 2. 毫秒值 * 返回值：唯一标识，用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Window对象</title> </head> <body> <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> <script> // window.alert(); // var flag = confirm("您确定要退出吗？"); // if (flag){ // //退出操作 // setTimeout(fun,2000); // alert("欢迎再次光临！"); // } else { // alert("手别抖。") // } //输入框 // var result = prompt("请输入用户名"); // alert(result); //打开新窗口 // var openBtn = document.getElementById("openBtn"); // var newWindow; // openBtn.onclick = function(){ // newWindow = open("http://www.baidu.com"); // } //关闭窗口 // var closeBtn = document.getElementById("closeBtn"); // closeBtn.onclick = function (){ // newWindow.close(); // } //一次性定时器 var id = setTimeout(fun,2000); clearTimeout(id); function fun() { alert('boom~~'); } //循环定时器 //setInterval(fun,2000); </script> </body> </html>案例：轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> //修改图片src属性 var number = 1; function fun() { number++; //判断number是否大于3 if (number > 3) { number=1; } var img = document.getElementById("img"); img.src = "img/banner_"+number+".jpg"; } //2.定义定时器 setInterval(fun,3000); </script> </body> </html>
3. 属性： 1. 获取其他BOM对象： history location Navigator Screen: 2. 获取DOM对象 document 4. 特点 * Window对象不需要创建可以直接使用 window使用。 window.方法名(); * window引用可以省略。 方法名();
4. Location：地址栏对象 1. 创建(获取)： 1. window.location 2. location
2. 方法： * reload() 重新加载当前文档。刷新 3. 属性 * href 设置或返回完整的 URL。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Location对象</title> </head> <body> <input id="btn" type="button" value="刷新"> <input id="goBaidu" type="button" value="去百度"> <script> //reload方法，定义一个按钮，点击按钮，刷新当前页面 //1.获取按钮 var btn = document.getElementById("btn"); //2.绑定单击事件 btn.onclick = function () { //3.刷新页面 location.reload(); } //获取href var href = location.href; //alert(href); //点击按钮，访问百度www.baidu.com //1.获取按钮 var goBaidu = document.getElementById("goBaidu"); //2.绑定单击事件 goBaidu.onclick = function () { location.href = "http://www.baidu.com" } </script> </body> </html>案例：页面跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> <span id="time">5</span>秒后，自动跳转到首页... </p> <script> /* 分析： 1.显示页面效果 2.倒计时读秒效果实现 2.1定义一个方法，获取span标签，修改span标签内容 2.2定义一个定时器，1秒执行一次该方法 3.在方法中判断时间如果<=0,则跳转到首页 */ //2.倒计时读秒效果实现 var second = 5; var time = document.getElementById("time"); //2.1定义一个方法，获取span标签，修改span标签内容 function fun() { second--; //时间如果<=0,则跳转到首页 if (second<=0) { location.href = "http://www.baidu.com"; } time.innerHTML = second+""; } //2.2定义一个定时器，1秒执行一次该方法 setInterval(fun,1000); </script> </body> </html>5. History：历史记录对象 1. 创建(获取)： 1. window.history 2. history
2. 方法： * back() 加载 history 列表中的前一个 URL。 * forward() 加载 history 列表中的下一个 URL。 * go(参数) 加载 history 列表中的某个具体页面。 * 参数： * 正数：前进几个历史记录 * 负数：后退几个历史记录 3. 属性： * length 返回当前窗口历史列表中的 URL 数量。
