WebAPI

最新推荐文章于 2023-07-10 11:49:04 发布

木兮梓

最新推荐文章于 2023-07-10 11:49:04 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_43064324/article/details/88829488

版权

Web API

Web API介绍

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

BOM

浏览器对象模型一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

特殊对象：navigator.userAgent(获取用户当前使用设备信息)

//当我们用window的成员的时候，window可以省略
window.document			window.alert('hello');
//定义全局变量都属于window，都是window对象的属性
var age = 18
//name是window的属性，是字符串类型
var name = 123  //输出name时为字符串类型
//top是window的属性，只能获取不能赋值

对话框

alert prompt confirm

页面加载事件

BOM—— onload 页面加载完成之后执行（window.onload = function() {}）

页面加载完成之后，页面上所有的元素创建完毕，并且引用的外部资源下载完毕（js. css. 图片）

onunload 页面卸载的时候执行（onunload = function() {}）

在onunload中所有的对话框都无法使用，window对象被冻结

页面前进和后退

history.forward(前进) history.back(后退)

history.go()(当值为1 前进，值为-1时后退)

location

location.href —— url地址 location.assign —— 委派(和href作用一样，都可以让页面跳转到指定地方)

location.replace —— 替换地址栏中地址，但不会记录历史

location.reload —— 重新加载页面参数：true —— 强制从服务器获取页面

false —— 如果浏览器有缓存则从缓存获取页面

URL

统一资源定位符(Uniform Resource Locator )

URL的组成

scheme://host:port/path?query#fragment
scheme:通信协议 		常用的http、ftp、maito等
host：主机				服务器（计算机）域名系统（DNS）主机名或IP地址。
port：端口号			整数，可选，省略时使用方案的默认端口，如http的默认端口为80.
path：路径				由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query：查询		可选，用于给动态网页传递参数，可有多个数，用‘&’符号隔开，每个参数的名和值用‘=’符号隔开
fragment：信息片段		字符串，锚点。

BOM定时器

setTimeout

定时炸弹—— 隔一段时间执行，并且只会执行一次

setTimeout()两个参数第一个参数：要执行的函数第二个参数：间隔的时间，单位是毫秒

取消定时器 —— clearTimeout()

setInterval

闹钟 —— 隔一段时间执行，会重复执行

var btn1 = document.getElementById('btn1');
var timerId;
btn1.onclick = function () {
    timerId = setInterval(function() {
        console.log('早上8点了');
    },3000);
}
//关闭闹钟
var btn2 = document.getElementById('btn2');
btn2.onclick = function() {
    clearInterval(timerId);
}

三组与大小、位置相关的属性

offset

偏移量 —— 获取box的坐标（offsetLeft、offsetTop）（距离offsetParent的横向偏移和纵向偏移）

获取box的大小（offsetWidth、offsetHeight）(包括边框和padding)

获取距离当前元素最近的定位父元素（offsetParent）(如果没有定位父元素则默认body)

client

偏移量 —— clientLeft(获取border-left的宽度) clientTop(border-top的宽度)

获取大小（clientWidth、clientHeight）(包括padding，但不包括边框和滚动条)

scroll

偏移量 —— scrollLeft、scrollTop（滚动条滚动出去的距离（横向、纵向））

scrollWidth、scrollHeight(内容的大小，包括padding和未显示的内容，不包括滚动条)

onscroll —— 滚动事件

DOM

文档对象模型一套操作页面元素的API

可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM经常进行的操作

获取元素对元素进行操作(设置其属性或调用其方法) 动态创建元素事件（什么时机做相应的操作）

获取页面元素

根据id获取元素（getElementById）

根据标签名获取元素（getElementsByTagName）

其他获取方法

1.根据标签的class属性获取元素

浏览器兼容——IE9以后支持 document.getElementsByClassName();

2.根据选择器查找元素 ——浏览器兼容：IE8以后支持

document.querySelector(); （只能获取到一个元素）

document.querySelectorAll() (可以获取到所有元素)

节点

兄弟节点：nextSibling 下一个兄弟节点 nextElementSibling 下一个兄弟元素

previousSibling 上一个兄弟节点 previousElementSibling 上一个兄弟元素

子元素：children 父节点： parentNode

加入子节点： appendChild 移除子元素： removeChild

动态创建元素

document.write() 当点击按钮的时候输出内容，会把之前的整个页面覆盖掉

element.innerHTML 创建简单元素时使用

！！使用innerHTML这种方式移动子元素的话，如果子元素有事件，移动之后元素的事件丢失

！！当使用innerHTML清空子元素的时候，如果子元素有事件，此时会发生内存泄漏

document.createElement() 创建复杂结构，或者要给创建的元素注册事件时使用

把元素插入到页面的指定位置 insertBefore()

把当前元素的标签进行替换 replaceChild()

事件

当什么时候做什么事情——触发响应

//获取按钮
	var btn = document.getElementById('btn');
	//2.给按钮注册事件
	//事件名称  click
	//事件源：谁触发的事件
	//事件处理函数
	btn.onclick = function () {

	}


	//给div注册事件
	var div = document.getElementById("main");
	div.onclick = function () {
		
	}

	//给多个目标注册事件
	var btn = document.getElementById('btn');
	btn.addEventListener('click', function () {
    	alert('hello world');
	})

