文章目录
BOM
DOM —— 文档对象模型
BOM —— 浏览器对象模型
BOM可以是我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
-
BOM对象
- Window —— 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
- Navigator —— 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
- Location —— 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
- History —— 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录；由于隐私的原因，该对象不能获取到具体的历史记录，智能操作浏览器向前或向后翻页；而且该操作只在当次访问时有效
- Screen —— 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象使用，也可以直接使用
一、Navigator
由于历史原因，Navigator对象中的大部分属性都已经不能帮我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息，userAgent只是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同浏览器会有不同的userAgent
如果通过userAgent不能判断，还可以使用浏览器中特有的对象，来判断浏览器的信息
比如：ActiveXObject
<script>
var ua = navigator.userAgent;
if(/chrome/i.test(ua)){
alert("谷歌");
}else if(/firefox/i.test(ua)){
alert("火狐");
}else if("ActiveXObject" in window){
alert("IE");
}
// 现在IE11已经披上了chrome的羊皮
// if(window.ActiveXObject){
// alert("IE");
// }else{
// alert("你不是IE");
// }
// IE11穿了马甲，还是不行
</script>
二、History
1.length
length：属性，可以获取到当次访问的链接的数量
alert(history.length);
2.back()
可以用来回到上一个页面，作用和浏览器的后退按钮一样
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
history.back();
};
};
</script>
3.forward()
可以用来跳转到下一个页面，作用和浏览器的前进按钮一样
history.forward();
4.go()
可以用来跳转到指定的界面，它需要一个整数作为参数：
- 1 —— 表示向前跳转一个页面，相当于forward()
- 2 —— 表示向前跳转两个界面
- -1 —— 表示向后跳转一个界面
- -2 —— 表示向后跳转两个界面
三、Location
如果直接打印location，则可以获取地址栏的信息（当前页面的完整路径）
alert(location);
如果直接将location属性修改为一个完整的路径，或相对路径，则 我们页面会自动跳转到该路径，并且会生成相应的历史记录
location = "http://www.baidu.com";
1.assign()
: 用来跳转到其他的页面，作用和直接修改location一样
location.assign("http://www.baidu.com");
2.reload()
用于重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.reload();
location.reload(true);
3.replace()
可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
但不会生成历史记录，不能使用退回按钮退回
location.replace("01.BOM.html");
四、定时器简介
1.setInterval()
JS程序的执行速度是非常非常快的
如果希望一段程序，可以每隔一段时间执行一次，可以使用定时调用
-
setInterval()
-
定时调用
可以将一个函数，每隔一段时间执行一次
参数：
-
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
返回值：
-
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
},1000);
console.log(timer);
2.clearInterval()
-
clearInterval()
-
可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
if(num == 11){
clearInterval(timer);
}
3.切换图片练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var img1 = document.getElementById("img1");
var imgArr = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg"];
var index = 0;
var brn01 = document.getElementById("btn01");
var timer;
btn01.onclick = function () {
/*
* 目前，我门每点击一个按钮，就会开启一个定时器
* 点击多次就会开启多个定时器，这就倒是图片的切换速度过快
* 而且我们只能关闭最后一次开启的定时器
* 所以我们在开启定时器之前，先将当前元素的其他定时器关闭
*/
clearInterval(timer);
timer = setInterval(function () {
index++;
// if(index >= imgArr.length){
// index = 0;
// }
index %= imgArr.length;
img1.src = imgArr[index];
}, 500);
};
var brn02 = document.getElementById("btn02");
btn02.onclick =function(){
/*
* clearInterval()可以接受任意参数
* 如果参数是一个有效的定时器的标识，则停止对应的定时器
* 如果参数不是一个有效的标识，则什么也不做
*/
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="./img/1.jpg">
<br><br>
<button id="btn01">开始</button>
<button id="btn02">结束</button>
</body>
</html>
4修改div移动练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload = function(){
// 定义一个变量表示移动的速度
var speed = 10;
var dir = 0;
setInterval(function(){
switch(dir){
case 37:
// alert("left");
box1.style.left = box1.offsetLeft - speed +"px";
break;
case 39:
// alert("right");
box1.style.left = box1.offsetLeft + speed +"px";
break;
case 38:
// alert("top");
box1.style.top = box1.offsetTop - speed +"px";
break;
case 40:
// alert("down");
box1.style.top = box1.offsetTop + speed +"px";
break;
}
},30);
var box1 = document.getElementById("box1");
document.onkeydown = function(event){
event = event || window.event;
/*
*keyCode:
* 37 左
* 38 上
* 39 右
* 40 下
*/
dir = event.keyCode;
// 用户按了ctrl后，加速
if(event.ctrlKey){
speed = 50;
}else{
speed = 10;
}
};
document.onkeyup = function(){
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
5.延时调用
-
setTimeout()
-
延时调用一个函数不马上执行，而是隔一段时间后再执行，而且只会执行一次
延时调用和定时调用的区别是：定时调用会执行多次，而延时调用只会执行一次
clearTimeout()
- 关闭一个延时调用
window.onload = function(){
var num = 0;
var timer = setTimeout(function(){
console.log(num);
},3000);
clearTimeout(timer);
};
延时调用和定时调用实际上是可以相互代替的，在开发中可以根据自己需要去选择
6.定时器的应用（一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
var timer;
btn01.onclick = function(){
// 关闭上一个计时器
clearInterval(timer);
timer = setInterval(function(){
var oldValue = parseInt(getStyle(box1,"left"));
var newValue = oldValue + 4;
// 判断newValue是否大于800
if(newValue > 800){
newValue = 800;
}
// 将新值设置给box1
box1.style.left = newValue + "px";
// 当元素移动到800px时，使其停止执行动画
if(newValue == 800){
clearInterval(timer);
}
}, 30);
};
};
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br><br>
<div id="box1"></div>
<div style="width: 1px; height: 1000px; border-left: 1px solid #000; position: absolute; left: 800px; top: 0;"></div>
</body>
</html>
7.定时器的应用（二）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
}
}
var timer;
btn01.onclick = function () {
move(box1, 800, 10);
};
btn02.onclick = function () {
move(box1, 0, 10);
};
/*
* 尝试创建一个可以执行简单动画的函数
*
*/
function move(obj, target, speed) {
// 关闭上一个计时器
clearInterval(timer);
var current = parseInt(getStyle(obj,"left"));
if(current > target){
speed = -speed;
}
timer = setInterval(function () {
var oldValue = parseInt(getStyle(obj, "left"));
var newValue = oldValue + speed;
// 判断newValue是否大于800
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
box1.style.left = newValue + "px";
// 当元素移动到800px时，使其停止执行动画
if (newValue == targent) {
clearInterval(timer);
}
}, 30);
};
};
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br><br>
<div id="box1"></div>
<div style="width: 1px; height: 1000px; border-left: 1px solid #000; position: absolute; left: 800px; top: 0;">
</div>
</body>
</html>
8.定时器的应用（三）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0px;
top: 200px;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var btn03 = document.getElementById("btn03");
var btn04 = document.getElementById("btn04");
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
}
}
/*
* 目前我们的定时器的标识
*/
// var timer;
btn01.onclick = function () {
move(box1, "left", 800, 10);
};
btn02.onclick = function () {
move(box1, "left", 0, 10);
};
btn03.onclick = function () {
move(box2, "left", 800, 10);
};
btn04.onclick = function () {
move(box2, "height", 800, 10, function(){
move(box2 ,"width", 800,10, function(){
move(box2,"height",10,10);
});
});
};
/*
* 尝试创建一个可以执行简单动画的函数
* 参数：
* obj 要执行动画的对象
* attr 要执行动画的样式,比如：left right...
* target 执行动画的目标位置
* speed 移动的速度
* callback回调函数，这个函数将会在动画执行完毕后执行
*
*/
function move(obj, attr, target, speed, callback){
// 关闭上一个计时器
clearInterval(obj.timer);
var current = parseInt(getStyle(obj,attr));
if(current > target){
speed = -speed;
}
// 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function () {
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue + speed;
// 判断newValue是否大于800
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
obj.style[attr] = newValue + "px";
// 当元素移动到800px时，使其停止执行动画
if (newValue == target) {
clearInterval(obj.timer);
callback && callback();
}
}, 30);
};
};
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 1px; height: 1000px; border-left: 1px solid #000; position: absolute; left: 800px; top: 0;">
</div>
</body>
</html>
五、轮播图界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#outer {
width: 220px;
height: 200px;
background-color: antiquewhite;
margin: 100px auto;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList {
list-style: none;
position: absolute;
}
#imgList li {
float: left;
margin: 0 10px;
}
#navDiv {
position: absolute;
bottom: 15px;
}
#navDiv a {
display: block;
float: left;
width: 10px;
height: 10px;
background-color: red;
margin-left: 4px;
opacity: 0.7;
filter: alpha(70);
}
#navDiv a:hover {
background-color: antiquewhite;
}
</style>
<script src="./js/tools.js"></script>
<script>
window.onload = function () {
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = imgArr.length * 220 + "px";
var outer = document.getElementById("outer");
var navDiv = document.getElementById("navDiv");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
var allA = document.getElementsByTagName("a");
var index = 0;
allA[index].style.backgroundColor = "antiquewhite";
var timer;
for (var i = 0; i < allA.length; i++) {
allA[i].num = i;
allA[i].onclick = function () {
clearInterval(timer);
index = this.num;
// imgList.style.left = -220*index +"px";
setA();
move(imgList, "left", -220*index, 30, function () {
autoChange();
});
};
}
function setA() {
if(index >= imgArr.length - 1){
index = 0;
imgList.style.left = 0 + "px";
}
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "antiquewhite";
}
autoChange();
function autoChange() {
timer = setInterval(function () {
index++;
index %= imgArr.length;
move(imgList, "left", -220*index, 30, function () {
setA();
});
}, 2000);
}
};
</script>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
<li><img src="./img/4.jpg"></li>
<li><img src="./img/5.jpg"></li>
<li><img src="./img/1.jpg"></li>
</ul>
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
六、类的操作
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次界面，这样修改的性能是比较差的，而且这种形式当我们要修改多个样式时，也不方便
我们可以通过修改元素的class属性来间接的修改样式，这样我们只需要修改一次，即可同时修改多个样式，浏览器只需要渲染一次，性能好，而且可以是表现和行为进一步分离
box.className = "b2";
box.className += " b2";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1 {
width: 200px;
height: 200px;
background-color: red;
}
.b2 {
border: 20px solid aliceblue;
background-color: yellowgreen;
}
</style>
<script>
window.onload = function () {
var box = document.getElementById("box");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
toggleClass(box, "b2");
};
/*
1.
定义一个函数，用来向一个元素中添加指定的class属性值
参数：
obj 要添加class属性的元素
cn 要添加的class值
*/
function addClass(obj, cn) {
//检查obj中是否含有cn
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
2.
判断一个元素中是否有指定的class属性值
*/
function hasClass(obj, cn) {
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/*
3.
删除一个元素中的指定class属性
*/
function removeClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg, "");
}
/*
4.
toggleClass可以用来切换一个类
如果元素中具有该类，则删除
如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
removeClass(obj,cn)
}else{
addClass(obj,cn);
}
}
}
</script>
</head>
<body>
<button id="btn01">点一下换样式</button>
<br>
<br>
<div id="box" class="b1 b2"></div>
</body>
</html>
练习 —— 二级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,
img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function () {
var menuSpan = document.querySelectorAll(".menuSpan");
var openDiv = menuSpan[0].parentNode;
for (var i = 0; i < menuSpan.length; i++) {
menuSpan[i].onclick = function () {
var parentDiv = this.parentNode;
toggleMenu(parentDiv);
if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
// addClass(openDiv,"collapsed");
// 此处toggle（）不需要移除功能
// toggleClass(openDiv, "collapsed");
toggleMenu(openDiv);
}
openDiv = parentDiv;
};
}
function toggleMenu(obj) {
var begin = obj.offsetHeight;
toggleClass(obj, "collapsed");
var end = obj.offsetHeight;
//动画效果就是将高度从begin向end过度
obj.style.height = begin + "px";
move(obj, "height", end, 10, function () {
obj.style.height = "";
});
}
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">htaccess密码</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">推荐我们</a>
<a href="#">链接我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驱动</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">测试电流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>
七、JSON
JS中的对象只有JS自己认识，其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
-
JSON
- JavaScript Object Notation JS对象表示法
- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
- 其他的和JS语法一致
JSON分类：
- 对象 { }
- 数组 [ ]
JSON中允许的值：
- 字符串
- 数值
- 布尔值
- null
- 对象
- 空值
将JSON字符串转换为JS中的对象
- 在JS中，为我们提供了一个工具类，就叫JSON
- 这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
<script>
window.onload = function(){
var json = '{"name":"孙悟空","age":18,"gender":"男"}';
var ob = JSON.parse(json);
console.log(ob.name);
console.log(ob.age);
};
</script>
结果：
将JS中对象转换为JSON字符串
JSON.stringify
- 可以将一个JS对象转换为JSON字符串
- 需要一个JS对象作为参数，会返回一个JSON字符串
<script>
window.onload = function(){
var obj1 = {name: "猪八戒",age:28,gender: "男"};
var str = JSON.stringify(obj1);
console.log(str);
};
</script>
结果：
JSON在IE7及以下浏览器中不兼容
-
eval()
- 这个函数可用来执行一段字符串形式的JS代码，并将执行结果返回
- 如果使用eval()执行的字符串中含有{ }，它会将{ }当成是代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个（）
<script>
var str = "alert('hello');";
eval(str);
</script>
结果：
<script>
window.onload = function(){
var str = '({"name":"孙悟空","age":18,"gender": "男"})';
var obj = eval(str);
console.log(obj);
};
</script>
结果：
eval() 这个函数的功能很强大，可以直接执行一个字符串中的js代码
但是在开发中尽量不要使用，首先它的执行性能比较差，然后他会具有安全隐患
如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来操作
2232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
