文章目录
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();