WebAPI详解
任何开发语言都有自己的API,那么API是什么呢？
API (Application Programming Interface )
概念: 是一些预先定义的函数
目的: 提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而无需访问源码,或理解内部工作机制的细节。
那么什么是WebAPI呢？
概念: 浏览器提供的一套操作浏览器功能和页面元素的API。
|
概念 |
| API |
应用程序编程接口，是一些预先定义的函数 |
| WebAPI |
浏览器提供的一套操作浏览器功能和页面元素的API。 |
接下来 我着重讲下JavaScript中的DOM和BOM
-
DOM---------文档对象模型
- 一套JavaScript动态操作网页内容的API(函数)
- 当页面被加载时，浏览器会创建页面的文档对象模型 生成一颗DOM树(HTML DOM模型被构造成对象的树)
- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点(标签、属性、文本、注释等)
- 元素：网页中的标签
- 属性：标签的属性
DOM主要由两部分构成(动态操作+网页内容)
-
动态操作-----增删改查
-
㈠ 查-----查元素、查属性、查内容
- 1.查元素
①根据id名获取元素 如果没有这个id名 那么会得到一个null。
参数：元素id名字符串
返回值：元素对象(又称为DOM对象) / null
<div id = 'main'></div>
<script>
var div = document.getElementById('main');
console.log(div);
</script>
②根据标签名获取元素 如果没有这个标签名 那么会得到一个空数组
参数：标签名字符串
返回值：标签数组(伪数组)
<input type = 'text' />
<script>
var inputs = document.getElementByTagName('input');
for(var i = 0 ; i < inputs.length; i++){
var input = inputs[i];
console.log(input);
}
</script>
③根据类名获取元素-----存在兼容性问题(IE8及以下不支持)，尽量少用
参数：类名字符串
返回值：类名数组(伪数组)
<div class = 'main'></div>
<script>
var mains = document.getElementByClassName('main');
for(var i = 0; i < mains.length; i++){
var main = main[i];
console.log(main);
}
</script>
④根据name属性值获取表单元素
name属性是表单元素特有的默认属性
参数：name属性值字符串
返回值：伪数组
<input type = 'text' name = 'txt' />
<script>
var inputs = document.getElementByName('txt');
for(var i = 0 ; i < inputs.length ; i++){
var input = inputs[i];
console.log(input);
}
</script>
⑤根据选择器获取元素
querySelector(‘选择器’); 只会找到满足条件的第一个对象 如果找不到则返回null
querySelectorAll(‘选择器’); 会找到所有满足条件的对象伪数组,如果找不到则返回空数组
<div class = 'box'></div>
<div class = 'box'></div>
<script>
var box = document.querySeletor(.box);
console.log(box);
var boxes = document.querySeletorAll(.box);
for(va i = 0 ; i < boxes.length; i++){
var box = boxes[i];
console.log(box);
}
</script>
| 查元素 |
语法 |
| 根据id名获取元素 |
document.getElementById(‘id名’); |
| 根据标签名获取元素 |
document.getElementsByTagName(‘标签名’); |
| 根据类名获取元素 |
document.getElementsByClassName ( “类名” ) ; |
| 根据name属性值获取表单元素 |
document.getElementsByName(‘表单元素name属性的值’); |
| 根据选择器获取第一个元素 |
querySelector(‘选择器’) ; |
| 根据选择器获取所有元素 |
querySelectorAll(‘选择器’); |
- 2.查属性
- ①点语法--------主要用于设置标准属性
获取元素的属性：元素.属性名
设置元素的属性：元素.属性名 = 属性值;
★★注意
★class在js中是一个关键字，如果想要获取类名需要使用className
★点语法获取元素的属性，只能获取行内样式的属性值，无法获取行外(内联/外联)样式的属性值，如果获取行外样式的属性值，会得到空字符串
★点语法设置元素的属性既可以设置行内样式的属性值，也可以设置行外(内联/外联)样式的属性值
★点语法获取到的一定是一个字符串，而且带单位
★如果css样式的属性中带有 - ，例如background-color，那么使用js获取和设置这些属性的时候需要使用驼峰命名(因为 - 符号不符合js的命名规范)
★修改类名需要注意会覆盖掉原本的类样式，所以一般是在原先类名的基础上加一个类，多个类名之间用空格隔开
★点语法能获取行内标准属性和js点语法动态添加的自定义属性，不能获取行内自定义属性和行外属性
- ②字符串语法
元素['属性名']
- ③attribute方法
设置属性 元素.setAttribute('属性名',属性值);
获取属性 元素.getAttribute('属性名');
删除属性 元素.removeAttribute('属性名');
▷用attribute方法删除属性是彻底删除 属性名和属性值都删除
▷用点语法删除属性只能删除属性值，不能删除属性名
★★注意
★用attribute方法设置的属性只能使用attribute方法来获取
★attribute方法能获取行内标准属性、行内自定义属性和setAttribute动态添加的属性，不能获取js点语法动态添加的自定义属性和行外属性
★★总结★
点语法操作标准属性
attribute方法操作自定义属性
- ④getComputedStyle(元素,null)
作用：获取一切样式属性
第一个参数是要获取的元素
第二个参数是伪元素，一般设置为null
返回值是一个对象(存储元素所有样式属性)
★★注意
★可以获取所有的样式属性
★获取的是字符串 带单位
★只能获取 不能修改
★★总结★★
应用于获取元素属性
| 查属性 |
语法 |
| 点语法 |
元素.属性名 |
| 字符串语法 |
元素 [‘属性名’] |
| attribute方法 |
元素.getAttribute(‘属性名’); |
| getComputedStyle |
getComputedStyle(元素,null) |
- 3.查内容
- console.log(innerText );
- console.log( innerHTML);
| innerHTML |
innerText |
| 获取的是元素中的内容(包含文字和标签) |
只能获取文字，无法识别标签 |
| 设置时会解析标签 |
设置时会把标签当做文本 |
| 没有浏览器兼容问题 |
非W3C标准语法 部分浏览器不支持 |
-
㈡ 增-----创建元素、将元素增加到页面
- 1.创建元素
- ①document.write();
解析字符串识别标签，慎重使用，有可能会覆盖原本内容
▷覆盖内容的原理(了解即可)
是因为编译器从上往下解析HTML的时候会形成一个文档流，这个文档流会在文档中所有的HTML标签解析后关闭。
不会覆盖的情况是如果在关闭这个文档流之前调用就不会覆盖原本内容
如果在关闭文档流之后调用，会再开启一个新的文档流，此时就会把上一个文档流的内容覆盖掉。
- ②innerHTML
解析字符串识别标签
直接赋值会替换原本内容，一般使用 += 拼接
创建元素过多时，会耗损性能
var box = document.getElementById('box');
box.innerHTML += '新内容新标签
';
- ③document.createElement();
动态创建一个DOM对象(注意创建的是一个空标签)
需要给标签设置属性
需要使用appendChild来添加到HTML中
var div = document.createElement('div');
document.body.appendChild(div);
| 创建元素的三种方法 |
作用及注意点 |
| document.write(); |
解析字符串识别标签，慎重使用，有可能会覆盖原本内容 |
| innerHTML |
同document.write(); 创建元素过多会耗损性能 ，因为字符串具有恒定性，每一次添加都会开辟新的空间 |
| document.createElement(); |
动态创建一个空对象在内存中，不会自动加到HTML中，需要手动添加属性，和需要使用appendChild手动添加到HTML中 |
-
2.增加到页面
-
①父元素.appendChild(子元素);
★如果是一个新的子元素，则默认会添加到最后
★如果是一个已经存在的子元素，相当于移动到最后面
★如果添加的元素中有子元素，子元素也会一起移动到最后面
-
②父元素.insertBefore(子元素,指定位置的前面);
★如果是一个新的子元素，则插入到指定的位置(第二个参数的前面)
★如果是已经存在的元素，则移动到指定的位置(第二个参数的前面)
★如果元素有子元素，则一起移动到指定的位置(第二个参数的前面)
-
㈢ 改-------------替换子元素
-
父元素.replaceChild(子元素,要被替换的元素)
★如果是一个新的子元素，则直接替换(将第二个参数替换掉)
★如果是已经存在的元素，则会将新元素移动到旧元素位置，并且将旧元素移除
★如果元素有子元素，则子元素会随父元素一起替换
-
㈣ 删-------------移除子元素
-
父元素.removeChild(子元素)
★父元素不能移出自己(不能自杀)
★父元素不能移出别人的子元素
★父元素只能移出自己的子元素
-
网页内容
-
㈠ 节点
- 在HTML文档中，一切皆节点
节点主要包括元素节点、属性节点、文本节点、注释节点、文档节点
- 节点三要素
节点类型 nodeType
节点名称 nodeName
节点值 nodeValue
- 查元素节点
| 查看元素节点 |
语法 |
| 查看元素节点类型 |
console.log ( 元素.nodeType ); |
| 查看元素节点名称 |
console.log ( 元素.nodeName ); |
| 查看元素节点值 |
console.log ( 元素.nodeValue ); |
| 查看属性节点 |
语法 |
| 查看属性节点类型 |
console.log ( 元素.attributes[0].nodeType ); |
| 查看属性节点名称 |
console.log ( 元素.attributes[0].nodeName ); |
| 查看属性节点值 |
console.log ( 元素.attributes[0].nodeValue ); |
| 获取子节点和子元素 |
语法 |
| 获取子节点 |
元素.childNodes |
| 获取子元素 |
元素.children |
| 获取兄弟节点和兄弟元素 |
语法 |
| 获取上一个节点 |
元素.previousSibling |
| 获取下一个节点 |
元素.nextSibling |
| 获取上一个元素 |
元素…nextElementSibling |
| 获取上一个节点 |
元素.previousElementSibling |
| 获取第一个子节点和第一个子元素 |
语法 |
| 获取第一个子节点 |
元素…firstChild |
| 获取第一个子元素 |
元素.firstElementChild |
| 获取最后一个节点和最后一个元素 |
语法 |
| 获取最后一个节点 |
元素.lastChild |
| 获取最后一个元素 |
元素.lastElementChild |
| 获取父节点 |
语法 |
| 获取父节点 |
元素.parentNode |
★注意
★一个元素的父节点一定是一个元素，只有元素才有子节点
- 克隆节点
★注意 克隆节点这个函数的参数是个布尔类型，默认为false
| 克隆节点 |
语法 |
| 克隆这个元素的一切内容(行内属性、子节点、内容) |
元素.cloneNode(true); |
| 克隆复制这个元素的本身(包含它的行内属性)，不包含它的内容 |
元素.cloneNode(false); |
- 增加节点和移出节点
★注意 移除节点只是解除父子关系，内存中还是有这个对象的
| 增加节点和移除节点 |
语法 |
| 增加节点 |
父节点.appendChild(子节点) ; |
| 移除节点 |
父节点.removeChild(子节点); |
-
事件
- 事件：触发响应机制
- Event接口表示在DOM中发生的任何事件，一些是用户生成的(例如鼠标或键盘事件)，而其他由API生成。
-
事件三要素
- 事件源：触发(被)事件的元素
- 事件类型：事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序：事件触发后要执行的代码(函数形式)
-
事件的基本使用
var box = document.getElementById('box');
box.onclick = function(){
console.log('代码会在box被点击后执行');
}
-
属性操作
- 非表单元素的属性：href、title、id、src、className
- innerHTML、innerText
- HTML转义符
| 符号 |
转义符 |
| ‘’ (双引号) |
" ; |
| ’ (单引号) |
&apos ; |
| < |
< ; |
| > |
> ; |
| 空格 |
; |
| @ |
© ; |
| 表单元素属性 |
|
| value |
用于大部分表单元素的内容获取(option除外) |
| type |
可以获取input标签的类型(输入框或复选框等) |
| disabled |
禁用属性 |
| checked |
复选框选中属性 |
| selected |
下拉菜单选中属性 |
| 自定义属性操作 |
作用 |
| 元素.setAttribute(‘属性名’,属性值); |
设置标签行内属性 |
| 元素.getAttribute(‘属性名’); |
获取标签行内属性 |
| 元素.removeAttribute(‘属性名’); |
移出标签行内属性 |
- 样式操作
- 使用style方式设置的样式显示在标签内
★通过样式属性设置宽高、位置的属性类型是字符串，需要加上单位px。
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
- 类名操作
- 修改类名不能直接使用class属性 因为class是关键字 要使用className属性修改
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'clearfix';
-
事件对象
- 存储与事件相关的数据的对象
- 当用户触发事件的时候，浏览器会自动捕捉与事件相关的信息，将鼠标坐标点、键盘按键等存入一个对象中，这个对象就叫做事件对象。
var box = document.getElementById('box');
box.onclick = function(e){
e = e || windwow.event;
console.log(e);
}
var box = document.getElementById('box');
box.onclick = function(e){
e = e || window.event;
console.log(e.screenX,e.screenY);
console.log(e.clientX,e.clientY);
console.log(e.pageX,e.pageY);
}
function getPagePoint(e){
e = e || window.event;
if(e.pageX){
return {
pageX : e.pageX;
pageY : e.pageY;
}
}else {
return {
pageX :clientX + document.documentElement.scrollLeft;
pageY : clientY + document.documentElement.scrollTop;
}
}
}
-
注册/移除事件
- 点语法注册事件
★如果注册多个同名事件，后者会覆盖前者
- addEventListener注册事件
★可以注册多个同名事件，如果有同名事件不会覆盖，而是依次执行
★第一个参数type：事件类型字符串 不要加on 例如 click
★第二个参数tlistener：事件处理函数
★第三个参数布尔类型：默认是false事件冒泡，true事件捕获
★IE8以前的版本不支持
- removeEventListener移除事件
★第一个参数type：事件类型字符串 不要加on
★第二个参数tlistener：事件处理函数
★第三个参数布尔类型：可以不传，默认是false(代表事件冒泡)，true事件捕获
★addEventListener要用对应的移除事件移除
★如果要移出某个事件处理函数，前提是具名函数，匿名函数无法移除
★IE8以前的版本不支持
<input type = 'button' value = '点我' id = 'btn'' />
var btn = document.getElementById('btn');'
btn.addEventListener('click',function(){
cosole.log('注册事件');'
},false);
btn.removeEventListener('click',function(){
console.log('移除事件');
},false);
- attachEvent注册事件
★只有IE8以前支持的方法，其他的浏览器都不支持
★第一个参数type：事件类型字符串 但是要加on
★第二个参数tlistener：事件处理函数
★后面设置的注册事件先执行，前面注册的事件后执行
- detachEvent移除事件
★只有IE8以前支持的方法，其他的浏览器都不支持
★第一个参数type：事件类型字符串 但是要加on
★第二个参数tlistener：事件处理函数
★attachEvent要用对应的移除事件移除
<input type = 'button' value = '点我' id = 'btn'' />
var btn = document.getElementById('btn');'
btn.attachEvent('onclick',function(){
console.log('IE8之前的注册事件');'
});
btn.detachEvent('onclick',function(){
console.log('IE8之前的移除事件');
});
| 注册/移除事件的方法 |
语法 |
| 点语法注册事件 |
事件源.事件类型 = 事件处理函数 |
| addEventListener注册事件 |
元素.addEventListener(type,tlistener,布尔类型) |
| 移除事件 |
元素.removeEventListener(type,tlistener,布尔类型) |
| attachEvent注册事件 |
元素.attachEvent(type,tlistener) |
| 移除事件 |
元素.detachEvent(type,tlistener) |
-
事件冒泡
- 如果一个元素的事件被触发，那么它的所有父级元素的同名事件也会被依次触发
- 元素→父元素→body→html→document→window
- 事件冒泡一直存在 当给所有的父级元素都添加同名事件就会触发
<input type = 'button' value = '按钮' id = 'btn' />
document.getElementById('btn').onclick = function(){
alert('按钮被点击了');'
} ;
document,body.onclick = function(){
alert('body被点击了');
};
document.documentElement.onclick = function(){
alert('html被点击了');
}
document,onclick = function(){
alert('document被点击了');'
};
window.onclick = function(){
alert('window被点击了');'
};
- 事件冒泡的好处
★如果想给父元素的多个子元素添加同个事件，我们只需给父元素添加事件即可，然后通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件
ul.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
- 冒泡的影响
★如果子元素与父元素有同名事件，并且代码逻辑相反，会有影响
- 阻止冒泡
e.stopPropagation();
e.cancelBubble = true ;
- 事件捕获
★跟冒泡相反，是从window开始一级一级往下触发同名事件
★捕获默认不存在，必须要用addEventListener注册事件，并给第三个参数传true才能看到捕获
addEventListener('click',function(){},true);
-
事件的三个阶段
- 事件捕获阶段
- 目标阶段
- 冒泡阶段
★当捕获与冒泡并存时，先看window是否是捕获，再一级一级到目标元素
-
阻止事件的默认行为
e.preventDefault();
| 事件对象的属性和方法 |
语法 |
| 获取事件类型 |
e.type |
| 事件对象获取当前事件的所属阶段 |
e.eventPhase |
| 获取用户按键 |
e.charCode /e.which /e.keyCode |
| 获取窗口位置 |
clientX / clientY |
| 获取页面位置 |
pageX/pageY |
| 获取触发事件的元素 |
e.target /e.srcElement |
| 取消默认行为 |
e.preventDefault(); |
| 常用的鼠标与键盘事件 |
语法 |
| 点击 |
onclick |
| 双击 |
ondbclick |
| 鼠标移入 |
onmouseover |
| 鼠标移出 |
onmouseout |
| 鼠标按下 |
onmousedown |
| 鼠标弹起 |
onmouseup |
| 鼠标移动 |
onmousemove |
| 键盘弹起 |
onkeyup |
| 键盘按下(不会过滤功能键，不区分大小写) |
onkeydown |
| 键盘按下(会过滤功能键，区分大小写) |
onkeypress |
| 获得焦点 |
onfocus |
| 失去焦点 |
onblur |
|
|
| 拖拽盒子 |
含义 |
| ondragstart |
拖拽开始 |
| ondrag |
拖拽中 (鼠标移动就触发) |
| ondragend |
拖拽结束(鼠标松开就触发) |
| 拖拽盒子至容器 |
含义 |
| ondragenter |
拖拽进入容器 |
| ondragleave |
拖拽离开容器 |
| ondragover |
配合ondrop使用(鼠标移动就会触发 要阻止默认行为) |
| ondrop |
拖拽结束 在容器范围内松手就触发 |
<a href = 'javascript:void(0)'></a>
URL.createObjectURL(图片);
| 三大家族 |
作用 |
| offset家族 |
获取元素自身的真实宽高与位置 |
| scroll家族 |
获取元素内容真实宽高与位置 |
| client家族 |
获取元素可视区域大小 |
- offset家族
★ offsetWidth、offsetHeight：获取的是元素自身的真实宽高(width+padding+border)，获取的是不带单位的number类型。
| offset家族 |
作用 |
| offsetWidth |
获取元素自身的真实宽度 |
| offsetHeight |
获取元素自身的真实高度 |
| offsetParent |
获取一个元素的定位父级 |
| offsetLeft |
获取元素的左外边框到定位父级左内边框的距离 |
| offsetTop |
获取元素的上外边框到定位父级上内边框的距离 |
- scroll家族
★同offset家族类似，获取的也是不带单位的number类型。
| scroll家族 |
作用 |
| scrollWidth |
获取元素内容真实的宽度 |
| scrollHeight |
获取元素内容真实的高度 |
| scrollLeft |
获取元素内容左滚动出去的距离 |
| scrollTop |
获取元素内容上滚动出去的距离 |
| onscroll |
元素的滚动事件，只要滚动就会触发 |
window.onscroll = function(){
console.log(document.documentElement.scrollTop);
console.log(document.documentElement.scrollLeft);
}
★如果不考虑浏览器的兼容问题 可以直接使用上面的代码获取网页滚动出去的距离
function getPageScroll(){
var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
return {
scrollLeft = x ;
scrollTop = y;
}
}
| client家族 |
作用 |
| clientWidth |
获取可视区域的宽 |
| clientHeight |
获取可视区域的高 |
| clientTop |
上边框 |
| clientLeft |
左边框 |
window.onsize = function(){
console.log(document,documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
★如果不考虑浏览器的兼容问题 可以直接使用上面的代码获取网页可视区域的大小
一般用于响应式布局
function getClientSize(){
var x = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
var y = window.innerHeight || document.documentElement.clientHeight || document.body.clientHieght ||0;
return {
clientWidth = x;
cilentHeight = y;
}
}
-
BOM-----------浏览器对象模型
- 定义了一套操作浏览器功能的API
- 浏览器对象模型提供了对立于内容的、可以与浏览器窗口进行互动的对象结构
| BOM对象主要由五大对象组成 |
作用 |
| window对象 |
当前浏览器窗口 |
| location对象 |
包含当前页面的URL信息 |
| history对象 |
主要用于记录当前窗口的历史记录 |
| navigator对象 |
当前浏览器的信息 |
| screen对象 |
获取用户电脑屏幕的分辨率 |
-
window对象
-
三大特点
-
1.是浏览器的顶级对象(所有的全局变量、全局函数、dom对象都是window对象的属性)
-
2.只要是window对象的属性和方法，在使用的时候都可以省略前面的window
-
3.window对象有一个特殊的默认属性name(name的值一定是字符串类型)
-
对话框
| 对话框 |
作用 |
| alert(); |
弹出框 |
| prompt(); |
输入框 |
| confirm(); |
确认框 |
-
两个常用方法
-
window.open(URL,target,feature,布尔类型);-----------打开一个窗口
-
第一个参数是： 要打开的网址URL
第二个参数是：要替换当前窗口(_self)还是打开一个新窗口(_blank)
第三个参数是：新窗口的特征 大小、位置等(必须第二个参数设置(_blank)新窗口打开才有效)
第四个参数是：布尔类型 true/false 把新开的窗口加入/不加入到浏览器历史内容
返回值：是新打开的window对象
-
window.close();-----------关闭一个窗口
-
参数就是你想要关闭的窗口对象，如果不写，默认就是关闭自己
-
三个事件-----记录了浏览器窗口从打开到关闭的三个过程
| window对象的三个事件 |
含义 |
| window.onload |
界面上所有的内容加载完毕之后才触发这个事件 |
| window.onbeforeunload |
界面在关闭之前会触发这个事件 |
| window.onunload |
界面在关闭的那一瞬间会触发这个事件 |
-
location对象
-
三个方法
- url：全球统一的资源定位符
- url = 协议名(http) + ip地址(域名) + 端口号 + 资源路径
| location对象三个方法 |
语法 |
| 打开新网页 (可以回退) |
location.assign(‘新网页的url’) ; |
| 替换当前网页(不能回退) |
location.replace(‘要替换的网页url’); |
| 刷新当前网页 |
location.reload() |
| location对象信息查看 |
语法 |
| 资源定位符 |
location.hash |
| 主机 |
location.host |
| 主机名 |
location.hostname |
| 端口号 |
location.port |
| 完整的url路径 |
location.href |
| 资源路径 |
location.pathname |
| url协议 |
location.protocol |
| url请求的参数 |
location.search |
-
history对象
-
两个方法
- history对象主要用于记录当前窗口的历史记录
- history对象主要作用是前进和后退网页
| history对象两个方法 |
语法 |
| 前进 |
history.forward(); |
| 后退 |
history.back(); |
| navigator对象信息查看 |
语法 |
| 当前浏览器版本信息 |
navigator.appVersion |
| 当前浏览器的系统平台类型 |
navigator.platform |
| 当前浏览器类型 |
navigator.userAgent |
| 获取用户电脑屏幕的分辨率 |
语法 |
| 屏幕宽度 |
screen.width |
| 屏幕高度 |
screen.height |
-
localStorage与sessionStorage
-
localStorage
- 本地存储 将数据存储到浏览器
| 数据的处理 |
语法 |
| 存数据 |
localStorage.setItem(‘属性名’,‘属性值’) ; |
| 取数据 |
localStorage.getItem(‘属性名’) ; |
| 删数据 |
localStorage.removeItem(‘属性名’); |
| 清空数据 |
localStorage.clear(); |
★注意
★存储的数据只能是字符串类型，如果是其他数据类型则会自动调用toString()方法转为字符串
★永久存储，除非自己删除，否则一直存在于浏览器
★删数据是一个一个删除数据
★清空数据是一次性删除所有数据
-
sessionStorage
- 相当于短命版的localStorage，其他用法完全一致
| 数据的处理 |
语法 |
| 存数据 |
sessionStorage.setItem(‘属性名’,‘属性值’) ; |
| 取数据 |
sessionStorage.getItem(‘属性名’) ; |
| 删数据 |
sessionStorage.removeItem(‘属性名’); |
| 清空数据 |
sessionStorage.clear(); |
-
localStorage与sessionStorage的区别
- 相同点：作用一致，都是本地存储数据，存储的数据只能是字符串类型，如果是其他数据类型则会自动调用toString()方法转为字符串
- 不同点:HP值不同
- localStorage是永久存储，存储在硬盘中(HP值无限)
- sessionStorage是一次性存储，存储在内存中(HP值一条命)
-
经纬度(了解即可)
- 获取经纬度：其实就是获取当前设备的地理位置
★注意 谷歌浏览器无法获取
navigator.geolocation.getCurrentPosition(function(location){
console.log(location);
console.log(location.coords.longitude);
console.log(location.coords.latitude);
})
-
定时器
- 含义：某一件事(某一段代码)并不是马上执行，而是隔一段时间执行
-
setInterval(handler,timeout);
- 第一个参数：要执行的一段代码(函数)
第二个参数：时间间隔 单位毫秒
返回值：这个定时器的id
var timeId = null;
timeId = setInterval(function( ){
console.log('这段代码每隔1s执行一次');
},1000)
clearInterval(timeId);
-
setTimeout(handler,timeout);
- 第一个参数：要执行的一段代码(函数)
第二个参数：时间间隔 单位毫秒
返回值：这个定时器的id，setTimeout执行一次之后就会自动关闭，所以一般不用
setTimeout(function(){
console.log('这段代码1s后执行一次，执行完毕之后定时器自动关闭');
},1000)
| 永久性定时器与一次性定时器 |
语法 |
| 创建永久定时器 |
setInterval(function( ){ },时间间隔); |
| 清除定时器 |
clearInterval(定时器id); |
| 创建一次性定时器 |
setTimeout(function( ){ },时间间隔); |
- ★★总结★★
- 定时器setTimeout与setInterval唯一的区别就是 setTimeout定时器只会执行一次
- 如果你想让这段代码一段时间后只执行一次，则使用setTimeout
- 如果你想让这段代码每隔一段时间执行一次(执行多次)，使用setInterval
本文由本人一字一句敲出来哒 希望对初学者有帮助~~~~
