前端 JavaScript BOM

最新推荐文章于 2024-03-13 18:13:16 发布

wuxingge

最新推荐文章于 2024-03-13 18:13:16 发布

阅读量238

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wuxingge/article/details/105902308

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

BOM

浏览器对象模型
BOM可以通过JS操作浏览器
BOM提供了一组对象，用来完成对浏览器的操作
BOM对象
- window
  - 代表整个浏览器的窗口，同时window也是网页中的全局对象
- navigator
  - 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器
- location
  - 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面
- history
  - 代表浏览器的历史记录，可以操作浏览器的历史记录，由于隐私的原因，不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且只在当次访问时有效
- screen
  - 代表用户的屏幕的信息，可以获取到用户的显示器相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

navigator

navigator对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息

navigator属性

由于历史原因，navigator对象中的大部分属性都已经不能识别浏览器了
一般使用userAgent 来判断浏览器的信息
如果通过UserAgent不能判断，可以通过一些浏览器中特有的对象来判断浏览器的信息
- 比如： ActiveXobject 只有IE中有

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*console.log(navigator);
			console.log(location);
			console.log(history);*/
			//console.log(navigator.userAgent);
			var ua = navigator.userAgent;
			if(/chrome/i.test(ua)){
				alert("你是谷歌");
			}else if(/firefox/i.test(ua)){
				alert("你是火狐");
			}else if(/msie/i.test(ua)){
				alert("你是IE");
			}else if("ActiveXObject" in window){
				alert("你是IE11,我已抓住你");
			}
			//alert(ActiveXObject);
			/*if("ActiveXObject" in window){
				alert("你是IE,我已抓住你");
			}else{
				alert("你不是IE");
			}*/
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

history

操作浏览器向前或向后翻页

length属性获取当次访问的 URL(链接) 数量
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 可以跳转到指定的页面(需要一个整数作为参数)
- 1 表示向前跳转一个页面
- 2 表示向前跳转两个页面
- -1 表示向后跳转一个页面
- -2 表示向后跳转两个页面

test01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>TEST01</h1>
		<a href="test02.html">去test02</a>
	</body>
</html>

test02.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>TEST02</h1>
		<a href="02.History.html">去02.History.html</a>
	</body>
</html>

02.History.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//alert(history.length);
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					//alert(history.length);
					//history.back();
					//history.forward();
					history.go(-2);
					
				};
			};
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
		<h1>History</h1>
		<a href="01.BOM.html">去BOM</a>
	</body>
</html>

location

封装了浏览器的地址栏的信息
如果直接打印location，则可以获取到地址栏的信息(当前页面的完整路径)
将location属性值修改为一个完整路径或相对路径，则页面会自动跳转到该路径，并且会生成相应的历史记录

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）

assign() 跳转到其它页面，和直接修改location一样
reload() 重新加载当前文档(相当于刷新)
- 如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
replace() 跳转到其它页面，不会生成历史记录(不能使用回退按钮回退)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					//alert(location);
					//location = "http://www.baidu.com";
					//location = "01.BOM.html";
					//location.assign("http://www.baidu.com");
					//location.reload(true);
					location.replace("01.BOM.html");
				};
			};
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
		<h1>Location</h1>
		<input type="text" />
		<a href="01.BOM.html">去BOM</a>
	</body>
</html>

window

alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
prompt() 显示可提示用户输入的对话框
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式(将一个函数，每隔一段时间执行一次)
- 参数
  - 1 回调函数，该函数会每隔一段时间被调用一次
  - 2 每次调用间隔的时间，单位是毫秒
- 返回值：返回一个number类型的数据(这个数字用来作为定时器的唯一标识)

<!-- 定时调用-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var count = document.getElementById("count");
				//使count中的内容自动切换
				var num = 1;
				var timer =  setInterval(function(){
					count.innerHTML = num++;
					if(num == 11){
						clearInterval(timer);
					}
				}, 1000);
							
			};
		</script>
	</head>
	<body>
		<h1 id="count"></h1>
	</body>
</html>

