Javascript之BOM

最新推荐文章于 2024-08-13 22:07:58 发布

拖把湛屎，戳谁谁死

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量290

点赞数 3

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_70314704/article/details/139419176

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

location

可以通过location设置一些页面属性或页面操作，比如跳转页面、刷新页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="f1()">跳转页面</button>
        <button onclick="f2()">刷新页面</button>
	</body>
	<script>
		function f1(){
			window.location.href = "https://www.google.com"
		}
        
        function f2(){
			window.location.reload();
		}
	</script>
</html>

history

history中记录了页面历史信息，可以用于回退或者前进页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="f1()">上两页</button>
		<button onclick="f2()">上一页</button>
		<button onclick="f3()">刷新</button>
		<button onclick="f4()">下一页</button>
		<button onclick="f5()">下两页</button>
	</body>
	<script>
		function f1(){window.history.go(-2)}
		function f2(){window.history.go(-1)}//function f2(){window.history.back()}
		function f3(){window.history.go(0)}//function f2(){window.location.reload()}
		function f4(){window.history.go(1)}//function f2(){window.history.forward()}
		function f5(){window.history.go(2)}
	</script>
</html>

open

open()是一个方法，传递一个url字符串作为参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="f1()">打开</button>
	</body>
	<script>
		function f1(){window.open("https://www.baidu.com")}//新建一页打开
	</script>
</html>

弹窗

js中包含三种弹窗：警告弹窗、确认弹窗、提示弹窗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="f1()">警告弹窗</button>
		<button onclick="f2()">确认弹窗</button>
		<button onclick="f3()">提示弹窗</button>
	</body>
	<script>
		function f1() {
			alert("警告信息")
		}
		
		// 返回布尔值，点击确认返回true，点击取消返回false
		function f2() {
			bool = confirm("确认信息")
			console.log(bool)
		}

		// 返回填入框中的数据，直接点击确认返回默认值，输入值点击确认返回值，输入空值点击确认返回空字符串，点击取消返回null
		function f3() {
			val = prompt("提示信息", "默认值")
			console.log(val)
		}
	</script>
</html>

定时器

js中的定时器被称为计时事件，分为两种：

1、固定事件后执行函数逻辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="../img/hyg.jpg" alt="" />
		<button onclick="f1()">取消定时</button>
	</body>
	<script>
		var img = document.getElementsByTagName("img")[0]
		//超过设定的时间就执行function内的逻辑
		var timeout = setTimeout(function() {
			img.setAttribute("src", "../img/avatar.jpg")
		}, 3000)

		function f1() {
			clearTimeout(timeout)
		}
	</script>
</html>

2、每隔固定事件执行函数逻辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="../img/1.jpg" alt="" />
		<br />
		<button onclick="f1()">取消定时</button>
	</body>
	<script>
		var paths = ["2.jpg", "3.jpg", "4.jpg", "5.jpg", "1.jpg"]
		var index = 0
		var img = document.getElementsByTagName("img")[0]
		//每过固定时间就执行function内的逻辑
		var timeout = setInterval(function() {
			img.setAttribute("src", "../img/" + paths[index])
			index++
			if (index == paths.length) {
				index = 0
			}
		}, 1000)

		function f1() {
			clearInterval(timeout)
		}
	</script>
</html>

Cookie操作

Cookie是服务器保存在浏览器上的一些数据，以纯文本格式保存，数据格式为键=值，不同键值对之间通过; 分隔

Cookie有以下特点：

1、不同浏览器之间Cookie不能共享

2、相同浏览器的不同域名Cookie不能共享

3、同一浏览器的同一域名下的多个页面Cookie可以共享

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="f1()">添加cookie</button>
		<button onclick="f2()">修改cookie</button>
		<button onclick="f3()">删除cookie</button>
		<button onclick="f4()">查询cookie</button>
	</body>
	<script>
		function f1() {
			updateCookie("username", "liuxu", 1000 * 60 * 60 * 24 * 5)
			updateCookie("password", "123456", 1000 * 60 * 60 * 24 * 5)
		}

		function f2() {
			updateCookie("username", "huangyuegui", 1000 * 60 * 60 * 24 * 5)
			updateCookie("password", "00000000000", 1000 * 60 * 60 * 24 * 5)
		}

		function f3() {//通过给Cookie设置过期时间为当前时间，Cookie立马过期
			updateCookie("username", "liuxu", 0)
			updateCookie("password", "123456", 0)
		}

		function f4() {
			var username = queryCookie("username")
			var password = queryCookie("password")
			if (username && password) {
				console.log(username + ":" + password)
			} else {
				console.log("Minssing username or password!!")
			}
		}
		
		//查询cookie
		function queryCookie(key) {
			var key_vals = document.cookie.split(";")
			for (var i = 0; i < key_vals.length; i++) {
				var cookie_key = key_vals[i].trim().split("=")[0]
				var cookie_val = key_vals[i].trim().split("=")[1]
				if (key == cookie_key) {
					return cookie_val
				}
			}
			return null
		}
		
		//更新cookie
		function updateCookie(key, val, time) {
			var date = new Date();
			date.setTime(date.getTime() + time)
			document.cookie = key + "=" + val + ";expires=" + date.toGMTString()
		}
	</script>
</html>

JS对象

JS对象：全靠想象….

创建JS对象的三种方式

方式一：通过Object

var stu = new Object;
stu.name = "liuxu";
stu.age = 23;
stu.printInfo = function(){
    console.log(this.name + "==" + this.age);
}

//调用stu对象的方法
stu.printInfo();

方式二：通过 { }

//在js中1，一个 {} 代表一个对象
var stu = {
    name:"liuxu",
    age:23,
    printInfo:()=>{
        console.log(this.name + "==" + this.age);
    }
}

方式三：我也不知道怎么称呼，原理就是类似Java创建对象，然后通过prototype添加方法

function Student(name,age){
    this.name = name;
    this.age = age;
}

//原型：在原有基础上添加内容
Student.prototype.printInfo = function(){
    console.log(this.name + "==" + this.age);
}

var stu = new Student("liuxu",20);
//stu.printInfo();

//for-in可以遍历对象（属性、方法）
for(var v in stu){
    console.log(v);
}