事件操作

当鼠标移入 —— onmouseover onmouseenter(不会触发事件冒泡)

当鼠标移出 —— onmouseout onmouseleave(不会触发事件冒泡)

！触发子元素的mouseover，会冒泡到父元素上

当鼠标移动 —— onmousemove

获取焦点 —— onfocus

移除事件 —— btn.onclick = null(第一种)

btn.removeEventListener(‘click’, btnClick)(第二种)

//如果想要移除事件，注册事件的时候不能使用匿名函数
function btnClick() {
    alert('hello world');
    btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);

事件冒泡

! addEventListener 的第三个参数为false的时候：事件冒泡

！addEventListener 的第三个参数为true的时候：事件捕获

事件对象

var btn = document.getElementById('btn');
btn.onclick = function (e) {
    //DOM标准中，是给事件处理函数一个参数
    //e就是事件对象，在老版本的IE中获取事件对象的方式——window.event
    e = e || window.event;
}

e.target —— target是真正触发的事件(老版本IE中 srcElement)

e.currentTarget —— 事件处理函数所属的对象

e.type —— 目前所属事件

this.offset(Left\Top) —— 获取盒子在页面中的位置

keydown keyup —— 键盘按下的时候、键盘弹起的时候 e.keyCode(键盘码)

keydown 所按的键还没有落入文本框 keyup 键盘弹起的时候按的键已经落入文本框

e.clientX e.clientY —— 获取的鼠标在浏览器的可视区域的坐标

e.pageX e.pageY —— 获取的鼠标在整个页面的坐标（有兼容性问题，IE9以后才支持）

//处理pageXY的兼容性问题
//输出页面滚动出去的距离
function getScroll() {
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    return {
        scrollLeft : scrollLeft,
        scrollTop : scrollTop
    }
}
//获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {
    var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
    var pageY = e.pageY || e.clientY + getScroll().scrollTop;
    return {
        pageX : pageX,
        pageY : pageY
    }
}

取消事件默认行为的执行

1.return false 2.e.preventDefault() —— DOM标准方法 3.IE老版本 —— e.returnValue = false

阻止冒泡 —— e.stopPropagation()(标准DOM方法) e.cancelBubble = true;(IE老版本)

事件注册的第三种方法

！浏览器兼容性问题，专为IE9-10版本使用

var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
    alert('hello world')
})

兼容性处理

//处理注册事件的兼容性问题
function addEventListener(element, eventName, fn) {
    if (element.addEventListener) {
        element.addEventListener(eventName, fn);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        //相当于element.onclick = fn;
        element['on' + eventName] = fn;
    }
}
//处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
    if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);
    } else if (element.detachEvent) {
        element.datachEvent('on' + eventName, fn);
    } else {
        element.['on' + eventName] = null;
    }
}

属性操作

非表单元素的属性

href、title、id、src、className

! 为什么DOM对象的对应的标签的class属性的名字叫做className。因为class在js中是关键字，而关键字不可以作为变量或者属性的名字

!打印对象——console.dir();

表单元素属性

value用于大部分表单元素的内容获取（option除外）

type可以获取input标签的类型（输入框或复选框等）

disabled禁用属性

checked复选框选中属性

selected下拉菜单选中属性

设置自定义属性

!获取自定义属性的值—— console.log(box.getAttribute(‘age’));

设置—— box.setAttribute(‘sex’,‘male’);

移除—— box.removeAttribute(‘age’);

取消a标签的默认行为

<a id="link" href="http://www.baidu.com">百度</a>
<script>
var link = document.getElementById('link');
    link.onclick = function () {
        //取消a标签的默认行为（跳转到href）
        return false;
    }
</script>

innerHTML和innerText

获取开始标签和结束标签之间的内容
innerHTML     获取内容的时候   如果内容中有标签   会把标签页获取到
通过innerHTML设置内容，如果内容中带标签，会以HTML的方式来解析
innerText        获取内容的时候，如果内容中有标签   会把标签过滤掉
通过innerText设置内容，如果内容中带标签，在网页上会把标签显示出来
清空标签里面的内容：    	box.innerHTML = ' '; //清空内容

HTML转义符

"			&quot;
'			&apos;
&			&amp;
<			&lt;   // less than   小于
>			&gt;   // great than  大于
空格		   &nbsp;
©			&copy;

innerText和textContent

innerText最早出现在IE浏览器中
2016年将innerText 在DOM中规定为正式的标准属性

相同点：都会把标签过滤
不同点：textContent会原封不动的把内容输出
	   innerText会把前后的空白和一些换行去掉

兼容性处理

var box = document.getElementById('box');

function getInnerText(element) {
    //判断当前浏览器  是否支持元素的innerText属性，支持innerText  ——使用element.innerText获取内容
    //如果不支持innerText属性，使用element.textContent获取内容
    if(typeof element.innerText === 'string') {
        return element.innerText;
    }else {
        return element.textContent;
    }
}

木兮梓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI

Web APIWeb API介绍API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。Web API的概念浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）BOM浏览器对象模型 ...
复制链接

扫一扫