BOM及DOM及事件
知识内容：
1.BOM介绍
2.DOM操作
3.事件
参考：http://www.cnblogs.com/liwenzhou/p/8011504.html
入门代码(DOM基本操作与事件)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web 9</title>
</head>
<body>
<!-- 注意, 每个标签都有 class 和 id 这两个属性 -->
<!-- class 可以重复, id 不能重复 -->
<div class="login-form">
<input id="id-input-username" type="text" value="gua">
<br>
<input id="id-input-password" type="password" value="123">
<br>
<button id="id-button-login">登录按钮</button>
</div>
<script> // 定义log
var log = function() {
console.log.apply(this, arguments)
} /*
往下是使用 js 操作页面元素的方法
=====
DOM(文档对象模型) 是浏览器对 html 文件的描述方式
DOM API 是浏览器提供给 JavaScript 操作 html 页面内元素的方式
简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查)
*/ // 查找元素
// ===
//
// 查找元素可以使用 document.querySelector() 函数 这个函数是最基础、最原始的查找方法
// document 是整个文档(包含了 html), 可以理解为 html 的父节点
// querySelector函数的参数是一个选择器(和 CSS 选择器一样)
// 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器
// 元素选择器
var body = document.querySelector('body')
// class 选择器, 用的是 .类名
var form = document.querySelector('.login-form')
// id 选择器, 用的是 #id
var loginButton = document.querySelector('#id-button-login')
// log 出来看看
log(body, form, loginButton) // 操作元素的默认属性
// ===
//
// 获得特定属性值
var user = document.querySelector('#id-input-username')
var userValue = user.value
log('user value', userValue)
// 不存在的属性会返回 undefined, 它在 js 中代表不存在
// null 和 undefined 很相似
log('没有的属性:', user.gua) // 设置特定属性值
user.value = 'set value' // 操作元素(创建, 删除, 修改)
// ===
//
// 修改
// 用 insertAdjacentHTML 给一个元素添加子元素
// 这里我们给 .login-form 添加一个 h1 标签
var form = document.querySelector('.login-form')
// 第一个参数表示插入的位置, 'beforeend' 表示插入在结束之前(也就是添加到标签末尾)
// 第二个参数是你想插入的 html 内容
form.insertAdjacentHTML('beforeend', '<h1 class="msg">你好</h1>') // 删除元素
var pwd = document.querySelector('#id-input-password')
pwd.remove() // 修改元素
var msg = document.querySelector('.msg')
msg.innerHTML = '修改后的元素' // 事件
// ===
//
// 事件是用来处理响应的一个机制
// 这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器
//
// 下面的链接描述了所有事件, 不过我们先从最常用的事件学起, click 事件
// https://developer.mozilla.org/en-US/docs/Web/Events
//
// 常用例子, 给按钮添加一个点击的事件
// 1, 获得按钮
var loginButton = document.querySelector('#id-button-login')
// 2, 声明一个函数, 用于在按钮点击后执行
var clicked = function() {
log('按钮被点击到了')
}
// 3, 添加事件, 使用 addEventListener 函数, 它有两个参数
// 第一个是事件的名字, 'click' 表示点击
// 第二个是事件发生后会被自动调用的函数
loginButton.addEventListener('click', clicked)
//
// 添加完成, 可以自己在浏览器试试, 记得打开 console </script>
</body>
</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)直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
(2)间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
(3)使用querySelector查找
// document.querySelector() 函数 这个函数是最基础、最原始的查找方法
// querySelector函数的参数是一个选择器(和 CSS 选择器一样)
// 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器
// 元素选择器
var body = document.querySelector('body')
// class 选择器, 用的是 .类名
var form = document.querySelector('.login-form')
// id 选择器, 用的是 #id
9 var loginButton = document.querySelector('#id-button-login')
3.DOM常用基本操作
(1)内容以及属性
// 内容操作:
innerText 文本
innerHTML HTML内容
value 值 // 属性操作:
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性 /*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
实例：全选反选取消
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../source/css/common.css">
<title>全选反选取消</title>
<style>
/*显示列表的样式list*/
#list{
border: dashed 1px indianred;
display: inline-block;
margin-top: 30px;
padding: 30px 30px;
}
</style>
</head>
<body> <div class="container">
<h1>全选反选取消</h1>
<h3>具体实现原理看本网页源代码中的js代码</h3> <div id="list">
<input type="button" value="全选" id="b1">
<input type="button" value="反选" id="b2">
<input type="button" value="取消" id="b3">
<table>
<thead>
<tr>
<th>请选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>90</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div> </div> <script>
// 实现全选:
var choseAll = function () {
var items = document.getElementById("tb").children;
for(var i=0; i<items.length; i++){
item = items[i].children[0].children[0];
item.checked = true
}
};
b1 = document.getElementById("b1");
b1.addEventListener("click", choseAll); // 实现反选:
var reverseChose = function () {
var items = document.getElementById("tb").children;
for(var i=0; i<items.length; i++){
item = items[i].children[0].children[0];
/*
if(item.checked === true){
item.checked = false
}
else {
item.checked = true
}
*/
// 上面的if-else结构简化成下面的结构:
item.checked = !item.checked
}
};
b2 = document.getElementById("b2");
b2.addEventListener("click", reverseChose); // 实现取消:
var cancel = function () {
var items = document.getElementById("tb").children;
for(var i=0; i<items.length; i++) {
item = items[i].children[0].children[0];
if (item.checked === true) {
item.checked = false
}
}
};
b3 = document.getElementById("b3");
b3.addEventListener("click", cancel); </script> </body>
</html>
(2)class操作及属性操作
class操作：
className // 获取所有类名(字符串)
classList // 获取所有类名(列表)
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
classList.contains(cls) // 存在就返回true 否则返回false
classList.toggle(cls) // 存在就删除 否则就添加
属性操作：
// 获得特定属性值:
xxx.getAttribute('value') // 不存在的属性会返回 null, 它在 js 中代表不存在
xxx.getAttribute('不存在') -> null // 设置特定属性值:
xxx.setAttribute('value', '新用户名') // 查询属性是否存在:
xxx.hasAttributes() // 查看元素是否有属性
xxx.hasAttribute('value') // 查看元素是否有特定属性 // 删除某个属性:
xxx.removeAttribute('type') // 获得所有属性:
xxx.attributes
dataset：
<div id="myDiv" data-id="123"></div> // 获取属性
var div = document.querySelector("#myDiv");
var val = div.dataset.id; // 属性赋值
div.dataset.id=666;
(3)标签操作
创建标签：
// 方式一
var tag = document.createElement('a')
tag.innerText = "wyb"
tag.className = "sss"
tag.href = "http://www.cnblogs.com/wyb666" // 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wyb666'>wyb的个人博客</a>"
操作标签：
// 添加:
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二 appendChild -> 追加一个子节点（作为最后的子节点） insertBefore(newnode, 某个节点) -> 把增加的节点放到某个节点前边
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1]) // 删除:
var obj = document.getElementById("i1")
obj.remove()
(4)样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
注：CSS样式中含有横线的CSS属性在这里都换成了驼峰表示法，例如font-size -> fontSize，background-color -> backgroundColor，而没有含横线的CSS属性一般直接使用CSS属性名即可
实例：输入框的输入提示信息
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框提示输入信息</title>
</head>
<body> <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;"/> <script> // 聚焦
function Focus(ths) {
ths.style.color = "black";
if (ths.value == '请输入关键字' || ths.value.trim() == "") { ths.value = "";
}
} // 失焦
function Blur(ths) {
if (ths.value.trim() == "") {
ths.value = '请输入关键字';
ths.style.color = 'gray';
} else {
ths.style.color = "black";
}
} </script> </body>
</html>
(5)位置操作
总文档高度
document.documentElement.offsetHeight 当前文档占屏幕高度
document.documentElement.clientHeight 自身高度
tag.offsetHeight 距离上级定位高度
tag.offsetTop 父定位标签
tag.offsetParent 滚动高度
tag.scrollTop /*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
实例：滚动固定
<!-- author: wyb -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>滚动至顶部后固定</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 960px;
height: 3000px;
margin: 0 auto;
}
.header{
height: 150px;
line-height: 150px;
}
#nav{
padding:10px;
position: relative;
top: 0;
background: #125430;
width: 960px;
}
a{
display:inline-block;
margin: 0 10px;
*display: inline;
zoom: 1;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="nav">
<a href="" target="_blank">python</a>
<a href="" target="_blank">Javascript</a>
<a href="" target="_blank">jQuery</a>
<a href="" target="_blank">vue</a>
<a href="" target="_blank">首页</a>
<a href="" target="_blank">博客</a>
<a href="" target="_blank">github</a>
<a href="" target="_blank">其他</a>
</div>
</div> <script> function menuFixed(id){
var obj = document.getElementById(id);
var getHeight = obj.offsetTop; window.onscroll = function(){
changePos(id,getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滚动的高度小于id控制的元素距离上端的高度
if(scrollTop < height){
obj.style.position = 'relative';
}
// 如果滚动的高度大于等于id控制的元素距离上端的高度
else{
obj.style.position = 'fixed';
}
} window.onload = function(){
menuFixed('nav');
} </script> </body>
</html>
实例：滚动菜单
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动菜单</title>
<style> </style>
</head>
<body> <div class="container">
<div id="nav">
<p class="notice">
<ul>
<li><a href="">首页</a></li>
<li><a href="">公告</a></li>
<li><a href="">新闻</a></li>
<li><a href="">登录</a></li>
</ul>
</p>
</div>
</div> <script>
// 滚动菜单入门版:
text = new Array(8);
text[0]= '首页';
text[1]= '产品天地';
text[2]= '关于我们';
text[3]= '咨询动态';
text[4]= '服务支持';
text[5]= '会员中心';
text[6]= '网上商城';
text[7]= '官方微博';
text[8]= '企业文化'; // scrollamount -> 滚动速度 默认为6，一般为2、3 当低于1时不起效果
document.write("<marquee scrollamount='3' scrolldelay='100' direction='up' width='150' height='150'>"); /*scrolldelay滚动演示 */ /*direction='down'则为向下滚动*/
for(var i=0; i<text.length; i++){
document.write(" <a href=''>");
document.write(text[i]+"</a><br>");
}
document.write("</marquee>") </script> </body>
</html>
(6)提交表单
document.geElementById('form').submit()
(7)其他操作
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
三、事件
1.什么是事件
事件是用来处理响应的一个机制，这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器
下面的链接描述了所有事件：https://developer.mozilla.org/en-US/docs/Web/Events
用户可以在浏览器上点标签，然后标签会触发一个事件，事件需要有函数来处理，事件与函数之间要进行事件绑定，所谓事件绑定就是给事件指定处理函数
2.常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。
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)搜索框
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框提示输入信息</title>
<style>
input{
height: 50px;
width: 300px;
}
</style>
</head>
<body> <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="具体实现原理请看源代码中的js代码" style="color: gray;"/> <script>
// 实现的效果类似于HTML5中的placeholder属性
// 聚焦
function Focus(ths) {
ths.style.color = "black";
if (ths.value == '具体实现原理请看源代码中的js代码' || ths.value.trim() == "") { ths.value = "";
}
} // 失焦
function Blur(ths) {
if (ths.value.trim() == "") {
ths.value = '具体实现原理请看源代码中的js代码';
ths.style.color = 'gray';
} else {
ths.style.color = "black";
}
} </script> </body>
</html>
(2)跑马灯
<!-- author: wyb -->
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="../source/css/common.css">
<title>跑马灯</title>
<style>
#welcome{
margin-top: 50px;
width: 300px;
}
</style>
</head> <body> <div class="container">
<div id="welcome">
欢迎各位领导莅临指导!
</div>
</div> <script>
function Go(){
var item = document.getElementById("welcome");
var content = item.innerText;
var firstChar = content.charAt(0);
var sub = content.substring(1,content.length);
item.innerText = sub + firstChar;
} // 每隔1秒执行Go函数
setInterval('Go()',1000);
</script> </body>
</html>
(3)定时器
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定时器实例</title>
<style>
.container{
width: 60%;
margin: 0 auto;
}
</style>
</head>
<body> <div class="container">
<h1>定时器实例</h1>
<input id="i1" type="text">
<input id="start" type="button" value="开始">
<input id="stop" type="button" value="停止">
</div> <script> // 声明一个全局的t,保存定时器的ID
var t; // 在input框里显示当前时间
// 1. 获取当前时间
function foo() {
var now = new Date();
var nowStr = now.toLocaleString();
// 2. 把时间字符串填到input框里
var i1Ele = document.getElementById("i1");
i1Ele.value = nowStr;
} // 点开始让时间动起来
// 找到开始按钮,给它绑定事件
var startButton = document.getElementById("start");
startButton.onclick=function () {
foo();
// 每隔一秒钟执行foo
if (t===undefined){
t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t
}
}; // 点停止
// 找到停止按钮,给它绑定事件
var stopButton = document.getElementById("stop");
stopButton.onclick=function () {
// 清除之前设置的定时器
clearInterval(t); // 清除t对应的那个定时器,t的值还在
console.log(t);
t = undefined;
} </script>
</body>
</html>
(4)select联动
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>select联动示例</title>
</head>
<body> <select id="s1">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">武汉</option>
</select> <select id="s2"></select> <script> var data = {
1: ["昌平区", "朝阳区", "海淀区"],
2: ["静安区", "闵行区", "浦东区"],
3: ["武昌区", "洪山区", "江夏区"],
};
// 给第一个select绑定事件,绑定的是onchange事件
var s1Ele = document.getElementById("s1");
s1Ele.onchange = function () {
// 取到你选的是哪一个市
console.log(this.value);
// 把对应市的区填到第二个select框里面
var areas = data[this.value]; // 取到市对应的区
// 找到s2
var s2Ele = document.getElementById("s2");
// 清空之前的
s2Ele.innerHTML="";
// 生成option标签
for (var i = 0; i < areas.length; i++) {
var opEle = document.createElement("option");
opEle.innerText = areas[i];
// 添加到select内部
s2Ele.appendChild(opEle);
}
}
</script>
</body>
</html>
(5)导航栏+开关灯
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏+开关灯</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.active {
background: red;
}
.header{
background: #8bd27f;
color: #000;
font-size: 15px;
z-index: 50;
}
.container{
width: 60%;
margin: 0 auto;
}
.header .content ul li{
display: inline-block;
}
.header .content ul a{
display: inline-block;
padding: 8px 15px;
} .mask {
position: fixed;
top: 30px;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: black;
opacity: 0.0;
}
.mask-active {
opacity: 0.7;
}
.player {
position: relative;
top: 199px;
left: 300px;
background: white;
z-index: 20;
} </style>
</head>
<body> <header>
<div class="header">
<div class="container">
<div class="content">
<ul>
<li class="link active"><a href="">首页</a></li>
<li class="link"><a href="">课程</a></li>
<li class="link"><a href="">论坛</a></li>
<li class="link" id="login"><a href="">登录</a></li>
<li class="link" id="register"><a href="">注册</a></li>
<li class="link" id="id-button-light"><a href="">开关灯</a></li>
</ul>
</div>
</div>
</div>
</header> <!-- 开关灯示例: -->
<div class="mask"> </div>
<div class="player">
播放器
</div> <!-- JavaScript代码: -->
<script>
// 自定义 log 函数
var log = function() {
console.log.apply(console, arguments)
}; log('代码开始'); // 当鼠标移到导航区的每个链接时那块区域变红:
// 清除active类
var clearActive = function() {
var active = document.querySelector('.active');
if (active != null) {
// 删除active类
active.classList.remove("active");
}
}; // 选择多个元素使用函数 querySelectorAll
var areas = document.querySelectorAll('.link');
// 循环遍历每个元素, 并且绑定点击事件
for (var i = 0; i < areas.length; i++) {
var area = areas[i];
area.addEventListener('mouseover', function(event){
// event 参数: 浏览器会给事件响应函数传递一个参数, 它代表了事件本身
// 可用 event.target 取出响应事件的元素
var self = event.target;
// 删除其他元素的 active class
clearActive();
// 给响应事件的元素添加active类
self.classList.add('active')
})
} // 开关灯实例:
// todo - 这里有bug 必须在console中调用函数klgr才会实现真正的开关灯功能
// 先获得对象
var light = document.querySelector('#id-button-light'); // 声明一个函数用于在按钮点击后执行
var klgr = function() {
log('开关灯');
var mask = document.querySelector('.mask');
mask.classList.toggle('mask-active')
}; // 添加事件
light.addEventListener('click', klgr); </script> </body>
</html>
有bug
(6)轮播图
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 链接效果 */
.tip{
display: inline-block;
background: lightblue;
color: red;
margin-left: 30px;
}
.hide{
display: none;
} /* 轮播图的样式: */
.slider{
width: 170px;
height: 166px;
margin: 15px 0;
background: lightyellow;
position: relative;
}
.slider img{
width: 80%;
height: 80%;
}
.slider-img{
display: none;
}
.slider-active{
display: inline-block;
}
#button-next{
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
background: transparent;
border: none;
}
#button-next span{
display: block;
width: 100%;
padding: 6px 0;
background: rgba(0, 0, 0, 0.5);
}
#button-next:focus{
/* 去掉外框 */
border: none;
outline: none;
}
</style> </head>
<body> <div>
<a href="" id="id-a-click">别点</a>
<span class="tip hide">
没事别点， 危险！
</span>
</div> <div class="slider">
<!-- 3张图片 -->
<img class="slider-img slider-active" src="../source/img/1.gif" alt="1">
<img class="slider-img" src="../source/img/2.jpg" alt="2">
<img class="slider-img" src="../source/img/3.jpg" alt="3">
<!-- next按钮 -->
<button id="button-next">
<!-- >符号代表next -->
<span><strong>></strong></span>
</button>
</div> <script>
// 当鼠标放到链接上的提示信息效果:
var a = document.getElementById("id-a-click");
a.addEventListener('mouseover', function () {
var tip = document.querySelector(".hide");
tip.classList.remove("hide");
});
a.addEventListener('mouseleave', function () {
var tip = document.querySelector(".tip");
tip.classList.add("hide");
}); // 轮播图:
var currentIndex = 0;
var numberOfImages = 3;
// 实现当前图片变成下一页图片效果:
var next = function () {
currentIndex = (currentIndex + 1) % numberOfImages;
var slider = document.querySelector("slider");
// 把当前图片的slider-active去掉:
var img = document.querySelector(".slider-active");
img.classList.remove("slider-active");
// 为下一页的图片加上slider-active
var active = document.querySelectorAll(".slider-img")[currentIndex];
active.classList.add("slider-active");
}; // 为next按钮绑定事件实现点击next按钮图片切换:
buttonNext = document.getElementById("button-next");
buttonNext.addEventListener('click', next); // 用定时器实现定时切换(3s换一张):
setInterval(next, 3000); </script> </body>
</html>
BOM及DOM及事件的更多相关文章
- js中的BOM和DOM常用事件方法
笔记: window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- 实现JavaScript的组成----BOM和DOM
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...
- BOM和DOM详解
DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...
- Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- javascript的BOM，DOM对象
BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
随机推荐
- S3TC IAP15F2K61S2点亮一个发光二极管keil和stc-isp软件操作
1.安装破解软件 2.打开STC-ISP,找到头文件,选择保存文件 3.找到keil的安装目录,keil/C51/INC 并保存 4.在桌面新建文件夹 5.打开keil 6.找到在桌面上新建的文件夹 ...
- mkbootimg hacking
/********************************************************************** * mkbootimg hacking * 声明: * ...
- openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
- jsp之response方法
response简介 response对象:对客户端的请求作出回应,将Web服务器处理后的结果发回客户端. response对象:属于javax.servlet.HttpServletResponse ...
- VSCode搭建node + typescript开发环境
我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...
- c++hook全局触控事件
https://gist.github.com/vbfox/1339671 namespace BlackFox { using System; using System.ComponentModel ...
- lets encrypt 申请nginx 泛域名
1. 安装certbot工具 wget https://dl.eff.org/certbot-auto chmod a+x ./certbot-auto 2. 申请通配符域名 ./certbot-au ...
- 用vmware安装gho文件心得
在卡饭学到了不少知识,下面是我的一个心得分享,希望大家能用的上. 用vmware安装gho文件心得 方法1:diskgenius+ghostexp用vm新建一个空白硬盘虚拟机, 记住虚拟机文件的存储位 ...
- docker 知识点
docker 教程:http://www.runoob.com/docker/docker-tutorial.html docker 仓库地址:https://store.docker.com/ do ...
- php preg_replace空格无法替换问题
一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...