5.4 js Bom编程,什么是 BOM 编程,.Location对象,History对象, document对象 DOM,event 事件对象

最新推荐文章于 2024-08-27 15:59:21 发布

杵意

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量220

点赞数

分类专栏： java基础（前后端）文章标签： javascript 前端开发语言

王锡豪

本文链接：https://blog.csdn.net/wang121213145/article/details/122004176

版权

java基础（前后端）专栏收录该内容

61 篇文章 4 订阅

订阅专栏

文章目录

- - JavaScriptBOM编程

JavaScriptBOM编程

1 BOM编程

js：ECMAScript语法 DOM
BOM基本语法: 注释，变量，运算符，数据类型（number string null boolean undefined），
流程控制 : 顺序，分支 if else : switch case，循环 while do while for
循环四要素：初始化条件代码块步进表达式
对象：标签对象
获取标签对象： ById单 ByName多 ByClassName多 ByTagName多 querySelector(“选择器”) 单 querySelectorAll(“选择器”)全部

2 什么是 BOM 编程

JS三大核心：
ECMA基本语法：注释，变量，运算符，数据类型，流程控制，对象
BOM：Broswer Object Model 浏览器对象模型
DOM：（BOM Broswer Object Model）
浏览器对象模型，以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时， window 对象还是 ECMAScript 中的 Global (全局)对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。
在这里插入图片描述
bom就是学习对浏览器窗口的操作：我们所学习的内容：主要三大部分：History,Location,DOMwindow.alert()

3 Browser对象

在这里插入图片描述

1.Location对象

URL ：统一资源占位符，定位符
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
在这里插入图片描述

History对象

在这里插入图片描述

举个栗子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="跳转" onclick="baidu()" />
		<input type="button" name="" id="" value="跳转" onclick="ti()" />
		<input type="button" name="" id="" value="前进" onclick="goq()" />
		<input type="button" name="" id="" value="后退" onclick="goh()" />


		<script type="text/javascript">
			function baidu() {
				window.location.href = "https://www.baidu.com/";
			}
			function ti() {
				window.location.replace("https://www.baidu.com/");
			}
			function goq() {
				window.history.go(-1);
			}
			function goh() {
				window.history.go(1);
			}
		</script>
	</body>
</html>

document对象 DOM

对（html中的组成元素（标签，文本。。。））节点的操作

event 事件对象

鼠标，表单，焦点，键盘。。。
代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态

案例：键盘按键键码，鼠标点击位置控制套显示坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.onmousemove = function(e) {
				//相对于浏览器窗口的大小  鼠标点击的位置的坐标  
				console.log(e.clientX+"-"+e.clientY);
			}
			document.onkeyup = function(e){
				alert(e.keyCode);
			}
		</script>
	</body>
</html>

window 对象常用方法

在这里插入图片描述

clearTimeout方法
取消由 setTimeout() 方法设置的 timeout 小案例：输出10次你好，哈哈哈就停止timeout

//延迟一定的事件调用函数或者方法    
//1. setTimeout(要调用的函数名称,延迟的时间，参数，。。。。。); 
//setTimeout("aa()",5000);    
var i=0;    
function aa(){
        document.write("你好，哈哈哈");
         var timer = setTimeout("aa()",1000);
         i++; 
        if(i==10){   
        //停止setTimeout     
        clearTimeout(timer);     
         }  
 }  
 aa();

杵意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
5.4 js Bom编程,什么是 BOM 编程,.Location对象,History对象, document对象 DOM,event 事件对象

文章目录JavaScriptBOM编程1 BOM编程2 什么是 BOM 编程3 Browser对象1.Location对象History对象document对象 DOMevent 事件对象window 对象常用方法JavaScriptBOM编程1 BOM编程js：ECMAScript语法 DOMBOM基本语法: 注释，变量，运算符，数据类型（number string null boolean undefined），流程控制 : 顺序，分支 if else : switch case
复制链接

扫一扫