API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是为了提供应用人员与开发人员基于某个软件或硬件得以访问一组历程的能力,无需访问源代码,无需与其他内部工作机制的细节,就能直接调用使用就行。
JS中的Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM);
主要针对浏览器来做交互之类的。
DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面、窗口和文档。
三大类:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
文档 | |||
---|---|---|---|
根元素: | |||
元素: | 元素: | ||
元素: | 属性:href | 元素: | 元素: |
文本:“文档标题” | 文本:“链接 | 文本”标签 |
DOM树又称为文档树,把文档映射成树形结构,通过节点对象的处理,来加入到页面当中去。
获取元素是为了对页面上的东西进行更好的操作。
语法:document.getElementById(元素的ID值)
通过ID去获取元素对象
语法:document.getElementsByTaName(标签的名字);
根据标签名去获取元素对象(可以获取一个标签组)
注意事项:
当元素增加时,集合也会跟这增加
通过类名获取: getElementsByClassName(“类名”)
指定选择器(一个的情况下): querySelector(‘选择器’)
指定选择器:querySelectorAll(‘选择器’)
选择器前面需要加上指定符号
获取body document.body
获取HTML document.documnetElement
事件源.事件类型=function{
事件处理程序
}
鼠标事件 | 触发事件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
element.innerText 空格和换行会去除 不会识别html
element.innerHTML 会保留空格跟换行 会识别html
元素对象.属性名
元素对象.属性名=值
var time = new Date().getHours();
if (time >= 8 && time < 12) {
alert("早上好");
document.body.style.background = "url(img/01.png) no-repeat center center ";
} else if (time >= 12 && time < 18) {
alert("中午好");
document.body.style.background = "url(img/02.png) no-repeat center center ";
} else if (time >= 18 && time < 24) {
alert("下午好");
document.body.style.background = "url(img/03.png) no-repeat center center ";
}
常用的属性有:type value checked selected disabled
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名=值
表单元素中有一些属性:disabled、checked、selected,元素对象的这些属性的值是布尔型。
value在表单中添加内容
div.disabled=true;使按钮不能继续被点击
全选<input type="checkbox" id="tbn1"><br>
<input type="checkbox" class="tbn2">
<input type="checkbox" class="tbn2">
<input type="checkbox" class="tbn2">
<input type="checkbox" class="tbn2"> <script>
//点击大的全选 小的全部选中 取消全部取消
var tbn1 = document.getElementById("tbn1");
var tbns = document.querySelectorAll(".tbn2");
tbn1.onchange = function() {
var cun = this.checked; //获取大复选框的选中状态 true false
if (cun == true) {
for (var i = 0; i < tbns.length; i++) {
tbns[i].checked = true;
}
} else {
for (var i = 0; i < tbns.length; i++) {
tbns[i].checked = false;
}
}
console.log(this.checked);
};
script>
常用的样式属性:
<button class="btn">按钮1button>
<button class="btn">按钮2button>
<button class="btn">按钮3button>
<script>
// 要求点击不同的按钮背景图不同
var btns = document.querySelectorAll(".btn");
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function() {
// console.log(1)
var index = this.index;
// console.log("url(img/0" + (index + 1) + ".png) no-repeat center center ")
document.body.style.background = "url(img/0" + (index + 1) + ".png) no-repeat center center ";
}
}
script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
区别
<div id="demo" index="1" class="nav">div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
script>
第一个是设置内置属性值;第二个是设置自定义属性值;
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是
element.removeAttribute(“属性”);
(1)设置属性:
(2)获取属性:element.dataset.index
节点:节点类型==>nodeType 节点名称==>nodeName 节点值==>nodeValue
document.createElements(‘toName’);
是一个动态创建的节点
<button id="btn1">
绑定方法一
button>
<button onclick='fun'>
绑定方法二
button>
<button id="btn3">
绑定方法三
button>
<script>
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
alert(1);
}
var fun=function(){
alert(2);
}
var btn3=docment.querySelector("#btn3");
btn3.addEventListener("click",function(){
alert(3);
},false);
script>
addEventListener() 事件监听(IE9以后支持)
div.addEventListener(“click”,function(){},false);
event 为事件对象
event.target是返回触发时间的对象
event是事件对象的事件相关的一系列信息的集合
鼠标事件:MouseEvent 键盘事件:EeyboardEvent
window 对象给我们提供了 2 个非常好用的方法-定时器。
普通函数是按照代码顺序直接调用。 简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。 例如:定时器中的调用函数,事件处理函数,也是回调函数。 以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。
1
2
3
点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信。
手机号码:
以下代码执行的结果是什么?
console.log(1);
setTimeout(function () {
console.log(3);
}, 1000);
console.log(2);
以下代码执行的结果是什么?
console.log(1);
setTimeout(function () {
console.log(3);
}, 0);
console.log(2);
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
console.log(1);
setTimeout(function () {
console.log(3);
}, 0);
console.log(2);
## 3.1 JS 是单线程
[外链图片转存中...(img-Id8UiMIi-1636445027392)]
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
## 3.2 同步任务和异步任务
### 同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
### 异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
[外链图片转存中...(img-bOs0RW41-1636445027393)]
[外链图片转存中...(img-ygMA3KfJ-1636445027394)]