开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

I 预备知识

1.1 常见的客户端 API

• 文档对象模型 API（Document Object Model Application Programming Interfaces ） 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。

//重载
document.querySelector('#reload').addEventListener('click', () => {
  document.location.reload();
});

• 从服务器获取数据的 API:使用 fetch() 发起 HTTP 请求，fetch()是基于 Promise 的、用于替代 XMLHttpRequest 的方法。

//使用 fetch() 发起 HTTP 请求，fetch()是基于 Promise 的、用于替代 XMLHttpRequest 的方法。
//使用 getUserMedia() 访问用户的摄像头和麦克风
//使用 showOpenFilePicker()  请求用户选择文件以供访问

• 用于绘制和操作图形的 API： 画布（Canvas） 和 WebGL API 可以创建生动的 2D 和 3D 图像。
• 音频和视频 API： HTMLMediaElement 、Web Audio API和 WebRTC 。HTML5 提供了用于在文档中嵌入富媒体的元素 — <video>和<audio>,HTMLMediaElement对<audio>和<video>两个元素都是可用的。
• 设备 API：访问设备位置数据的地理定位 API（Geolocation API） 、Notifications API允许浏览器发起系统通知、振动硬件（Vibration API）告诉用户 Web 应用程序有用的更新可用。
• 客户端存储 API：使用Web Storage API的简单的键 - 值来存储一些简单的数据、使用IndexedDB API的表格数据来存储复杂的数据类型，如音频或视频文件。

为每个域名分离储存

• 利用浏览器内建的 JSON进行转换数据

var myNotification = new Notification('Hello!');

1.2 web 浏览器的重要部分

• window 是载入浏览器的标签，使用这个对象可返回窗口的大小（Window.innerWidth和Window.innerHeight），操作载入窗口的文档，存储客户端上文档的特殊数据（例如使用本地数据库或其他存储设备），为当前窗口绑定event handler。
• navigator 表示浏览器存在于 web 上的状态和标识。你可以用这个对象获取地理信息、用户偏爱的语言、多媒体流。

// 1. 属性：  appName、   appVersion  、   History  历史记录对象
// 2. 函数：`go(url);`

• document（在浏览器中用 DOM 表示）是载入窗口的实际页面，可以用这个对象来返回和操作文档中 HTML 和 CSS 上的信息。

• Location：地址栏对象，属性href 可改变地址栏访问目标地址

II BOM(Browser Object Model,浏览器对象模型)

整个浏览器窗口是一个顶层window对象

alert() 警告框 prompt() 对话框 confirm() 确认框 window.open("URL"); setTimeout(); 以一个回调函数和一个以毫秒为单位的延迟作为参数。当调用 setTimeout() 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。 clearTimeout();超时之后清除目标函数 focus() 获得焦点 setInterval(,) （以毫秒计）调用执行函数/表达式 setInterval(code,millisec[,"lang"]) clearInterval() 取消对 code 的周期性执行,由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
window.setInterval(function() {}, 18000)//18S

前端小技能：利用action-type按钮事件实现批量删除 https://blog.csdn.net/z929118967/article/details/123222483

Window对象有一个称为 resize 的可用事件,每次窗口调整大小时都会触发该事件 。我们可以通过Window.onresize 事件处理程序来访问它，并返回每次改变大小的代码。

//不管窗口的大小是多少，确保应用程序和它所在的窗口视图一样大
window.onresize = function() {
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;
  div.style.width = WIDTH + 'px';
  div.style.height = HEIGHT + 'px';
}

III Canvas API

用于绘制和操作图形的 API： 画布（Canvas） 和 WebGL API 可以创建生动的 2D 和 3D 图像。

1. Canvas API 由苹果公司在 2004 年前后发明，后来其他的浏览器开始跟进
2. 在 2006 - 2007 年，Mozilla 开始测试 3D 画布，后来演化为 WebGL，在 2009 - 2010 年间得到了标准化。WebGL 可以让你在 web 浏览器中生成真正的 3D 图形。

<!--在 HTML 文件中插入一个 <canvas> 元素，以界定网页中的绘图区域。-->
<canvas width="320" height="240"></canvas>

画布左上角的坐标是 (0, 0)，横坐标（x）轴向右延伸，纵坐标（y）轴向下延伸。

绘图操作可基于原始矩形模型实现，也可通过追踪一个特定路径后填充颜色实现。

2.1 绘制矩形

• fillStyle 属性 ：设置填充色
• fillRect 方法：绘制一个覆盖整个区域的矩形
• strokeStyle 属性：设置描边颜色
• lineWidth 属性：设置描边宽度
• strokeRect 方法： 绘制一个矩形的轮廓

Canvas API 的上下文对象是通过获取要绘制的 <canvas> 元素的引用来创建的，然后调用它的HTMLCanvasElement.getContext()方法：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');//可通过 HTMLCanvasElement.getContext() 方法获得基础的绘画功能，需要提供一个字符串参数来表示所需上下文的类型。
//ctx 变量包含一个 CanvasRenderingContext2D 对象，画布上所有绘画操作都会涉及到这个对象。
ctx.fillStyle = 'rgb(0, 0, 0)';//将画布背景涂成黑色
ctx.fillRect(0, 0, width, height);

2.2 绘制路径

• beginPath()：当前所在位置开始绘制一条路径。
• moveTo()：移动至另一个坐标点。
• fill()：为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
• stroke()：为当前绘制路径的区域描边，来绘制一个只有边框的形状。

ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.beginPath();
ctx.moveTo(50, 50);
// 绘制路径
ctx.fill();

arc(): 绘制圆弧路径（画圆）void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

前两个参数指定圆心的位置坐标，

第三个参数是圆的半径，

第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），

