BOM及DOM及事件
知识内容：
1.BOM介绍
2.DOM操作
3.事件
参考：http://www.cnblogs.com/liwenzhou/p/8011504.html
入门代码(DOM基本操作与事件)：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>web 9</title> 6 </head> 7 <body> 8 <!-- 注意, 每个标签都有 class 和 id 这两个属性 --> 9 <!-- class 可以重复, id 不能重复 --> 10 <div class="login-form"> 11 <input id="id-input-username" type="text" value="gua"> 12 <br> 13 <input id="id-input-password" type="password" value="123"> 14 <br> 15 <button id="id-button-login">登录按钮</button> 16 </div> 17 <script> 18 19 // 定义log 20 var log = function() { 21 console.log.apply(this, arguments) 22 } 23 24 /* 25 往下是使用 js 操作页面元素的方法 26 ===== 27 DOM(文档对象模型) 是浏览器对 html 文件的描述方式 28 DOM API 是浏览器提供给 JavaScript 操作 html 页面内元素的方式 29 简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查) 30 */ 31 32 // 查找元素 33 // === 34 // 35 // 查找元素可以使用 document.querySelector() 函数 这个函数是最基础、最原始的查找方法 36 // document 是整个文档(包含了 html), 可以理解为 html 的父节点 37 // querySelector函数的参数是一个选择器(和 CSS 选择器一样) 38 // 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器 39 // 元素选择器 40 var body = document.querySelector('body') 41 // class 选择器, 用的是 .类名 42 var form = document.querySelector('.login-form') 43 // id 选择器, 用的是 #id 44 var loginButton = document.querySelector('#id-button-login') 45 // log 出来看看 46 log(body, form, loginButton) 47 48 49 // 操作元素的默认属性 50 // === 51 // 52 // 获得特定属性值 53 var user = document.querySelector('#id-input-username') 54 var userValue = user.value 55 log('user value', userValue) 56 // 不存在的属性会返回 undefined, 它在 js 中代表不存在 57 // null 和 undefined 很相似 58 log('没有的属性:', user.gua) 59 60 // 设置特定属性值 61 user.value = 'set value' 62 63 64 // 操作元素(创建, 删除, 修改) 65 // === 66 // 67 // 修改 68 // 用 insertAdjacentHTML 给一个元素添加子元素 69 // 这里我们给 .login-form 添加一个 h1 标签 70 var form = document.querySelector('.login-form') 71 // 第一个参数表示插入的位置, 'beforeend' 表示插入在结束之前(也就是添加到标签末尾) 72 // 第二个参数是你想插入的 html 内容 73 form.insertAdjacentHTML('beforeend', '<h1 class="msg">你好</h1>') 74 75 // 删除元素 76 var pwd = document.querySelector('#id-input-password') 77 pwd.remove() 78 79 // 修改元素 80 var msg = document.querySelector('.msg') 81 msg.innerHTML = '修改后的元素' 82 83 84 // 事件 85 // === 86 // 87 // 事件是用来处理响应的一个机制 88 // 这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 89 // 90 // 下面的链接描述了所有事件, 不过我们先从最常用的事件学起, click 事件 91 // https://developer.mozilla.org/en-US/docs/Web/Events 92 // 93 // 常用例子, 给按钮添加一个点击的事件 94 // 1, 获得按钮 95 var loginButton = document.querySelector('#id-button-login') 96 // 2, 声明一个函数, 用于在按钮点击后执行 97 var clicked = function() { 98 log('按钮被点击到了') 99 } 100 // 3, 添加事件, 使用 addEventListener 函数, 它有两个参数 101 // 第一个是事件的名字, 'click' 表示点击 102 // 第二个是事件发生后会被自动调用的函数 103 loginButton.addEventListener('click', clicked) 104 // 105 // 添加完成, 可以自己在浏览器试试, 记得打开 console 106 107 108 </script> 109 </body> 110 </html>
一、BOM介绍
1.什么是BOM
BOM: 浏览器对象模型，提供很多对象用于访问浏览器的功能，这些功能与任何网页内容无关。
提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等
2.window对象
BOM的核心是window对象，window对象表示浏览器的一个实例
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
window对象的详细介绍(要用的时候再看)：http://www.w3school.com.cn/jsref/dom_obj_window.asp
3.window的子对象(了解即可)
(1)navigator对象
Navigator 对象包含有关浏览器的信息。
注：没有应用于navigator 对象的公开标准，不过所有浏览器都支持该对象
(2)screen对象
屏幕对象，不常用。
一些属性：
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
(3)history对象
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页 history.back() // 后退一页
(4)location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面
(5)弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("你看到了吗？");
确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("你确定吗？")
提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("请在下方输入","你的答案")
二、DOM操作
1.什么是DOM(文档对象模型)
DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM(文档对象模型) 是浏览器对 html 文件的描述方式，DOM API 是浏览器提供给 JavaScript 操作 html 页面内元素的方式，简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查)
2.DOM查找元素
注：下面的document 是整个文档(整个html), 可以理解为 html 的父节点
(1)直接查找
1 document.getElementById 根据ID获取一个标签 2 document.getElementsByName 根据name属性获取标签集合 3 document.getElementsByClassName 根据class属性获取标签集合 4 document.getElementsByTagName 根据标签名获取标签集合
(2)间接查找
1 parentNode // 父节点 2 childNodes // 所有子节点 3 firstChild // 第一个子节点 4 lastChild // 最后一个子节点 5 nextSibling // 下一个兄弟节点 6 previousSibling // 上一个兄弟节点 7 8 parentElement // 父节点标签元素 9 children // 所有子标签 10 firstElementChild // 第一个子标签元素 11 lastElementChild // 最后一个子标签元素 12 nextElementtSibling // 下一个兄弟标签元素 13 previousElementSibling // 上一个兄弟标签元素
(3)使用querySelector查找
1 // document.querySelector() 函数 这个函数是最基础、最原始的查找方法 2 // querySelector函数的参数是一个选择器(和 CSS 选择器一样) 3 // 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器 4 // 元素选择器 5 var body = document.querySelector('body') 6 // class 选择器, 用的是 .类名 7 var form = document.querySelector('.login-form') 8 // id 选择器, 用的是 #id 9 var loginButton = document.querySelector('#id-button-login')
3.DOM常用基本操作
(1)内容以及属性
1 // 内容操作: 2 innerText 文本 3 innerHTML HTML内容 4 value 值 5 6 // 属性操作: 7 attributes // 获取所有标签属性 8 setAttribute(key,value) // 设置标签属性 9 getAttribute(key) // 获取指定标签属性 10 11 /* 12 var atr = document.createAttribute("class"); 13 atr.nodeValue="democlass"; 14 document.getElementById('n1').setAttributeNode(atr); 15 */
实例：全选反选取消
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="../source/css/common.css"> 7 <title>全选反选取消</title> 8 <style> 9 /*显示列表的样式list*/ 10 #list{ 11 border: dashed 1px indianred; 12 display: inline-block; 13 margin-top: 30px; 14 padding: 30px 30px; 15 } 16 </style> 17 </head> 18 <body> 19 20 <div class="container"> 21 <h1>全选反选取消</h1> 22 <h3>具体实现原理看本网页源代码中的js代码</h3> 23 24 <div id="list"> 25 <input type="button" value="全选" id="b1"> 26 <input type="button" value="反选" id="b2"> 27 <input type="button" value="取消" id="b3"> 28 <table> 29 <thead> 30 <tr> 31 <th>请选择</th> 32 <th>主机名</th> 33 <th>端口</th> 34 </tr> 35 </thead> 36 <tbody id="tb"> 37 <tr> 38 <td><input type="checkbox"/></td> 39 <td>1.1.1.1</td> 40 <td>90</td> 41 </tr> 42 <tr> 43 <td><input type="checkbox"/></td> 44 <td>1.1.1.2</td> 45 <td>192</td> 46 </tr> 47 <tr> 48 <td><input type="checkbox"/></td> 49 <td>1.1.1.3</td> 50 <td>193</td> 51 </tr> 52 </tbody> 53 </table> 54 </div> 55 56 </div> 57 58 <script> 59 // 实现全选: 60 var choseAll = function () { 61 var items = document.getElementById("tb").children; 62 for(var i=0; i<items.length; i++){ 63 item = items[i].children[0].children[0]; 64 item.checked = true 65 } 66 }; 67 b1 = document.getElementById("b1"); 68 b1.addEventListener("click", choseAll); 69 70 71 // 实现反选: 72 var reverseChose = function () { 73 var items = document.getElementById("tb").children; 74 for(var i=0; i<items.length; i++){ 75 item = items[i].children[0].children[0]; 76 /* 77 if(item.checked === true){ 78 item.checked = false 79 } 80 else { 81 item.checked = true 82 } 83 */ 84 // 上面的if-else结构简化成下面的结构: 85 item.checked = !item.checked 86 } 87 }; 88 b2 = document.getElementById("b2"); 89 b2.addEventListener("click", reverseChose); 90 91 92 // 实现取消: 93 var cancel = function () { 94 var items = document.getElementById("tb").children; 95 for(var i=0; i<items.length; i++) { 96 item = items[i].children[0].children[0]; 97 if (item.checked === true) { 98 item.checked = false 99 } 100 } 101 }; 102 b3 = document.getElementById("b3"); 103 b3.addEventListener("click", cancel); 104 105 </script> 106 107 </body> 108 </html>
(2)class操作及属性操作
class操作：
1 className // 获取所有类名(字符串) 2 classList // 获取所有类名(列表) 3 classList.remove(cls) // 删除指定类 4 classList.add(cls) // 添加类 5 classList.contains(cls) // 存在就返回true 否则返回false 6 classList.toggle(cls) // 存在就删除 否则就添加
属性操作：
1 // 获得特定属性值: 2 xxx.getAttribute('value') 3 4 // 不存在的属性会返回 null, 它在 js 中代表不存在 5 xxx.getAttribute('不存在') -> null 6 7 // 设置特定属性值: 8 xxx.setAttribute('value', '新用户名') 9 10 // 查询属性是否存在: 11 xxx.hasAttributes() // 查看元素是否有属性 12 xxx.hasAttribute('value') // 查看元素是否有特定属性 13 14 // 删除某个属性: 15 xxx.removeAttribute('type') 16 17 // 获得所有属性: 18 xxx.attributes
dataset：
1 <div id="myDiv" data-id="123"></div> 2 3 // 获取属性 4 var div = document.querySelector("#myDiv");
5 var val = div.dataset.id;
6
7 // 属性赋值
8 div.dataset.id=666;
(3)标签操作
创建标签：
1 // 方式一 2 var tag = document.createElement('a') 3 tag.innerText = "wyb" 4 tag.className = "sss" 5 tag.href = "http://www.cnblogs.com/wyb666" 6 7 // 方式二 8 var tag = "<a class='c1' href='http://www.cnblogs.com/wyb666'>wyb的个人博客</a>"
操作标签：
1 // 添加: 2 // 方式一 3 var obj = "<input type='text' />"; 4 xxx.insertAdjacentHTML("beforeEnd",obj); 5 xxx.insertAdjacentElement('afterBegin',document.createElement('p')) 6 7 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' 8 9 // 方式二 appendChild -> 追加一个子节点（作为最后的子节点） insertBefore(newnode, 某个节点) -> 把增加的节点放到某个节点前边 10 var tag = document.createElement('a') 11 xxx.appendChild(tag) 12 xxx.insertBefore(tag,xxx[1]) 13 14 // 删除: 15 var obj = document.getElementById("i1") 16 obj.remove()
(4)样式操作
1 var obj = document.getElementById('i1') 2 3 obj.style.fontSize = "32px"; 4 obj.style.backgroundColor = "red";
注：CSS样式中含有横线的CSS属性在这里都换成了驼峰表示法，例如font-size -> fontSize，background-color -> backgroundColor，而没有含横线的CSS属性一般直接使用CSS属性名即可
实例：输入框的输入提示信息
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>输入框提示输入信息</title> 7 </head> 8 <body> 9 10 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;"/> 11 12 <script> 13 14 // 聚焦 15 function Focus(ths) { 16 ths.style.color = "black"; 17 if (ths.value == '请输入关键字' || ths.value.trim() == "") { 18 19 ths.value = ""; 20 } 21 } 22 23 // 失焦 24 function Blur(ths) { 25 if (ths.value.trim() == "") { 26 ths.value = '请输入关键字'; 27 ths.style.color = 'gray'; 28 } else { 29 ths.style.color = "black"; 30 } 31 } 32 33 </script> 34 35 </body> 36 </html>
(5)位置操作
1 总文档高度 2 document.documentElement.offsetHeight 3 4 当前文档占屏幕高度 5 document.documentElement.clientHeight 6 7 自身高度 8 tag.offsetHeight 9 10 距离上级定位高度 11 tag.offsetTop 12 13 父定位标签 14 tag.offsetParent 15 16 滚动高度 17 tag.scrollTop 18 19 /* 20 clientHeight -> 可见区域：height + padding 21 clientTop -> border高度 22 offsetHeight -> 可见区域：height + padding + border 23 offsetTop -> 上级定位标签的高度 24 scrollHeight -> 全文高：height + padding 25 scrollTop -> 滚动高度 26 特别的： 27 document.documentElement代指文档根节点 28 */
实例：滚动固定
1 <!-- author: wyb --> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>滚动至顶部后固定</title> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .wrapper{ 13 width: 960px; 14 height: 3000px; 15 margin: 0 auto; 16 } 17 .header{ 18 height: 150px; 19 line-height: 150px; 20 } 21 #nav{ 22 padding:10px; 23 position: relative; 24 top: 0; 25 background: #125430; 26 width: 960px; 27 } 28 a{ 29 display:inline-block; 30 margin: 0 10px; 31 *display: inline; 32 zoom: 1; 33 color: white; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="wrapper"> 39 <div class="header"></div> 40 <div id="nav"> 41 <a href="" target="_blank">python</a> 42 <a href="" target="_blank">Javascript</a> 43 <a href="" target="_blank">jQuery</a> 44 <a href="" target="_blank">vue</a> 45 <a href="" target="_blank">首页</a> 46 <a href="" target="_blank">博客</a> 47 <a href="" target="_blank">github</a> 48 <a href="" target="_blank">其他</a> 49 </div> 50 </div> 51 52 <script> 53 54 function menuFixed(id){ 55 var obj = document.getElementById(id); 56 var getHeight = obj.offsetTop; 57 58 window.onscroll = function(){ 59 changePos(id,getHeight); 60 } 61 } 62 function changePos(id,height){ 63 var obj = document.getElementById(id); 64 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 65 // 如果滚动的高度小于id控制的元素距离上端的高度 66 if(scrollTop < height){ 67 obj.style.position = 'relative'; 68 } 69 // 如果滚动的高度大于等于id控制的元素距离上端的高度 70 else{ 71 obj.style.position = 'fixed'; 72 } 73 } 74 75 window.onload = function(){ 76 menuFixed('nav'); 77 } 78 79 </script> 80 81 82 </body> 83 </html>
实例：滚动菜单
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>滚动菜单</title> 7 <style> 8 9 </style> 10 </head> 11 <body> 12 13 <div class="container"> 14 <div id="nav"> 15 <p class="notice"> 16 <ul> 17 <li><a href="">首页</a></li> 18 <li><a href="">公告</a></li> 19 <li><a href="">新闻</a></li> 20 <li><a href="">登录</a></li> 21 </ul> 22 </p> 23 </div> 24 </div> 25 26 27 <script> 28 // 滚动菜单入门版: 29 text = new Array(8); 30 text[0]= '首页'; 31 text[1]= '产品天地'; 32 text[2]= '关于我们'; 33 text[3]= '咨询动态'; 34 text[4]= '服务支持'; 35 text[5]= '会员中心'; 36 text[6]= '网上商城'; 37 text[7]= '官方微博'; 38 text[8]= '企业文化'; // scrollamount -> 滚动速度 默认为6，一般为2、3 当低于1时不起效果 39 document.write("<marquee scrollamount='3' scrolldelay='100' direction='up' width='150' height='150'>"); /*scrolldelay滚动演示 */ /*direction='down'则为向下滚动*/ 40 for(var i=0; i<text.length; i++){ 41 document.write(" <a href=''>"); 42 document.write(text[i]+"</a><br>"); 43 } 44 document.write("</marquee>") 45 46 47 </script> 48 49 </body> 50 </html>
(6)提交表单
1 document.geElementById('form').submit()
(7)其他操作
1 console.log 输出框 2 alert 弹出框 3 confirm 确认框 4 5 // URL和刷新 6 location.href 获取URL 7 location.href = "url" 重定向 8 location.reload() 重新加载 9 10 // 定时器 11 setInterval 多次定时器 12 clearInterval 清除多次定时器 13 setTimeout 单次定时器 14 clearTimeout 清除单次定时器
三、事件
1.什么是事件
事件是用来处理响应的一个机制，这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器
下面的链接描述了所有事件：https://developer.mozilla.org/en-US/docs/Web/Events
用户可以在浏览器上点标签，然后标签会触发一个事件，事件需要有函数来处理，事件与函数之间要进行事件绑定，所谓事件绑定就是给事件指定处理函数
2.常用事件
1 onclick 当用户点击某个对象时调用的事件句柄。 2 ondblclick 当用户双击某个对象时调用的事件句柄。 3 4 onfocus 元素获得焦点。 // 练习：输入框 5 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. 6 onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） 7 8 onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. 9 onkeypress 某个键盘按键被按下并松开。 10 onkeyup 某个键盘按键被松开。 11 onload 一张页面或一幅图像完成加载。 12 onmousedown 鼠标按钮被按下。 13 onmousemove 鼠标被移动。 14 onmouseout 鼠标从某元素移开。 15 onmouseover 鼠标移到某元素之上。 16 17 onselect 在文本框中的文本被选中时发生。 18 onsubmit 确认按钮被点击，使用的对象是form。
3.事件绑定的3种方法
(1)事件绑定
事件绑定：要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称
事件绑定有3种方法，详细看后面
(2)设置HTML标签的事件属性为事件处理函数(在DOM中直接绑定)
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是实参，表示触发事件的当前元素(即触发事件的当前标签)。
函数定义过程中的ths为形参。
(3)设置事件目标的事件属性为事件处理函数(在js代码中直接绑定)
1 <div id="d2">点我</div>
2 <script>
3 var divEle2 = document.getElementById("d2");
4 divEle2.onclick=function () {
5 this.innerText="哈哈哈";
6 }
7 </script>
(4)addEventListener方法(使用事件监听绑定事件)
addEventListener：
1 element.addEventListener(event, function, useCapture)
2 event : （必需）事件名，支持所有 DOM事件 注：事件名要去掉开头的on
3 function：（必需）指定要事件触发时执行的函数
4 useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false
事件监听绑定事件：
1 <input type="button" value="click me" id="btn1">
2
3 <script>
4 document.getElementById("btn1").addEventListener("click",hello);
5 function hello(){
6 alert("hello world!");
7 }
8 </script>
4.事件对象event
(1)什么是事件对象
事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，当然一般省略event，如果要使用event就要写上
(2)事件对象的属性
5.事件实例
(1)搜索框
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>输入框提示输入信息</title> 7 <style> 8 input{ 9 height: 50px; 10 width: 300px; 11 } 12 </style> 13 </head> 14 <body> 15 16 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="具体实现原理请看源代码中的js代码" style="color: gray;"/> 17 18 <script> 19 // 实现的效果类似于HTML5中的placeholder属性 20 // 聚焦 21 function Focus(ths) { 22 ths.style.color = "black"; 23 if (ths.value == '具体实现原理请看源代码中的js代码' || ths.value.trim() == "") { 24 25 ths.value = ""; 26 } 27 } 28 29 // 失焦 30 function Blur(ths) { 31 if (ths.value.trim() == "") { 32 ths.value = '具体实现原理请看源代码中的js代码'; 33 ths.style.color = 'gray'; 34 } else { 35 ths.style.color = "black"; 36 } 37 } 38 39 </script> 40 41 </body> 42 </html>
(2)跑马灯
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset='utf-8'> 6 <link rel="stylesheet" href="../source/css/common.css"> 7 <title>跑马灯</title> 8 <style> 9 #welcome{ 10 margin-top: 50px; 11 width: 300px; 12 } 13 </style> 14 </head> 15 16 <body> 17 18 <div class="container"> 19 <div id="welcome"> 20 欢迎各位领导莅临指导! 21 </div> 22 </div> 23 24 <script> 25 function Go(){ 26 var item = document.getElementById("welcome"); 27 var content = item.innerText; 28 var firstChar = content.charAt(0); 29 var sub = content.substring(1,content.length); 30 item.innerText = sub + firstChar; 31 } 32 33 // 每隔1秒执行Go函数 34 setInterval('Go()',1000); 35 </script> 36 37 </body> 38 </html>
(3)定时器
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>定时器实例</title> 7 <style> 8 .container{ 9 width: 60%; 10 margin: 0 auto; 11 } 12 </style> 13 </head> 14 <body> 15 16 <div class="container"> 17 <h1>定时器实例</h1> 18 <input id="i1" type="text"> 19 <input id="start" type="button" value="开始"> 20 <input id="stop" type="button" value="停止"> 21 </div> 22 23 <script> 24 25 // 声明一个全局的t,保存定时器的ID 26 var t; 27 28 // 在input框里显示当前时间 29 // 1. 获取当前时间 30 function foo() { 31 var now = new Date(); 32 var nowStr = now.toLocaleString(); 33 // 2. 把时间字符串填到input框里 34 var i1Ele = document.getElementById("i1"); 35 i1Ele.value = nowStr; 36 } 37 38 39 // 点开始让时间动起来 40 // 找到开始按钮,给它绑定事件 41 var startButton = document.getElementById("start"); 42 startButton.onclick=function () { 43 foo(); 44 // 每隔一秒钟执行foo 45 if (t===undefined){ 46 t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t 47 } 48 }; 49 50 51 // 点停止 52 // 找到停止按钮,给它绑定事件 53 var stopButton = document.getElementById("stop"); 54 stopButton.onclick=function () { 55 // 清除之前设置的定时器 56 clearInterval(t); // 清除t对应的那个定时器,t的值还在 57 console.log(t); 58 t = undefined; 59 } 60 61 </script> 62 </body> 63 </html>
(4)select联动
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>select联动示例</title> 7 </head> 8 <body> 9 10 <select id="s1"> 11 <option value="0">--请选择--</option> 12 <option value="1">北京</option> 13 <option value="2">上海</option> 14 <option value="3">武汉</option> 15 </select> 16 17 <select id="s2"></select> 18 19 <script> 20 21 var data = { 22 1: ["昌平区", "朝阳区", "海淀区"], 23 2: ["静安区", "闵行区", "浦东区"], 24 3: ["武昌区", "洪山区", "江夏区"], 25 }; 26 // 给第一个select绑定事件,绑定的是onchange事件 27 var s1Ele = document.getElementById("s1"); 28 s1Ele.onchange = function () { 29 // 取到你选的是哪一个市 30 console.log(this.value); 31 // 把对应市的区填到第二个select框里面 32 var areas = data[this.value]; // 取到市对应的区 33 // 找到s2 34 var s2Ele = document.getElementById("s2"); 35 // 清空之前的 36 s2Ele.innerHTML=""; 37 // 生成option标签 38 for (var i = 0; i < areas.length; i++) { 39 var opEle = document.createElement("option"); 40 opEle.innerText = areas[i]; 41 // 添加到select内部 42 s2Ele.appendChild(opEle); 43 } 44 } 45 </script> 46 </body> 47 </html>
(5)导航栏+开关灯
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>导航栏+开关灯</title> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 li{ 13 list-style: none; 14 } 15 a{ 16 text-decoration: none; 17 } 18 .active { 19 background: red; 20 } 21 .header{ 22 background: #8bd27f; 23 color: #000; 24 font-size: 15px; 25 z-index: 50; 26 } 27 .container{ 28 width: 60%; 29 margin: 0 auto; 30 } 31 .header .content ul li{ 32 display: inline-block; 33 } 34 .header .content ul a{ 35 display: inline-block; 36 padding: 8px 15px; 37 } 38 39 40 .mask { 41 position: fixed; 42 top: 30px; 43 left: 0; 44 z-index: 10; 45 width: 100%; 46 height: 100%; 47 background: black; 48 opacity: 0.0; 49 } 50 .mask-active { 51 opacity: 0.7; 52 } 53 .player { 54 position: relative; 55 top: 199px; 56 left: 300px; 57 background: white; 58 z-index: 20; 59 } 60 61 </style> 62 </head> 63 <body> 64 65 <header> 66 <div class="header"> 67 <div class="container"> 68 <div class="content"> 69 <ul> 70 <li class="link active"><a href="">首页</a></li> 71 <li class="link"><a href="">课程</a></li> 72 <li class="link"><a href="">论坛</a></li> 73 <li class="link" id="login"><a href="">登录</a></li> 74 <li class="link" id="register"><a href="">注册</a></li> 75 <li class="link" id="id-button-light"><a href="">开关灯</a></li> 76 </ul> 77 </div> 78 </div> 79 </div> 80 </header> 81 82 <!-- 开关灯示例: --> 83 <div class="mask"> 84 85 </div> 86 <div class="player"> 87 播放器 88 </div> 89 90 91 92 <!-- JavaScript代码: --> 93 <script> 94 // 自定义 log 函数 95 var log = function() { 96 console.log.apply(console, arguments) 97 }; 98 99 log('代码开始'); 100 101 102 // 当鼠标移到导航区的每个链接时那块区域变红: 103 // 清除active类 104 var clearActive = function() { 105 var active = document.querySelector('.active'); 106 if (active != null) { 107 // 删除active类 108 active.classList.remove("active"); 109 } 110 }; 111 112 // 选择多个元素使用函数 querySelectorAll 113 var areas = document.querySelectorAll('.link'); 114 // 循环遍历每个元素, 并且绑定点击事件 115 for (var i = 0; i < areas.length; i++) { 116 var area = areas[i]; 117 area.addEventListener('mouseover', function(event){ 118 // event 参数: 浏览器会给事件响应函数传递一个参数, 它代表了事件本身 119 // 可用 event.target 取出响应事件的元素 120 var self = event.target; 121 // 删除其他元素的 active class 122 clearActive(); 123 // 给响应事件的元素添加active类 124 self.classList.add('active') 125 }) 126 } 127 128 129 // 开关灯实例: 130 // todo - 这里有bug 必须在console中调用函数klgr才会实现真正的开关灯功能 131 // 先获得对象 132 var light = document.querySelector('#id-button-light'); 133 134 // 声明一个函数用于在按钮点击后执行 135 var klgr = function() { 136 log('开关灯'); 137 var mask = document.querySelector('.mask'); 138 mask.classList.toggle('mask-active') 139 }; 140 141 // 添加事件 142 light.addEventListener('click', klgr); 143 144 </script> 145 146 </body> 147 </html>
(6)轮播图
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>轮播图</title> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 /* 链接效果 */ 13 .tip{ 14 display: inline-block; 15 background: lightblue; 16 color: red; 17 margin-left: 30px; 18 } 19 .hide{ 20 display: none; 21 } 22 23 /* 轮播图的样式: */ 24 .slider{ 25 width: 170px; 26 height: 166px; 27 margin: 15px 0; 28 background: lightyellow; 29 position: relative; 30 } 31 .slider img{ 32 width: 80%; 33 height: 80%; 34 } 35 .slider-img{ 36 display: none; 37 } 38 .slider-active{ 39 display: inline-block; 40 } 41 #button-next{ 42 position: absolute; 43 top: 0; 44 right: 0; 45 width: 20%; 46 height: 100%; 47 background: transparent; 48 border: none; 49 } 50 #button-next span{ 51 display: block; 52 width: 100%; 53 padding: 6px 0; 54 background: rgba(0, 0, 0, 0.5); 55 } 56 #button-next:focus{ 57 /* 去掉外框 */ 58 border: none; 59 outline: none; 60 } 61 </style> 62 63 </head> 64 <body> 65 66 <div> 67 <a href="" id="id-a-click">别点</a> 68 <span class="tip hide"> 69 没事别点， 危险！ 70 </span> 71 </div> 72 73 <div class="slider"> 74 <!-- 3张图片 --> 75 <img class="slider-img slider-active" src="../source/img/1.gif" alt="1"> 76 <img class="slider-img" src="../source/img/2.jpg" alt="2"> 77 <img class="slider-img" src="../source/img/3.jpg" alt="3"> 78 <!-- next按钮 --> 79 <button id="button-next"> 80 <!-- >符号代表next --> 81 <span><strong>></strong></span> 82 </button> 83 </div> 84 85 86 <script> 87 // 当鼠标放到链接上的提示信息效果: 88 var a = document.getElementById("id-a-click"); 89 a.addEventListener('mouseover', function () { 90 var tip = document.querySelector(".hide"); 91 tip.classList.remove("hide"); 92 }); 93 a.addEventListener('mouseleave', function () { 94 var tip = document.querySelector(".tip"); 95 tip.classList.add("hide"); 96 }); 97 98 99 // 轮播图: 100 var currentIndex = 0; 101 var numberOfImages = 3; 102 // 实现当前图片变成下一页图片效果: 103 var next = function () { 104 currentIndex = (currentIndex + 1) % numberOfImages; 105 var slider = document.querySelector("slider"); 106 // 把当前图片的slider-active去掉: 107 var img = document.querySelector(".slider-active"); 108 img.classList.remove("slider-active"); 109 // 为下一页的图片加上slider-active 110 var active = document.querySelectorAll(".slider-img")[currentIndex]; 111 active.classList.add("slider-active"); 112 }; 113 114 // 为next按钮绑定事件实现点击next按钮图片切换: 115 buttonNext = document.getElementById("button-next"); 116 buttonNext.addEventListener('click', next); 117 118 // 用定时器实现定时切换(3s换一张): 119 setInterval(next, 3000); 120 121 </script> 122 123 </body> 124 </html>
too young too simple sometimes native!
