常用Web Apis总结
什么是web api
Web API 顾名思义,是可以使用 HTTP 协议访问的 Web API。它是一个概念而不是一项技术。我们可以使用不同的技术(例如 JavaScript、Python等)构建 Web API,是一种允许不同软件应用程序之间进行通信的工具。js引擎中内置了window对象,我们常常用他来操作界面,如:
```js
window.alert(
`相等吗?
${window.prompt === prompt}
${window.alert === alert}
${window.confirm === confirm} `)
同时还提供有:
- history(历史对象back、go、forward);
- location(当前网址href、reload);
- localstorage(本地键值对数据库关闭不丢失数据:setitem、clear、getItem)
- sessionstorage关闭后数据丢书的回话机制
- close关闭窗口
- open打开窗口
DOM对象模型
在前端开发中,我们常常使用 DOM (Document Object Model)操作网页的结构和内容,而使用 Web API 与服务器进行数据交互。
通过选择不同的对象,展示不同的内容
```js
// 根据id属性获取元素对象
document.getElementById('password')
// 返回 body元素对象
document.body
// 返回 head元素对象
document.head
// 返回 当前窗口的标题
document.title
// 返回 当前窗口的url地址
document.URL
```
能实现的功能有:
- * 获取按钮等控件querySelector('#go')
- * 注册事件处理addEventListener
- * 获取网页内容控件(元素a、p、textarea)中的value属性
- * 添加元素insertAdjacentHtml
- * 删除元素remove、outerHtml=""
- * 改变内容:innertest、style.color
- * 控制元素是否显示display = none
- * 和服务器通信http/socket
- * 浏览器存储
- * 本地文件访问
- * 定位
元素通用属性
继承关系如下:
EventTarget <- Node <- Document <- Element <- HTMLElement <- HTMLAnchorElement
从根节点出发,包含的属性和功能有:
* EventTarge
包含addEventListener/removeEventListener
* Node
* childNode子节点对象
* textContent获取所有文本内容
* parentElement父节点对象
* Dcoument
* querySelector
* querySelectorAll
* createElement
* Element
* id
* children子元素(只读)
* innerHtml内部
* outerHtml整个
* getElementByxx
* querySelector
* closet最近上一级(可含自身)
* after添加弟弟节点
* before添加哥哥节点
* append追加儿子节点
* insertAdjacentHtml直接创建
* remove=outerHtml
* getAttribute获取属性
* setAttribute设置属性
* removeAttribute删除属性
* HTMLElement
* innerText
* outerText
* focus
* click
* style
元素自身属性
* a(HtmlAnchorElement)有href、protocol、host、origin属性
* button(HtmlButtonElement)有disable属性
* img(HtmlImageElement)有src、alt、height、width属性
* input(HtmlInputElement)有value、name、type、disable属性
事件处理
* 注册事件处理:addEventListener
```js
// 鼠标点击事件
element.addEventListener("click", handleFunc )
// 键盘事件
element.addEventListener("keydown", handleFunc )
```
* html内联方式,写在节点内部,不推荐
* 谁注册谁响应,也可以注册针对整个网页的处理函数
```js
document.addEventListener("keydown", salaryStats);
```
* onload属性,针对加载完后执行的JavaScript代码
```js
window.onload = () => { // 执行代码 };
```
* 事件处理顺序
红色向下依次为捕获阶段,目标阶段和冒泡阶段。
JQuery库
JQuery本身是一个构造函数,里面是一个css选择器。符号$等价于JQuery,方便简写。
* 安装
```
// 下载jquery.js文件后保存到远程服务器上,使用标签script加载
<head> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> </head>
```
* 添加appendto、prependto、insertBefore、insertAfter
* 删除$('xx').remove()
* 属性操作
* 获取attr()
* 设置attr(x,y)
* 删除removeAttr()
* style设置$(this).css('color', 'red')
* 构建异步消息:
```js
$.get('/api/mgr/signin')
$.post('/api/mgr/signin',
username:'byhy',
password:'abc'
// 或者
$.get({
url : '/api/mgr/signin',
$.post({
url : '/api/mgr/signin',
data: {
username:'byhy',
password:'abc',
```
* 解析响应消息:
```js
$.ajax({
url: '/api/mgr/signin',
type: 'POST',
data: 'username=byhy&password=88888888',
// 正确返回
success: function(data, textStatus, xhr) {
// 获取状态码
console.log(textStatus);
// 获取所有消息头
console.log(xhr.getAllResponseHeaders());
// 获取某个消息头
console.log(xhr.getResponseHeader("content-length"));