第六个是绘制方向（false 是顺时针，true 是逆时针）。

ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.beginPath();
ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
ctx.fill();

2.3 绘制文本

• fillText() ：绘制有填充色的文本。
• strokeText()：绘制文本外边框（描边）。

ctx.strokeStyle = 'white';
ctx.lineWidth = 1;
//指定字体族、字号
ctx.font = '36px arial';//值和语法与 CSS 的 font 属性一致。
ctx.strokeText('Canvas text', 50, 50);

ctx.fillStyle = 'red';
ctx.font = '48px georgia';
ctx.fillText('Canvas text', 50, 150);

2.4 在画布上绘制图片

drawImage() 方法可将图片绘制在画布上。

var image = new Image();
image.src = 'firefox.png';
image.onload = function() {
  ctx.drawImage(image, 50, 50);
}

2.5 动画

制作动画需要以下步骤：

1. 清除画布内容（可用 fillRect() 或 clearRect()）。
2. （在需要时）用 save() 保存状态。
3. 绘制动画图形。
4. 使用 restore() 恢复第 2 步中保存的状态。
5. 调用 requestAnimationFrame() 准备下一帧动画。

如果期望画布显示的内容像一部电影，屏幕最好能够以 60 帧每秒的刷新率实时更新，这样人眼看到的动作才更真实、更平滑。

• window.requestAnimationFrame()的参数是每帧要运行的函数。下一次浏览器准备好更新屏幕时，将会调用你的函数。动画结束后在主代码中调用cancelAnimationFrame()是良好习惯。

• translate()，可用于移动画布的原点。

IV DOM(Document Object Model,文档对象模型)

在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问 HTML 结构 ， 由W3C定义的一组规范一组API 用来操作HTML对象。

1. 直接获得标签对象

1） document.getElementById("id属性值") 通过ID来获得对应的标签对象

Document.querySelector()是推荐的主流方法，它允许你使用 CSS 选择器选择元素，使用很方便。

    <iframe id="ifr" width=400 height=500></iframe>

        document.getElementById("ifr").src = url[j];
var link = document.querySelector('a');//匹配它在文档中遇到的第一个<a>元素。
//Document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个array中

2） document.getElementsByTagName("标签名称") 根据标签名称来获得一组标签，返回数组对象 3） document.getElementsByName("name属性值");根据name属性值来获得一组标签，返回数组对象

2. 间接获得标签对象

1） 父标签.childNodes 获得当前标签的所有孩子节点，返回数组对象 2） 父标签.firstChild 获得第一个孩子节点 3） 父标签.lastChild 获得最后一个孩子节点 4） 标签.nextSibling 获得下一个兄弟节点 5） 标签.previousSibling 获得前一个兄弟节点

3. 创建节点对象

1） document.createElement("标签名称") 创建一个对应的标签对象 2） document.createTextNode("文本值"); 创建一个文本节点对象

var text = document.createTextNode(' — the premier source for web development knowledge.');

4. 操作标签

1） 父标签.appendChild(子节点); 将一个标签追加到父标签当中

var linkPara = document.querySelector('p');
linkPara.appendChild(text);

2） 父标签.removeChild(子节点); 删除子节点

sect.removeChild(linkPara);
linkPara.parentNode.removeChild(linkPara);//删除自己

3） 父标签.insertBefore(newElement,targetElement); 在目标元素之前插入一个新元素 4） 父标签.replaceChild(newElement,oldElement); 用新元素替换掉旧的元素

5. 操作样式 : 标签.style.样式属性 = 属性值;

//1. 内联样式
para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';

//2. 在 HTML 的<head>中添加下列代码 :
<style>
.highlight {
  color: white;
  background-color: black;
  padding: 10px;
  width: 250px;
  text-align: center;
}
</style>
//在段落中设置类名为 highlight：
para.setAttribute('class', 'highlight');

JQuery操作样式

标签.css("样式属性名称","样式值")

标签.css({样式属性名称:"样式值",样式属性名称:"样式值"});

标签.addClass("class值");

标签.removeClass("class选择器的值");

6. 设置/获得标签体

1） 标签.innerHTML 获得或者设置元素的标签体 2） 文本节点.nodeValue 获得文本节点值 3） 标签.parentNode 获得父节点

var xx=标签.html();
标签.HTML("子标签")；
var xx=标签.text();
标签.text("文本");

7. 其他操作: this 表示当前标签对象 ,它保证了当代码的上下文 (context) 改变时变量的值的正确性。

see also

JQuery 选择标签

1. 基本选择器

• id选择器： $("#id值")
• 标签选择器： $("标签名称")
• Class选择器： $(".class值")

2. 群组选择器: $("标签名称1,标签名称2");

3. 包含选择器 $("标签名称1 标签名称2");

4. 表单选择器

 $(":input")  选出所有的input标签
 :text      选出input标签中type为text的所有标签
 :password
 :button
 :radio
 :reset
 :checkbox
 :hidden
 :submit
 :image
 :file

5. 条件限定选择器

//  基本条件限定
  :first
  :last
  :lt(下标)
  :gt(下标)
  :odd   奇数，下标从0开始
  :even  偶数，下标从0开始
  :eq(下标)
  :not(选择器)  取反，去除选择器中选中的

//  内容限定
  :contains(字符)  选中含有某个字符的标签
  :parent       是否含有子标签
  :empty 
  :has(选择器)     选中含有某个子标签的父标签

  属性限定
  [属性名称]    选出含有此属性的所有标签
  [属性名=属性值]

//  可见性限定
  :visible  选出可见的
  :hidden   选出隐藏的

  //选中限定
  :checked
  :selected

//  子标签的限定
  :first-child
  :last-child
  :nth-child(表达式)