<!-- 定时切换图片 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			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 timer;
				
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					
					//在开启定时器之前，将当前元素上的其它定时器关闭
					clearInterval(timer);
					//开启一个定时器，自动切换图片
					timer = setInterval(function(){
						index++;
						/*if(index >= imgArr.length){
							index = 0;
						}*/
						index %= imgArr.length;
						img1.src = imgArr[index];
					}, 1000);
				};
				
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					clearInterval(timer);
				};
				
				
			};
		</script>
	</head>
	<body>
		<img id="img1" src="img/1.jpg" alt="" />
		<br /><br />
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>

clearInterval() 取消由 setInterval() 设置的 timeout(用来关闭一个定时器)
- 需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
- 可以接收任意参数，如果参数时一个有效的定时器的标识，则停止对应的定时器，如果参数不是一个有效的标识，则什么都不做

<!-- 移动方块 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				//定义一个变量，表示移动的速度
				var speed = 10;
				
				//创建一个变量表示方向
				var dir;
				
				//开启一个定时器，控制div的移动
				setInterval(function(){
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */

					switch(dir){
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				}, 30);
				
				//使div可以根据不同的方向键向不同的方向移动
				document.onkeydown = function(event){
					event = event || window.event;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
						speed = 50;
					}else{
						speed = 10;
					}
					
					//使dir等于按键的值
					dir = event.keyCode;
					
					
				};
				
				//当按键松开时，div不再移动
				document.onkeyup = function(){
					//设置方向为0
					dir = 0;
				};
				
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

setTimeout() 在指定的毫秒数后调用函数或计算表达式 (只执行一次)
clearTimeout() 取消由 setTimeout() 方法设置的 timeout

var num = 1;			
/*延时调用
 */
var timer = setTimeout(function(){
	console.log(num++);
}, 3000);
clearTimeout(timer);

<!-- 定时器 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				//定义一个变量，保存定时器的标识
				var timer;
				//点击按钮后，使box1向右移动
				btn01.onclick = function(){
					
					//关闭上一个定时器
					clearInterval(timer);
					
					timer = setInterval(function(){
						//获取box1原来的left值
						var oldValue = parseInt(getStyle(box1, "left"));
						//在旧值基础上增加
						var newValue = oldValue + 1;
						//判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						//将新值设置给box1
						box1.style.left = newValue + "px";
						
						//当元素移动到800px时，使其停止移动
						if(newValue == 800){
							clearInterval(timer);
						}
						
					}, 30);
				};
				
			};
			
			/* 定义一个函数， 用来获取指定元素的当前的样式
			 	obj 要获取样式的元素
			 	name 要获取的样式名
			 	
			 * */
			function getStyle(obj, name){
				
				if(window.getComputedStyle){
					//正常浏览器的方式
					return getComputedStyle(obj, null)[name];
				}else{
					//IE8的方式
					return obj.currentStyle[name];
				}
				
				
				
			}
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮后box1向右移动</button>
		<br /><br />
		<div id="box1"></div>
		<div style="width: 0; height: 1000px; border-left: 1px black solid; position: absolute; left: 800px; top: 0;"></div>
	</body>
</html>

<!-- 动画 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top: 200px;
			}
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				
				
				
				//点击按钮后，使box1向右移动
				btn01.onclick = function(){
					move(box1, "left", 800, 20);
					
				};
				//点击按钮后，使box1向左移动
				btn02.onclick = function(){
					move(box1, "left", 0, 10);
				};
				
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					move(box2, "left", 800, 10);
				};
				
				//测试按钮
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					//move(box2, "width", 800, 10);
					//move(box2, "top", 800, 10);
					//move(box2, "height", 800, 10);
					move(box2, "width", 800, 10, function(){
						move(box2, "height", 400, 10, function(){
							move(box2, "top", 0, 10, function(){
								move(box2, "width", 100, 10, function(){
									
								});
							});
						});
					});
				};
				
				
			};
			
			//定义一个变量，保存定时器的标识
			//var timer;
			
			
			
		</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: 0; height: 1000px; border-left: 1px black solid; position: absolute; left: 800px; top: 0;"></div>
	</body>
