JavaScript分为三个部分:
- ECMAScript标准:js的基本语法
- DOM: Document Object Model ---->文档对象模型 ---->操作页面的元素 ---->最大的是document
- BOM: Browser Object Model ---->浏览器对象模型 ---->操作的是浏览器 ---->最大的是window
这篇主要是DOM和BOM中一些本人觉得会在实际开发中用到的例子和这些例子引出的一些兼容问题<持续更新...>
DOM:文档对象模型
1.什么是文档？
我们可以把一个html看成是一个文档，由于万物皆对象！所有我们也可以把
这个文档看成一个对象，文档中所有的元素都可以看成是一个对象。
在文档及文档中的所有元素(标签)组成的一个树形结构图，叫树状图(DOM树)。
<xml文件也可以看成是一个文档！>
2.什么是html？什么是xml？(简要分析)
html：展示信息，展示数据。
xml：侧重于存储数据。
emmm废话不说了 以下都是本人觉得常用的一些DOM操作的图例及代码与注释😶(由于简书布局原因本人将js，css，html会写在一个文件中，顺序不分功能的强与弱，想到什么写什么)
- 排他功能 (用于tab切换，二级菜单)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
body, ul, div {
padding: 0;
margin: 0;
}
/*清除浮动*/
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
clear: both;
overflow: hidden;
visibility: hidden;
height: 0;
display: block;
}
#nav {
list-style-type: none;
}
#nav > li {
width: 55px;
height: 25px;
background-color: slateblue;
float: left;
margin: 10px 0 0 10px;
line-height: 25px;
text-align: center;
cursor: pointer;
color: #fff;
box-shadow: 1px 2px 6px #000042;
-o-box-shadow: 1px 2px 6px #000042;
-moz-box-shadow: 1px 2px 6px #000042;
-webkit-box-shadow: 1px 2px 6px #000042;
transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
#nav-main {
margin-left: 10px;
}
#nav-main > div {
width: 186px;
height: 145px;
border: 1px solid #ccc;
text-align: center;
line-height: 145px;
box-sizing: border-box;
margin-top: 5px;
box-shadow: 2px 2px 2px darkgoldenrod;
-moz-box-shadow: 2px 2px 2px darkgoldenrod;
-o-box-shadow: 2px 2px 2px darkgoldenrod;
-webkit-box-shadow: 2px 2px 2px darkgoldenrod;
}
#nav .pitch-on {
background-color: skyblue;
}
.block {
display: block;
}
.none {
display: none;
}
</style>
</head>
<body>
<ul id="nav" class="clearfix">
<li class="pitch-on">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="nav-main">
<div class="block">111</div>
<div class="none">222</div>
<div class="none">333</div>
</div>
<script>
//获取ul下面的所有li标签
var liObj = document.getElementById("nav").getElementsByTagName("li");
//获取id为nav-main下面的所有div标签
var divObj = document.getElementById("nav-main").getElementsByTagName("div");
//循环遍历li
for (var i = 0; i < liObj.length; i++) {
//为每个li添加自定义属性index存放索引
liObj[i].setAttribute("index", i);
//为每个li注册点击事件
liObj[i].onclick = function () {
//循环遍历
for (var z = 0; z < liObj.length; z++) {
//清除所有li的class
liObj[z].removeAttribute("class");
}
//为当前选中的li添加class
this.className = "pitch-on";
//获取当前选中li的索引
var index = this.getAttribute("index");
//循环遍历div
for (var i = 0; i < divObj.length; i++) {
//将所有div的class设置为none
divObj[i].className = "none";
//将当前li对应的div的class设置为block
divObj[index].className = "block";
}
};
}
</script>
</body>
</html>
排他1tab切换.png
排他2tab切换.png
- 全选全不选(商城购物车)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-color: royalblue;
font-size: 12px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<thead id="thead">
<tr>
<td>全选/全不选</td>
<td><input type="checkbox"></td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script>
/**
* 通过id获取元素
* @param id
* @returns {HTMLElement | null}
*/
function my$(id) {
return document.getElementById(id);
}
//获取全选全不选按钮
var oneCheckBox = my$("thead").getElementsByTagName("input")[0];
//获取tbody下所有的checkbox
var allCheckBox = my$("tbody").getElementsByTagName("input");
//给全选全部选注册点击事件
oneCheckBox.onclick = function () {
//循环遍历tbody下所有的checkbox
for (var i = 0; i < allCheckBox.length; i++) {
//判断全选按钮是否选中，选中即让所有的checkbox选中
allCheckBox[i].checked = this.checked ? true : false;
}
};
//循环遍历tbody下所有的checkbox
for (var i = 0; i < allCheckBox.length; i++) {
//为tbody下所有的checkbox注册点击事件
allCheckBox[i].onclick = function () {
//默认都被选中
var flag = true;
//循环遍历tbody下所有的checkbox
for(var z=0;z<allCheckBox.length;z++){
//判断 有一个未被选中
if (!allCheckBox[z].checked) {
//flag为false
flag = false;
//跳出循环
break;
}
}
//全选全部选的复选框的状态就是flag这个变量的值
oneCheckBox.checked = flag;
};
}
</script>
</body>
</html>
全选全不选1.png
全选全不选2.png
- 网页开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
transition: background-color 0.5s;
}
.on-off {
background-color: greenyellow;
}
</style>
</head>
<body>
<input type="button" id="btn" value="开灯/关灯">
<script>
//获取button，给button注册点击事件
document.getElementById("btn").onclick = function () {
//获取body 判断body是否有on-off样式
document.body.className = document.body.className != "on-off" ? "on-off" : "";
};
</script>
</body>
</html>
开灯:光灯1.png
开灯:关灯2.png
- 显示/隐藏(三元表达式)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
.dv {
width: 100px;
height: 100px;
background-color: palegreen;
}
.block {
display: block;
}
.none {
display: none;
}
</style>
</head>
<body>
<input type="button" value="点击显示" id="btn">
<div class="dv none"></div>
<script>
//获取当前按钮
var btnObj = document.getElementById("btn");
//获取div
var dvObj = document.getElementsByClassName("dv")[0];
//给按钮注册点击时间
btnObj.addEventListener("click", function () {
//三元表达式 判断按钮的value是否为点击显示 是则value为点击隐藏 否则value为点击显示
this.value = this.value == "点击显示" ? "点击隐藏" : "点击显示";
//三元表达式 判断div的class是否为dv none 是则class为dv block 否则class为dv none
dvObj.className = dvObj.className == "dv none" ? "dv block" : "dv none";
}, false);
</script>
</body>
</html>
显示:隐藏1.png
显示:隐藏2.png
- innerText和textContext兼容问题(该死的ie8!!!)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: darkcyan;
color: #fff;
}
</style>
</head>
<body>
<input value="设置值" id="btn" type="button">
<input value="获取值" id="btn1" type="button">
<div id="dv">1</div>
<script>
//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
//判断这个属性的类型 是不是undefined,就知道浏览器是否支持
//兼容代码
/**
* 设置任意的标签中间的任意文本内容
* @param element 元素
* @param text 文本内容
*/
function setInnerText(element, text) {
//判断浏览器是否支持这个属性
if (typeof element.textContent == "undefined") {//不支持
element.innerText = text;
} else {//支持这个属性
element.textContent = text;
}
}
//测试判断浏览器是否支持这个属性
var btn = document.getElementById("btn");
var dvObj = document.getElementById("dv");
btn.onclick = function () {
setInnerText(dvObj, "测试成功");
};
//兼容代码
/**
* 获取任意标签中间的文本内容
* @param element 元素
* @returns {*} 文本内容
*/
function getInnerText(element) {
if (typeof element.textContent == "undefined") {//不支持
return element.innerText;
} else {//支持这个属性
return element.textContent;
}
}
//测试获取任意标签中间的文本内容
var btn1 = document.getElementById("btn1");
var dvObj = document.getElementById("dv");
btn1.onclick = function () {
console.log(getInnerText(dvObj));
};
</script>
</body>
</html>
innerText和textContext1.png
innerText和textContext2.png
- 画廊效果(阻止超链接默认跳转)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>画廊</h2>
<ul id="imagegallery">
<li><a href="images/11.jpg" title="A">
<img src="images/11.jpg" width="100" alt="1"/>
</a></li>
<li><a href="images/22.jpg" title="B">
<img src="images/22.jpg" width="100" alt="2"/>
</a></li>
<li><a href="images/33.jpg" title="C">
<img src="images/33.jpg" width="100" alt="3"/>
</a></li>
<li><a href="images/44.jpg" title="D">
<img src="images/44.jpg" width="100" alt="4"/>
</a></li>
</ul>
<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script>
/**
* 通过id获取元素
* @param id
* @returns {HTMLElement | null}
*/
function my$(id) {
return document.getElementById(id);
}
//获取ul下面所有的a标签
var aObjs = my$("imagegallery").getElementsByTagName("a");
//获取显示大图的img
var bigImg = my$("image");
//获取显示图片名字的p
var nameP = my$("des");
//循环遍历ul下面的所有a标签
for (var i = 0; i < aObjs.length; i++) {
//为每个a注册点击事件
aObjs[i].onclick = function () {
//设置显示大图的img的src等于当前点击的href
bigImg.src = this.href;
//设置显示图片名字的p的内容为当前点击的title
nameP.innerHTML = this.title;
//阻止超链接默认的跳转
return false;
};
}
</script>
</body>
</html>
画廊1.png
画廊2.png
- 模拟搜索框(获取焦点/失去焦点)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
#txt {
color: #ccc;
font-size: 12px;
font-style: normal;
}
</style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt">
<script>
//获取搜索框
var search = document.getElementById("txt");
//给搜索框注册获取焦点事件
search.onfocus = function () {
//判断搜索框的value等于"请输入搜索内容"
if (this.value == "请输入搜索内容") {
//清除搜索框的value
this.value = "";
//搜索框color为黑
this.style.color = "#000";
}
};
//给搜索框注册失去焦点的事件
search.onblur = function () {
//判断搜索框的值为空并且长度为0
if (this.value == "" && this.value.length == 0) {
//搜索框的value恢复为"请输入搜索内容"
this.value = "请输入搜索内容";
//搜索框的color为灰
this.style.color = "#ccc";
}
};
</script>
</body>
</html>
模拟搜索框1.png
搜索框2.png
- 获取相关的节点(部分ie8不支持---已注释---后面列举兼容代码，由于本人是mac电脑无法截图ie8)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script>
//获取ul
var ulObj = document.getElementById("uu");
//获取id为three的li
var three = document.getElementById("three");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentNode);
//子节点
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild);//--------ie8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//--------ie8不支持
//最后一个子节点
console.log(ulObj.lastChild);//--------ie8中是最后一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild)//--------ie8不支持
//某一个元素的前一个兄弟节点
console.log(three.previousSibling);
//某一个元素的前一个兄弟元素
console.log(three.previousElementSibling);
//某一个元素的后一个兄弟节点
console.log(three.nextSibling);
//某一个元素的后一个兄弟元素
console.log(three.nextElementSibling);
//总结：
//凡是获取节点和元素的代码在谷歌和火狐得到的都是节点和元素
//从子节点和兄弟节点开始，凡是获取节点的代码在ie8中得到的是元素，获取元素的相关代码在ie8中得到的是undefined---元素的代码ie中不支持！！！
</script>
</body>
</html>
获取相关的节点.png
- 通过节点点击按钮设置p标签改变背景颜色(nodeType,nodeName,nodeValue)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 250px;
border: 1px solid seagreen;
box-shadow: 1px 1px 10px #4CAF50;
-o-box-shadow: 1px 1px 10px #4CAF50;
-moz-box-shadow: 1px 1px 10px #4CAF50;
-webkit-box-shadow: 1px 1px 10px #4CAF50;
}
</style>
</head>
<body>
<input type="button" value="设置p标签backgroundColor" id="btn"/>
<div id="dv">
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
<script>
//nodeType--->节点的类型:1---标签,2---属性,3---文本
//nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
//nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
//获取按钮
var btn = document.getElementById("btn");
//获取div
var divObj = document.getElementById("dv");
//给按钮添加点击事件
btn.onclick = function () {
//获取div里面的所有子节点
var nodes = divObj.childNodes;
//循环遍历
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是p标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
//设置p标签的背景颜色
nodes[i].style.backgroundColor = "red";
}
}
};
</script>
</body>
</html>
节点找P1.png
节点找P2.png
- 节点操作隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<input type="button" value="隔行变色" id="btn">
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
//获取按钮
var btn = document.getElementById("btn");
//获取ul
var ulObj = document.getElementById("uu");
//获取ul下面的所有子节点
var liObjs = ulObj.childNodes;
//给按钮添加点击事件
btn.onclick = function () {
//声明一个count
var count = 0;
//循环遍历
for (var i = 0; i < liObjs.length; i++) {
//判断这个子节点是不是li
if (liObjs[i].nodeName == "LI" && liObjs[i].nodeType == 1) {
//每次加一
count++;
//设置背景颜色，判断count如为偶数则为红，为奇数则为黄
liObjs[i].style.backgroundColor = count % 2 == 0 ? "red" : "yellow";
}
}
};
</script>
</body>
</html>
节点操作隔行变色1.png
节点操作隔行变色2.png
- 节点兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="uu">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script>
var ulObj = document.getElementById("uu");
//第一个节点和第一个元素的获取的代码在IE8中可能不支持
//element.firstChild--->谷歌和火狐获取的是第一个子几点
//element.firstChile--->IE8获取的是第一个子元素
//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
//前一个节点和前一个元素的获取的代码在IE8中可能不支持
//后一个节点和后一个元素的获取的代码在IE8中可能不支持
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if (element.firstElementChild) {//true--->支持
return element.firstElementChild;
} else {
var node = element.firstChild;//第一个子节点
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
//测试代码，获取父级元素中的第一个子级元素
console.log(getFirstElementChild(ulObj).innerText);
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if (element.lastElementChild) {//true--->支持
return element.lastElementChild;
} else {
var node = element.lastChild;//最后一个子节点
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
//测试代码，获取父级元素中的最后一个子级元素
console.log(getLastElementChild(ulObj).innerText);
</script>
</body>
</html>
节点兼容代码.png
- 动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
ul, div {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 100px;
height: 220px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script>
//模拟数据
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//获取按钮
var btn = document.getElementById("btn");
//获取div
var dvObj = document.getElementById("dv");
//给按钮注册点击事件
btn.onclick = function () {
//判断是否有ul标签
if (document.getElementById("uu")) {
//清除ul标签
dvObj.removeChild(document.getElementById("uu"));
}
//创建ul标签
var ulObkj = document.createElement("ul");
//给ul标签设置id
ulObkj.id = "uu";
//将ul标签添加到div中
dvObj.appendChild(ulObkj);
//循环遍历
for (var i = 0; i < kungfu.length; i++) {
//创建li标签
var liObjs = document.createElement("li");
//将模拟数据的数据依此加到li标签中
liObjs.innerHTML = kungfu[i];
//将li标签添加到ul中
ulObkj.appendChild(liObjs);
}
};
</script>
</body>
</html>
动态创建列表1.png
动态创建列表2.png
- 动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script>
//模拟数据
var arr = [
{name: "百度", href: "http://www.baidu.com"},
{name: "谷歌", href: "http://www.google.com"},
{name: "优酷", href: "http://www.youku.com"},
{name: "土豆", href: "http://www.tudou.com"},
{name: "快播", href: "http://www.kuaibo.com"},
{name: "爱奇艺", href: "http://www.aiqiyi.com"}
];
//获取按钮
var btn = document.getElementById("btn");
//获取div
var dvObj = document.getElementById("dv");
//给按钮注册点击事件
btn.onclick = function () {
//判断div中是否有table
if(document.getElementById("table")){
//有则删除
dvObj.removeChild(document.getElementById("table"));
}
//创建table
var tableObj = document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
tableObj.id = "table";
//将table标签添加到div中
dvObj.appendChild(tableObj);
//循环遍历
for (var i = 0; i < arr.length; i++) {
//创建tr
var trObj = document.createElement("tr");
//将tr标签添加到table中
tableObj.appendChild(trObj);
//创建第一个td
var tdObj1 = document.createElement("td");
//第一个td中插入模拟数据中的name
tdObj1.innerHTML = arr[i].name;
//将第一个td标签添加到tr中
trObj.appendChild(tdObj1);
//创建第二个td
var tdObj2 = document.createElement("td");
//第二个td中插入模拟数据中的href(超链接)
tdObj2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
//将第二个td标签添加到tr中
trObj.appendChild(tdObj2);
}
};
</script>
</body>
</html>
动态创建表格1.png
动态创建表格2.png
- 为同一个元素绑定多个事件(兼容代码)
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script>
//为元素绑定事件(DOM):一种,但是不兼容,有两种
//1 对象.addEventListener("没有on的事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
//为任意元素，绑定多个事件的兼容代码
/**
*
* @param ele 任意的元素
* @param type 事件的类型
* @param fn 事件处理函数
*/
function addEventListener(ele, type, fn) {
//判断浏览器是否支持这个方法
if (ele.addEventListener) {
ele.addEventListener(type, fn, false);
} else if (ele.attachEvent) {
ele.attachEvent("on" + type, fn);
} else {
ele["on" + type] = fn;
}
}
//测试代码
var btn = document.getElementById("btn");
addEventListener(btn, "click", function () {
console.log("哦1");
});
addEventListener(btn, "click", function () {
console.log("哦2");
});
addEventListener(btn, "click", function () {
console.log("测试成功");
});
</script>
</body>
</html>
为元素绑定多个事件兼容.png
- 为同一个元素绑定多个不同的事件指向同一个事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script>
//为同一个元素绑定多个不同的事件,指向相同的事件处理函数
var btn = document.getElementById("btn");
btn.onclick = f1;
btn.onmouseover = f1;
btn.onmouseout = f1;
function f1(e) {
switch (e.type) {
case "click":
this.value = "测试成功";
break;
case "mouseover":
this.style.backgroundColor = "red";
break;
case "mouseout":
this.style.backgroundColor = "green";
break;
}
}
</script>
</body>
</html>
为同一个元素绑定多个不同的事件指向同一个事件处理函数1.png
为同一个元素绑定多个不同的事件指向同一个事件处理函数2.png
为同一个元素绑定多个不同的事件指向同一个事件处理函数3.png
- 模拟百度搜索大项目
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
<script>
/**
* 通过id获取元素
* @param id
* @returns {HTMLElement | null}
*/
function my$(id) {
return document.getElementById(id);
}
var keyWords = ["蓝海", "蓝海海", "蓝海嘿", "蓝海嘿嘿", "兰海", "兰海海", "蓝色", "蓝色的"];
my$("txt").onkeyup = function () {
//每一次的键盘抬起都判断页面中有没有这个div
if(my$("dv")){
//删除一次
my$("box").removeChild(my$("dv"));
}
//获取文本框输入的内容
var text = this.value;
//临时数组--空数组------->存放对应上的数据
var tempArr = [];
//把文本框输入的内容和数组中的每个数据对比
for (var i = 0; i < keyWords.length; i++) {
//是否是最开始出现的
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]);//追加
}
}
//如果文本框是空的,临时数组是空的,不用创建div
if (this.value.length == 0 || tempArr.length == 0) {
//如果页面中有这个div,删除这个div
if (my$("dv")) {
my$("box").removeChild(my$("dv"));
}
return;
}
//创建div,把div加入id为box的div中
var dvObj = document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id = "dv";
dvObj.style.width = "354px";
dvObj.style.border = "1px solid #ccc";
//循环遍历临时数组,创建对应的p标签
for (var i = 0; i < tempArr.length; i++) {
//创建p标签
var pObj = document.createElement("p");
//把p加到div中
dvObj.appendChild(pObj);
pObj.innerHTML = tempArr[i];
pObj.style.margin = 0;
pObj.style.padding = 0;
pObj.style.cursor = "pointer";
pObj.style.paddingTop = "2px";
pObj.style.paddingLeft = "5px";
//鼠标进入
pObj.onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
pObj.onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>
百度搜索大项目1.png
百度搜索大项目2.png
BOM:浏览器对象模型
1.什么是BOM？
BOM(Browser Object Model) 浏览器对象模型
BOM提供了独立与内容 而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口直接的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM结构图.png
- location对象
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<script>
//location对象
console.log(window.location);
//----属性
//地址栏上#及后面的内容
console.log(window.location.hash);
//主机名及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径---相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);
//----方法
window.onload = function () {
document.getElementById("btn1").onclick = function () {
location.href = "http://www.baidu.com";//设置跳转的页面的地址--属性，有历史记录，可以后退和前进
};
};
window.onload = function () {
document.getElementById("btn2").onclick = function () {
location.assign("http://www.baidu.com");//设置跳转的页面的地址--方法，有历史记录，可以后退和前进
};
};
window.onload = function () {
document.getElementById("btn3").onclick = function () {
location.reload();//重新加载--刷新
};
};
window.onload = function () {
document.getElementById("btn4").onclick = function () {
location.replace("http://www.baidu.com");//设置跳转的页面的地址--方法，没有历史记录，不可以后退和前进
};
};
</script>
</head>
<body>
<input value="location.href" type="button" id="btn1"/>
<input value="location.assign()" type="button" id="btn2"/>
<input value="location.reload()" type="button" id="btn3"/>
<input value="location.replace()" type="button" id="btn4"/>
</body>
</html>
location对象.png
- history对象
window.history.forward();//前进
window.history.back();//后退
- navigator对象
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//判断浏览器所在的系统平台类型
console.log(window.navigator.platform);
//判断用户浏览器的类型
console.log(window.navigator.userAgent);
</script>
</body>
</html>
navigator对象.png
网友评论