javaScriptv BOM & 对象

最新推荐文章于 2024-06-10 22:18:41 发布

ccL-

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量18

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_77148945/article/details/134363208

版权

1.BOM简介
DOM:document object model
DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素

BOM: Brower object model
浏览器器对象模型.可以获取一些浏览器自带的功能
由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，
BOM的浏览器兼容性较差。常见的BOM对象有：
window
document
location

2.window对象讲解
<button id="btn">点击我跳转到另外一个页面</button>
<a href="1_BOM简介.html">点击我跳转到另外一个页面</a>
<button id="close">退出网页</button>
<script>
window对象是全局对象又称顶级对象.可以省略不写
常见的方法:console.log() alert
console可以写成window.console。

alert()可以写成window.alert()。

prompt()可以写成window.prompt()。

open()可以写成window. open()。

close()可以写成window.close()。

open表示开启一个新窗口重新开启一个窗口而a标签是在当前窗口完成覆盖.
document.getElementById("btn").onclick = function(){
window.open("1_BOM简介.html");
open("1_BOM简介.html");
}


close方法表示直接关闭浏览器
document.getElementById("close").onclick = function(){
window.open("1_BOM简介.html");
close();
}

</script>

3.location对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点击我跳转页面</button>   <br>
		<button id="btn1">点击我获取当前页面的网址</button>  <br>
		<button id="btn2">点击我刷新网页</button>
		
		<script>
			//location对象常用于路径相关的用法
			
			//常见用法1: 跳转到指定页面  等同于A标签的功能
			document.getElementById("btn").onclick = function(){
				location.href = "1_BOM简介.html";
			}
			
			//常见用法2: 获取当前页面的URL地址
			document.getElementById("btn1").onclick = function(){
				console.log(location.href);
			}
			
			
			
			
			//客串知识点: 编码和乱码的区别:
			//乱码值得是 两个字符串 采用的编码不一致,导致数据乱套.
			//数据呈现出 无法阅读的字样 .
			
			
			
			//编码:将占据空间较大的汉字 转成占据空间较小的字母  的编码形式
			//解码:将字母 又转回汉字.
			
			//如何对字符串进行编码解码的操作
			var str = "%E5%AF%B9%E8%B1%A1";
			str = decodeURI(str);//进行解码
			console.log(str);
			
			var str = "对象";
			str = encodeURI(str);//进行编码
			console.log(str);
			
			//常见用法3: 刷新当前网页
			document.getElementById("btn2").onclick = function(){
				location.reload();
			}
			
			
		</script>
	</body>
</html>

4.定时器的基本用法

定时器: 每间隔多少时间毫秒自动执行函数的一种机制.

例如5秒后退出系统例如轮播图每隔1秒进行图片的转变

定时器的种类: 分为延时定时器和重复定时器
延时定时器: 等待多少时间执行一次函数就GG

重复定时器: 每隔多少时间都执行一次函数无限循环除非代码写了关闭的条件

5.延迟定时器的用法

 
		<script>
			// 等待多少时间 执行一次函数  就GG
			//延时定时器的语法如下:
			/*
				1. setTimeout(function(){ 代码块 },  xx);  xx毫秒	
				
				2. setTimeout(aa,  xx); 	  注意aa表示函数名 不要加括号
				
					function aa(){
						
					}
					
			*/
		   
		   
		   
		   // setTimeout(function(){
			  // console.log("你好~~~"); 
		   // },2000)
		   
		   
		   // function aa(){
			  //  console.log("你好~~");
		   // }
		   
		   
		   // setTimeout(aa,3000);
		   
		   
		   setTimeout(function(){
				close();
		   },5000)
		   
		   
		   
		</script>

6.重复定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点击我停止定时器</button>
		
		<script>
			
			//重复定时器: 每隔多少时间  都执行一次函数 
			//无限循环  除非代码写了关闭的条件
			//重复定时器的语法如下:
			/*
				1. setInterval(function(){ 代码块 },  xx);  xx毫秒	
				
				2. setInterval(aa,  xx); 	  注意aa表示函数名 不要加括号
				
					function aa(){
						
					}
					
			*/
		   
		   // setInterval(function(){
			  //  console.log("~~");
		   // },1000);
		   
		   // setInterval(aa,1000);
		   
		   // function aa(){
			  //  console.log("~~~");
		   // }
		   
		   
		   
		   //如何关闭定时器
		   //1.需要先定义定时器的名字
		   //2.加上关闭的条件
		   //3.通过clearInterval(xxx);  xxx表示定时器的名字
		   
		   var dsq ; //假设该变量是存储定时器
		   
		   
			dsq = setInterval(function(){
				console.log("~~");
			},1000);
			
			
			document.getElementById("btn").onclick = function(){
				clearInterval(dsq);
			}
			
		</script>
	</body>
</html>