</html>

js/tools.js

//创建一个可以执行动画的函数
/*
 * 参数：
 * obj： 要执行动画的对象
 * attr: 要执行动画的样式
 * target: 执行动画的目标位置
 * speed: 移动的速度(正数向右移动，负数向左移动)
 * callback: 回调函数,这个函数将会在动画执行完毕执行
 */
function move(obj, attr, target, speed, callback){
	//关闭上一个定时器
		clearInterval(obj.timer);
		//获取元素当前位置
		var current = parseInt(getStyle(obj, attr));
		
		//判断速度的正负值
		//如果从0向800移动，则speed为正
		//如果从800向0移动，则speed为负
		if(current > target){
			speed = -speed;
		}
		
		//向执行动画的对象中添加一个timer属性，保存它自己的定时器标识
		obj.timer = setInterval(function(){
			//获取box1原来的left值
			var oldValue = parseInt(getStyle(obj, attr));
			//在旧值基础上增加
			var newValue = oldValue + speed;
			//向左移动时，需要判断newValue是否小于target
			//向右移动时，需要判断newValue是否大于target
			if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
				newValue = target;
			}
			
			//将新值设置给box1
			obj.style[attr] = newValue + "px";
			
			//当元素移动到0px时，使其停止移动
			if(newValue == target){
				clearInterval(obj.timer);
				callback && callback();
			}
			
		}, 30);
}


/* 定义一个函数， 用来获取指定元素的当前的样式
 	obj 要获取样式的元素
 	name 要获取的样式名
 	
 * */
function getStyle(obj, name){
	
	if(window.getComputedStyle){
		//正常浏览器的方式
		return getComputedStyle(obj, null)[name];
	}else{
		//IE8的方式
		return obj.currentStyle[name];
	}
		
}

轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 360px;
				height: 227px;
				margin:  50px auto;
				background-color: yellowgreen;
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出内容*/
				overflow: hidden;
			}
			#imgList{
				/*去除项目符号*/
				list-style: none;
				/*设置ul的宽度*/
				/*width: 1800px;*/
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*每向左移动360px，就会显示下一张图片*/
				left: 0px;
				
			}
			/*设置图片中的li*/
			#imgList li{
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			/*设置导航按钮*/
			#navDiv{
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*设置left值
				 * outer宽度 360
				 * navDiv宽度  125
				 *  360 - 125 = 235
				 *  235 / 2 = 117.5
				 */
				/*left: 117px;*/
				
			}
			#navDiv a{
				float: left;
				/*设置超链接的宽和高*/
				width: 15px;
				height: 15px;
				background-color: red;
				/*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			/*设置鼠标移入效果*/
			#navDiv a:hover{
				background-color: black;
			}
			
		</style>
		<!--引入工具-->
		<script type="text/javascript" src="js/tools.js"></script>
		
		<script type="text/javascript">
			window.onload = function(){
				
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				//设置imgList宽度
				imgList.style.width = 360 * imgArr.length + "px";
				
				/*设置导航按钮居中*/
				var navDiv = document.getElementById("navDiv");
				var outer = document.getElementById("outer");
				//设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
				
				//默认显示图片的索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				/*
				 * 点击超链接切换到指定的图片
				 * 
				 */
				//为所有的超链接绑定单击响应函数
				for(var i = 0; i < allA.length; i++){
					//为每一个超链接添加一个num属性
					allA[i].num = i;
					allA[i].onclick = function(){
						
						//关闭自动切换的定时器
						clearInterval(timer);
						
						//获取超链接的索引，并将其设置为index
						index = this.num;
						//切换图片
						//imgList.style.left = -350 * index + "px";
						
						
						//修改正在选中的a
						setA();
						
						//使用move函数切换图片
						move(imgList, "left", -350*index, 300, function(){
							//动画执行完毕，开启自动切换
							autoChange();
						});
						
					};
				}
				
				//开启自动切换图片
				autoChange();
				
				
				//创建一个方法设置选中的a
				function setA(){
					//判断当前索引是否是最后一张图片
					if(index >= imgArr.length - 1){
						index = 0;
						//此时最后一张图片，而最后一张和第一张是一模一样
						//通过CSS将最后一张切换成第一张
						imgList.style.left = 0;
					}
					
					for(var i = 0; i < allA.length; i++){
						allA[i].style.backgroundColor = "";
					}
					allA[index].style.backgroundColor = "black";
				}
				//定义自动切换的定时器的标识
				var timer;
				//创建一个函数，开启自动切换
				function autoChange(){
					//开启定时器，定时切换图片
					timer = setInterval(function(){
						//使索引自增
						index++;
						index %= imgArr.length;
						//执行动画，切换图片
						move(imgList, "left", -350*index, 20, function(){
							//修改导航点
							setA();
						});
						
					}, 3000);
				}
				
				
			};
		</script>
	</head>
	<body>
		<!--
        	创建一个外部div，作为大的容器
        -->
        <div id="outer">
        	<!-- 创建一个ul， 用于放置图片-->
        	<ul id="imgList">
        		<li><img src="img/1.jpg" alt="" /></li>
        		<li><img src="img/2.jpg" alt="" /></li>
        		<li><img src="img/3.jpg" alt="" /></li>
        		<li><img src="img/4.jpg" alt="" /></li>
        		<li><img src="img/5.jpg" alt="" /></li>
        		<li><img src="img/1.jpg" alt="" /></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>

