Language - JavaScript - API

文章摘要： 摘要内容。

注释

属性 == 对象的成员变量
方法 == 对象的成员函数
对象的属性，其实可以“二次修改赋值”和“获取”。

输出方式

/*写入到警告框，并弹出警告框*/
window.alert("内容");

/*写入到HTML文件中，在页面中显示*/
document.write("要输出的内容");

/*写入到浏览器的控制台上显示*/
console.log("内容");

/*打印获取到的DOM对象*/
console.dir("DOM对象");

/*写入 HTML 元素*/
innerHTML;

数据类型转换

方法	说明
`parseInt(<数据>)`	转换为`number`数字类型

案例

// 转换为数字类型
alert(parseInt("12"));     // 结果：12
alert(parseInt("12A45"));  // 结果：12
alert(parseInt("A12"));    // 结果：NAN

Array数组

属性	说明
`<Array>.length`	获取数组的长度

方法	说明
`<Array>.length`	获取数组的长度
`<Array>.forEach()`	遍历数组中有值的元素，并调用一次传入的函数
`<Array>.push(<元素>, <元素>...)`	在数组末尾追加新元素，并返回新的长度
`<Array>.splice(<元素下标>, <删除元素的个数>)`	删除元素

String字符串

属性	说明
`<String>.length`	获取字符串的长度

方法	说明
`<String>.length`	获取字符串的长度
`<String>.charAt(<下标>)`	返回在指定下标位置的字符
`<String>.indexOf(<需要查找的字符串>)`	检索字符串，返回下标数字
`<String>.trim()`	去除字符串两边的空格，返回新字符串
`<String>.substring(<起始下标>, <结束下标>)`	提取字符串中两个指定的索引号之间的字符

JSON对象

方法	说明
`JSON.parse(<json字符串>)`	将JSON字符串转换为JS对象
`JSON.string(<js对象>)`	将JS对象转换为JSON字符串

Window浏览器窗口对象

属性	说明
`window.history`	对History历史记录对象的只读引用
`window.location`	用于窗口或框架的Location地址栏对象
`window.location.href`	返回完整的URL字符串，重新赋值URL并跳转到新页面
`window.navigator`	对Navigator浏览器对象的只读引用

方法	返回值	说明
`window.alert()`		显示带有一段消息和一个确认按钮的警告框
`window.confirm()`	`boolean`	显示带有一段消息以及确认按钮和取消按钮的对话框
`window.setInterval(<匿名函数>, <毫秒数>)`		计时器，按照指定的周期（毫秒）来调用函数或计算表达式
`window.setTimeout()`		延迟器，在指定的毫秒数后调用一次函数或计算表达式

DOM文档对象模型

获取

var myvideo = document.querySelector('button');

方法	返回值	说明
`document.getElementsByTagName("<标签名称>")`	元素对象数组	根据“标签名”获取
`document.getElementById("<id属性的值>")`	单个元素对象	根据“id标签的属性值”获取
`document.getElementsByClassName("<class标签的值>")`	元素对象数组	根据“class标签的属性值”获取
`document.getElementsByName("<标签的name值>")`	元素对象数组	根据“标签的name属性值”获取

修改

方法	返回值	说明
`<元素对象>.innerHTML`		重新赋值，修改标签的内容

事件监听

事件监听可以理解为比较特殊的修改元素属性值的操作。

方法	说明
`<元素对象>.onclick`	鼠标点击
`<元素对象>.onblur`	元素失去焦点
`<元素对象>.onfocus`	元素获得焦点
`<元素对象>.onload`	某个页面或图像被完成加载
`<元素对象>.onsubmit`	当表单提交时出发该事件
`<元素对象>.onkeydown`	某个键盘的键被按下
`<元素对象>.onmouseover`	鼠标被移到某个元素上
`<元素对象>.onmouseout`	鼠标从某个元素上移开

存储数据在浏览器

localStorage

一种允许网站在用户浏览器中存储键值对的方法，数据在浏览器会话之间持久存在，即使关闭浏览器窗口也不会被清除。
localStorage中的数据存储在客户端，并且是同步的，这意味着在读取或写入数据时会阻塞其他JavaScript代码的执行。

方法	说明
`localStorage.setItem('key', 'value')`	存储数据
`<变量> = localStorage.getItem('key')`	读取数据，根据`key`返回对应的值
`localStorage.removeItem('key')`	删除数据
`localStorage.clear()`	清空所有

sessionStorage

存储的数据只在会话期间存在，当用户关闭浏览器窗口或标签页时，数据会被清除。

方法	说明
`sessionStorage.setItem('key', 'value')`	存储数据
`<变量> = sessionStorage.getItem('key')`	读取数据
`sessionStorage.removeItem('key')`	删除数据
`sessionStorage.clear()`	清空所有

cookies（待完善）

在每次HTTP请求中都会被发送到服务器，因此它们可以用于维持用户的会话状态。
cookies可以设置过期时间，也可以设置为在浏览器关闭时删除。

==待完善==

设置 cookie：document.cookie = 'key=value; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/';
读取 cookie：var cookieValue = document.cookie.split('; ').find(row => row.startsWith('key=')).split('=')[1];
删除 cookie：document.cookie = 'key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

==待完善==

JQuery

详细总结：Language-JavaScript-API-JQuery