BOM、BOM学习
BOM
BOM是指浏览器对象模型， 通过BOM来操作浏览器提供的某些功能或设置
open() - 打开新窗口
close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)
history.forward() // 前进一页，其实也是window的属性，window.history.forward()
history.back() // 后退一页
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面
alert("你看到了吗？"); 警告框
confirm("你确定吗？") 确认框
prompt("请在下方输入","你的答案") 提示框。
计时器
计时事件:在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行
setTimeout() 一段时间后做一些事情;参数1是个函数,参数2是毫秒,表示多久后执行
var timer = setTimeout(function(){alert(123);}, 3000)
取消setTimeout设置
clearTimeout(timer); 参数必须是由 setTimeout() 返回的 ID 值。
setInterval() 每隔一段时间做一些事情
setInterval("JS语句",时间间隔)
var timer = setInterval(function(){console.log(123);}, 3000)
clearInterval(timer); 参数必须是由 setInterval() 返回的 ID 值。
clearInterval(setinterval返回的ID值) 该方法可取消由 setInterval() 设置的 timeout。
取消setInterval设置
clearInterval(timer); 参数必须是由 setInterval() 返回的 ID 值。
DOM
DOM 是指文档对象模型，当网页被加载时，浏览器会创建文档对象模型,(将html的内容进行结构化成DOM树),通过它，可以访问HTML文档的所有元素。
查找标签
[^1] 所有的参数都是字符串形式
[^2] 如果查找出来的内容是个数组，那么就可以通过索引来取对应的标签对象
document.getElementById("标签ID") 根据ID获取一个标签,返回值就是这个标签
document.getElementsByClassName("标签类名") 根据class属性获取（标签类名为该值的都会被查找到,放进一个数组里返回)
document.getElementsByTagName("标签名") 根据标签名获取标签集,返回值就是这个标签集
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点
语法:createElement("标签名")
var divEle = document.createElement("a"); //创建标签
divEle.href = "https://www.baidu.com"; //给a标签设置href属性的值
divEle.innerText="哈利路亚"; //为了能显示出来,给标签加文字
var cc=document.getElementById("div1"); //获取标签
cc.appendChild(divEle); //往这个标签里面添加自己创建的标签
添加节点
cc.appendChild(divEle); //父节点.appendChild(子节点); 都不需要双引号
删除节点
语法：获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
var aa = document.getElementById("div1"); //父节点
var ccc = document.getElementById("div2"); //子节点
aa.removeChild(ccc); /父节点删除子节点
替换节点：
语法：somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉
属性节点
var divEle = document.getElementById("d1")
divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签
innerHTML能识别标签(注意:标签必须被引号裹起来,不能跟里面的引号冲突),inneText则不能,举例👇
var aa = document.getElementById("div1");
aa.innerHTML='<a href="https://www.baidu.com">asdf</a>';
设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>" #能识别成一个p标签
attribute操作(取,设,删属性和值)
给标签设置属性,和值
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."
获取标签值的操作
语法：elementNode.value
适用于用户输入或者选择类型的标签：input,select,textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
class 的操作
className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
var tt = document.getElementById("div1");
tt.classList //返回值是个数组
tt.classList.contains(cls) // 数组种存在返回true，否则返回false
指定CSS操作
语法:对象.style.css属性 = "xxx”;
[^1] 对于没有中横线的CSS属性一般直接使用style.属性名即可
[^2] 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.backgroundColor="red"
事件
onclick 鼠标单击后,触发...
ondblclick 鼠标双击后,触发
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
事件的绑定方式 (scritpt标签 都放在body标签下面写)
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵"; #哪个标签触发的这个事件，this就指向谁
}
</script>
绑定事件的方式(了解即可,过时了)
<div>
<input id="username" type="text" onfocus="f2(this);">
</div>
<script>
function f2(ths) {
ths.style.backgroundColor = 'orange';
}
</script>
window.onload(了解)
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
.onload()函数存在覆盖现象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
我是div1
</div>
<div id="d2">
我是div2
</div>
<img src="http://www.xiaohuar.com/d/file/20190228/44cc1df1dd7ad79760eab9b069eecab8.jpg" alt="">
</body>
<script src="test.js"></script>
<script>
window.onload = function () {
var dive = document.getElementById('d1');
dive.style.backgroundColor = 'red';
}
</script>
</html>
计时器事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input id="inpu" type="text">
<button id="but1">开始</button>
<button id="but2">结束</button>
</div>
</body>
<script>
var a;
var b1 = document.getElementById("but1");
var b2 = document.getElementById("but2");
function timer(){
var time1 = new Date;
time2 = time1.toLocaleString();
var inpu = document.getElementById("inpu");
inpu.value = time2;
}
b1.onclick = function(){
timer();
if(a===undefined){
a = setInterval(timer,1000);
}
};
b2.onclick = function(){
clearInterval(a);
a =undefined;
}
</script>
</html>
代码注释:
先定义三个标签,一个input标签显示框,两个点击的按钮,用button,用script给他们定义
在script里面
先获取到两个标签button
定义一个空的变量
定义一个时间函数,内容:获取12小时制时间,每调用一次,就把input标签的value值该成这个时间
定义一个点击开始按钮的事件,内容:执行时间函数,目的是提高显示的速度,消除卡顿,再设置间断执行
并且里面做判断,如果哪个空的变量还是空,就调用间断执行方法,目的:始终只有一个开始事件
再次定义结束按钮事件,内容:清空间断执行的设置,将变量的值初始化.
地区选择事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select name="" id="province">
<option value="">请选择省:</option>
//如果option的value没有设置值,返回的是文本内容
</select>
<select name="" id="sity">
<option value=""></option>
</select>
</body>
<script>
data={"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var p = document.getElementById("province");
var c = document.getElementById("sity");
for(var i in data){
var option = document.createElement("option");
//创建option标签
option.innerHTML = i;
//给option标签设置内容
p.appendChild(option);
//将option添加到省的标签中
}
p.onchange =function(){
//创建p标签的onchange事件,用户选择了的事件
var gg = (this.options[this.selectedIndex]).innerHTML;
//this.options意思市获取到所有option标签,返回值是个数组,再通过this.selectedIndex获取到用户选择的内容的下标,记得前面的值加(),再通过.innerHTML获取到文本内容
var kys = data[gg];
//去字典里面找到该文本内容对应的所有市
c.innerHTML="";
//给市级框文本内容清空,原因:点击了2次,没有清空会造成累计
for(var i=0;i<kys.length;i++){
//for循环,声明个技术器,当用户选择的省,对应的市数量等于计数器时,就停止,计数器用执行完了再累加
var option1 = document.createElement("option");
//创建option标签
option1.innerHTML = kys[i];
//给option标签设置文本内容
c.appendChild(option1);}
//给市标签添加option标签}
}
</script>
</html>