js/tools.js

//创建一个可以执行动画的函数
/*
 * 参数：
 * obj： 要执行动画的对象
 * attr: 要执行动画的样式
 * target: 执行动画的目标位置
 * speed: 移动的速度(正数向右移动，负数向左移动)
 * callback: 回调函数,这个函数将会在动画执行完毕执行
 */
function move(obj, attr, target, speed, callback){
	//关闭上一个定时器
		clearInterval(obj.timer);
		//获取元素当前位置
		var current = parseInt(getStyle(obj, attr));
		
		//判断速度的正负值
		//如果从0向800移动，则speed为正
		//如果从800向0移动，则speed为负
		if(current > target){
			speed = -speed;
		}
		
		//向执行动画的对象中添加一个timer属性，保存它自己的定时器标识
		obj.timer = setInterval(function(){
			//获取box1原来的left值
			var oldValue = parseInt(getStyle(obj, attr));
			//在旧值基础上增加
			var newValue = oldValue + speed;
			//向左移动时，需要判断newValue是否小于target
			//向右移动时，需要判断newValue是否大于target
			if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
				newValue = target;
			}
			
			//将新值设置给box1
			obj.style[attr] = newValue + "px";
			
			//当元素移动到0px时，使其停止移动
			if(newValue == target){
				clearInterval(obj.timer);
				callback && callback();
			}
			
		}, 30);
}


/* 定义一个函数， 用来获取指定元素的当前的样式
 	obj 要获取样式的元素
 	name 要获取的样式名
 	
 * */
function getStyle(obj, name){
	
	if(window.getComputedStyle){
		//正常浏览器的方式
		return getComputedStyle(obj, null)[name];
	}else{
		//IE8的方式
		return obj.currentStyle[name];
	}
		
}

类的操作

