Morning~Sun.
0%

用到的js

发表于 更新于

…

1. 基本用法

1.1. 基本概念

  • 用于操作html和css; node.js扩展了js，可以跟操作系统API打通;
  • 位于 html页面的 <body> 和 <head> 内, <script> 之间;

1.2. 输出

1
2
3
4
indow.alert() // 弹出警告框。
document.write() // 方法将内容写到 HTML 文档中。
innerHTML // 写入到 HTML 元素。
console.log() // 写入到浏览器的控制台。

1.3. 变量

1
2
3
4
5
6
// ES6之前，只有两种作用域，全局, 函数内
var a="hi"

// ES6, 
let b=123   // 有作用域
const c=545 // 常亮

1.4. 数据类型

  1. Primitive
  • String
  • Number, 所有 JavaScript 数字均为 64 位
  • Boolean
  • Null
  • Undefined
  • Symbol, ES6,独一无二的值
  1. Object
  • Array
  • Object
  • Function
  • Date
  • Regex
  • …

1.5. 字符串

  • 字符串模板
1
2
3
4
const name = 'Runoob';
const age = 30;
const message = `My name is ${name} 
and I'm ${age} years old.`;

1.6. 严格模式

1
2
// ES5之后
"use strict";

1.7. 箭头函数

1
2
3
let add = (a,b) => a+b;

let plus = (a,b)  => { return a+b;}

2. 异步

2.1. setTimeout

1
2
3
4
function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000); // 产生子线程

2.2. AJAX

Asynchronous JavaScript and XML; 可以在不重新加载整个页面的情况下，与服务器交互并更新部分网页内容;

XMLHttpRequest 用于在后台与服务器交换数据, 只是实现 Ajax 的一种方式。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr = new XMLHttpRequest(); 
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

更现代的是 await fetch(url);

2.3. Promise

ES6新增的类. 构造函数用函数做参数, 该函数是同步的并且会被立即执行，所以我们称之为起始函数，起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态, 用于返返回成功还是失败的通知。

起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

  • then：用于处理 Promise 成功状态的回调函数。
  • catch：用于处理 Promise 失败状态的回调函数。
  • finally：无论 Promise 是成功还是失败，都会执行的回调函数。
1
2
3
4
5
6
7
8
9
10
11
12
new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

Promise 本身不是异步执行流程，只不过是变换了函数的编程方式，将原来的回调嵌套变成了用 .then() 顺序连接的形式。

2.4. async

ES2017标准规范, 要配合 Promise 一起使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

// 用 Promise 本身
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

// 用 async
async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

3. HTML DOM

可以用js通过 HTML DOM 访问 HTML 所有元素。

3.1. 找到 DOM 元素

1
2
3
4
5
6
7
8
9
// 1. 通过ID
var x=document.getElementById("intro");

// 2. 通过标签
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

// 3. 通过类名
var x=document.getElementsByClassName("intro");

3.2. 改变HTML内容

1
2
3
4
5
6
7
8
// 改变内容
document.getElementById("p1").innerHTML="新文本!";

// 改变属性
document.getElementById("image").src="landscape.jpg";

// 改变样式
document.getElementById("p2").style.color="blue";

3.3. DOM事件

1
2
3
4
document.getElementById("myBtn").onclick=function(){displayDate()};

// 或者 addEventListener
document.getElementById("myBtn").addEventListener("click", displayDate);
  1. 鼠标事件

onclick, oncontextmenu, ondblclick, onmnousedown...

  1. 键盘事件

onkeydown, onkeypress, onkeyup

  1. 框架/对象事件

onload, onscroll, onresize, onpagehide...

  1. 表单事件

onchange, onfucus, onreset, onselect, onsubmit...

  1. 剪贴板事件

oncopy, oncut, onpaste

  1. 打印事件

onafterprint, onbeforeprint

  1. 拖动事件

ondrag, ondragend, ondrop...

  1. 多媒体事件

onpause, onplay, onprogeess, onsuspend, onseeking...

  1. 动画事件

animationend, animationiteration, animationstart

  1. 其他事件

onmessage, online...

4. 浏览器对象模型(BOM)

BOM使js能与浏览器通信.

window

它表示浏览器窗口。

  • window.screen 对象包含有关用户屏幕的信息。
  • window.location 对象用于获得当前页面的地址 (URL)
  • window.history 对象包含浏览器的历史。
  • window.navigator 对象包含有关访问者浏览器的信息。

浏览器本身的信息

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

screen

设备屏幕信息

screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。

location

当前页面的URL信息

location.protocol; // ‘http’
location.host; // ‘www.example.com‘
location.port; // ‘8080’
location.pathname; // ‘/path/index.html’
location.search; // ‘?a=1&b=2’
location.hash; // ‘TOP’

document

当前页面, 以DOM形式表示

history

保存浏览器的历史记录

5. 常用操作

5.1. 遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// for
for (let i=0; i< arr.length; ++i>)
{
    console.log(arr[i]);
}

// for in
for (let i in arr)
{
    console.log(arr[i]);
}

// for of -- 最好用这个
for (const v of arr)
{
    console.log(v);
}
for (const [i,v] of arr.entries())
{
    console.log(i,v);
}

// forEach
arr.forEach((v,i)=>console.log(v));

跨域访问

指从本网址访问外部网址数据，需要外部网站同意，才能获取外部网站内容

jquery