通过修改元素的class属性来间接的修改样式,浏览器只需要重新渲染一次页面，性能较好, 这种方式使表现和行为进一步分离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.b2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn01 = document.getElementById("btn01");
				var box = document.getElementById("box");
				btn01.onclick = function(){
					/*
					 * 通过style属性修改元素的样式，每修改一个样式，浏览器需要重新渲染一次页面
					 * 这样执行的性能比较差
					 */
					/*box.style.width = "200px";
					box.style.height = "200px"
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 一行代码修改多个样式
					 */
					//修改box的class属性
					/*
					 可以通过修改元素的class属性来间接的修改样式,浏览器只需要重新渲染一次页面，性能较好
					 这种方式使表现和行为进一步分离
					 * * */
					box.className += " b2";
					
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后修改box的样式</button>
		<br /><br />
		<div id="box" class="b1"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.b2{
				
				height: 200px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn01 = document.getElementById("btn01");
				var box = document.getElementById("box");
				btn01.onclick = function(){
					/*
					 * 通过style属性修改元素的样式，每修改一个样式，浏览器需要重新渲染一次页面
					 * 这样执行的性能比较差
					 */
					/*box.style.width = "200px";
					box.style.height = "200px"
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 一行代码修改多个样式
					 */
					//修改box的class属性
					/*
					 可以通过修改元素的class属性来间接的修改样式,浏览器只需要重新渲染一次页面，性能较好
					 这种方式使表现和行为进一步分离
					 * * */
					//box.className += " b2";
					
					//alert(hasClass(box, "hello"));
					//addClass(box, "b2");
					//removeClass(box, "b1");
					toggleClass(box, "b2");
					
				};
			};
			
			//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数
			 * obj 要添加class属性的元素
			 * cn  要添加的class值
			 */
			function addClass(obj, cn){
				//检查obj中是否有cn
				if(!hasClass(obj, cn)){
					obj.className += " " + cn;
				}
				
			}
			/* 判断一个元素中是否有指定的class属性值
			 * 如果有该class，则返回true， 没有则返回 false
			 */
			function hasClass(obj, cn){
				//判断obj中有没有cn class
				var reg = RegExp("\\b" + cn + "\\b");
				
				return reg.test(obj.className);
			}
			/*
			 * 删除一个元素中指定的class属性
			 */
			function removeClass(obj, cn){
				var reg = RegExp("\\b" + cn + "\\b");
				obj.className = obj.className.replace(reg, "");
			}
			/*
			 * 切换一个类
			 * 如果元素中具有该类，则删除
			 * 如果元素中没有该类，则添加
			 */
			function toggleClass(obj, cn){
				if(hasClass(obj, cn)){
					removeClass(obj, cn);
				}else{
					addClass(obj, cn);
				}
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后修改box的样式</button>
		<br /><br />
		<div id="box" class="b1"></div>
	</body>
</html>

tools.js

//创建一个可以执行动画的函数
/*
 * 参数：
 * obj： 要执行动画的对象
 * attr: 要执行动画的样式
 * target: 执行动画的目标位置
 * speed: 移动的速度(正数向右移动，负数向左移动)
 * callback: 回调函数,这个函数将会在动画执行完毕执行
 */
function move(obj, attr, target, speed, callback){
	//关闭上一个定时器
		clearInterval(obj.timer);
		//获取元素当前位置
		var current = parseInt(getStyle(obj, attr));
		
		//判断速度的正负值
		//如果从0向800移动，则speed为正
		//如果从800向0移动，则speed为负
		if(current > target){
			speed = -speed;
		}
		
		//向执行动画的对象中添加一个timer属性，保存它自己的定时器标识
		obj.timer = setInterval(function(){
			//获取box1原来的left值
			var oldValue = parseInt(getStyle(obj, attr));
			//在旧值基础上增加
			var newValue = oldValue + speed;
			//向左移动时，需要判断newValue是否小于target
			//向右移动时，需要判断newValue是否大于target
			if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
				newValue = target;
			}
			
			//将新值设置给box1
			obj.style[attr] = newValue + "px";
			
			//当元素移动到0px时，使其停止移动
			if(newValue == target){
				clearInterval(obj.timer);
				callback && callback();
			}
			
		}, 30);
}


/* 定义一个函数， 用来获取指定元素的当前的样式
 	obj 要获取样式的元素
 	name 要获取的样式名
 	
 * */
function getStyle(obj, name){
	
	if(window.getComputedStyle){
		//正常浏览器的方式
		return getComputedStyle(obj, null)[name];
	}else{
		//IE8的方式
		return obj.currentStyle[name];
	}
	
}


//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数
			 * obj 要添加class属性的元素
			 * cn  要添加的class值
			 */
			function addClass(obj, cn){
				//检查obj中是否有cn
				if(!hasClass(obj, cn)){
					obj.className += " " + cn;
				}
				
			}
			/* 判断一个元素中是否有指定的class属性值
			 * 如果有该class，则返回true， 没有则返回 false
			 */
			function hasClass(obj, cn){
				//判断obj中有没有cn class
				var reg = RegExp("\\b" + cn + "\\b");
				
				return reg.test(obj.className);
			}
			/*
			 * 删除一个元素中指定的class属性
			 */
			function removeClass(obj, cn){
				var reg = RegExp("\\b" + cn + "\\b");
				obj.className = obj.className.replace(reg, "");
			}
			/*
			 * 切换一个类
			 * 如果元素中具有该类，则删除
			 * 如果元素中没有该类，则添加
			 */
			function toggleClass(obj, cn){
				if(hasClass(obj, cn)){
					removeClass(obj, cn);
				}else{
					addClass(obj, cn);
				}
			}

二级菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: 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(){
				/*
				 * 每个菜单都是一个div
				 * 当div具有collapsed这个类时，div就是折叠状态
				 */
				
				/* 点击菜单，切换菜单的显示状态
				 */
				//获取所有的class为menuSpan的元素
				var menuSpan = document.querySelectorAll(".menuSpan");
				
				//定义一个变量，保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				
				//为span绑定单击响应函数
				for(var i = 0; i < menuSpan.length; i++){
					menuSpan[i].onclick = function(){
						//this代表当前点击的span
						//获取当前span的父元素
						var parentDiv = this.parentNode;
						
						//切换菜单的显示状态
						toggleMenu(parentDiv);
						
						
						//判断openDiv和parentDiv是否相同
						if(openDiv != parentDiv && !hasClass(openDiv, "collapsed")){
							//打开菜单以后，应该关闭之前打开的菜单
							//为了可以统一处理动画过度效果，将addClass改为  toggleClass
							//addClass(openDiv, "collapsed");
							//此处toggleClass()不需要移除功能
							//toggleClass(openDiv, "collapsed");
							//切换菜单的显示状态
							toggleMenu(openDiv);
						}
						
						
						
						//修改openDiv为当前打开的菜单
						openDiv = parentDiv;
						
						
					};
				}
				
				/*
				 * 用来切换菜单折叠和显示状态
				 */
				function toggleMenu(obj){
					//在切换类之前，获取元素的高度
						var begin = obj.offsetHeight;
						
						
						//切换parentDiv的显示
						toggleClass(obj, "collapsed");
						
						//在切换类之后获取一个高度
						var end = obj.offsetHeight;
						//console.log("begin = " + begin + " end = " + end);
						//动画效果就是将高度从begin到end过度
						//将元素的高度重置为begin
						obj.style.height = begin + "px";
						
						//执行动画, 从begin向end过度
						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>

css/sdmenu.css

@charset "utf-8";

div.sdmenu{
	width: 150px;
	margin: 0 auto;
	font-family: arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	/*background: ;*/
	/*color: #fff;*/
}

div.sdmenu div{
	overflow: hidden;
	
}

div.sdmenu div:first-child{
	
}


div.sdmenu div.collapsed{
	height: 25px;
}

div.sdmenu div span{
	display: block;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	background-color: #636060;
}

div.sdmenu div a{
	display: block;
	color: #005b68;
}

div.sdmenu div a:hover{
	background-color: #005B68;
	color: white;
}

js/tools.js

//创建一个可以执行动画的函数
/*
 * 参数：
 * obj： 要执行动画的对象
 * attr: 要执行动画的样式
 * target: 执行动画的目标位置
 * speed: 移动的速度(正数向右移动，负数向左移动)
 * callback: 回调函数,这个函数将会在动画执行完毕执行
 */
function move(obj, attr, target, speed, callback){
	//关闭上一个定时器
		clearInterval(obj.timer);
		//获取元素当前位置
		var current = parseInt(getStyle(obj, attr));
		
		//判断速度的正负值
		//如果从0向800移动，则speed为正
		//如果从800向0移动，则speed为负
		if(current > target){
			speed = -speed;
		}
		
		//向执行动画的对象中添加一个timer属性，保存它自己的定时器标识
		obj.timer = setInterval(function(){
			//获取box1原来的left值
			var oldValue = parseInt(getStyle(obj, attr));
			//在旧值基础上增加
			var newValue = oldValue + speed;
			//向左移动时，需要判断newValue是否小于target
			//向右移动时，需要判断newValue是否大于target
			if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
				newValue = target;
			}
			
			//将新值设置给box1
			obj.style[attr] = newValue + "px";
			
			//当元素移动到0px时，使其停止移动
			if(newValue == target){
				clearInterval(obj.timer);
				callback && callback();
			}
			
		}, 30);
}


/* 定义一个函数， 用来获取指定元素的当前的样式
 	obj 要获取样式的元素
 	name 要获取的样式名
 	
 * */
function getStyle(obj, name){
	
	if(window.getComputedStyle){
		//正常浏览器的方式
		return getComputedStyle(obj, null)[name];
	}else{
		//IE8的方式
		return obj.currentStyle[name];
	}
	
}


//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数
			 * obj 要添加class属性的元素
			 * cn  要添加的class值
			 */
			function addClass(obj, cn){
				//检查obj中是否有cn
				if(!hasClass(obj, cn)){
					obj.className += " " + cn;
				}
				
			}
			/* 判断一个元素中是否有指定的class属性值
			 * 如果有该class，则返回true， 没有则返回 false
			 */
			function hasClass(obj, cn){
				//判断obj中有没有cn class
				var reg = RegExp("\\b" + cn + "\\b");
				
				return reg.test(obj.className);
			}
			/*
			 * 删除一个元素中指定的class属性
			 */
			function removeClass(obj, cn){
				var reg = RegExp("\\b" + cn + "\\b");
				obj.className = obj.className.replace(reg, "");
			}
			/*
			 * 切换一个类
			 * 如果元素中具有该类，则删除
			 * 如果元素中没有该类，则添加
			 */
			function toggleClass(obj, cn){
				if(hasClass(obj, cn)){
					removeClass(obj, cn);
				}else{
					addClass(obj, cn);
				}
			}

JSON

JSON就是一个特殊格式的字符串
这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象
JSON在开发中主要用于在不同语言之间数据的交互
JSON ： JavaScript Object Notation JS对象表示法
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加 双引号

JSON分类

JSON对象 {}
JSON数组 []

JSON中允许的值

字符串
数值
布尔值
null
对象
数组

JSON字符串转换为JS中的对象

JS中有一个工具类， JSON，可以将JSON转换为JS对象，也可以将JS对象转换为JSON
JSON.parse() 将JSON字符串转换为js对象并返回

var json = '{"name": "孙悟空", "age": 18, "gender": "男"}';
var o = JSON.parse(json);

JSON.stringify() 将js对象转换为JSON字符串并返回

var obj3 = {name: "猪八戒", age: 28, gender: "男"};
var str = JSON.stringify(obj3);

JSON这个对象在IE7及以下的浏览器中不支持
如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理
- eval() 这个函数可以执行一段字符串形式的JS代码，并将执行结果返回
- 如果使用eval()执行的字符串中含有{}，它会将{}当成是代码块，如果不希望当成代码块解析，则需要在字符串前后各加一个()
- eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，在开发中尽量不使用，它的执行性能比较差，还具有安全隐患

var str = '{"name": "孙悟空", "age": 18, "gender": "男"}';
var str2 = "alert('hello');";
//eval(str2);
var obj = eval("(" + str + ")");
console.log(obj.name);

wuxingge

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端 JavaScript BOM

BOM浏览器对象模型BOM可以通过JS操作浏览器BOM提供了一组对象，用来完成对浏览器的操作BOM对象window代表整个浏览器的窗口，同时window也是网页中的全局对象navigator代表当前浏览器的信息，通过该对象可以来识别不同的浏览器location代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面his...
复制链接

扫一扫