Javascript

发表于 更新于 分类于 阅读次数：

…

常用输出方式

1
2
3
4
5
6
7
8
// 系统提示框，阻塞
window.alert()
// 写到HTML，如果文档加载完成后执行，则会覆盖整个页面
document.write()
// 输出到HTML中
document.getElementById("demo").innerHTML=""
// 输出到控制台
console.log()

数据类型

值类型包含 - 字符串，数字，布尔，空，未定义，Symbol。
引用类型包含 - 对象，数组，函数。

值类型

1
2
3
4
5
6
7
8
9
10
11
12
var y = null;  // y 被清理
var x;  // undefined，x不含有值
var x = 5;  
var x = 34.00;
var x = Infinity; // 无穷大
var x = 123e5;
var x = 100 / "abc";
isNaN(x)  // true，非数值，但是 NaN === NaN => false
var x = "John"; 
var x = 'John';      
var x = true;
var x = false;

运算符：

  • 加减乘除
  • 取余
  • 自增
  • 自减
  • 等于
  • 绝对等于，包含类型检查
  • 不等于
  • 绝对不等于
  • 比较运算
  • 与或非

Math

常量：

1
2
Math.E
Math.PI

方法：

1
2
3
4
random()
round()
max()
min()

字符串

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
26
27
28
29
// 访问字符串的字符
var x = "John"; 
x[0] = 'K';

// 字符串长度
x.length; 

// 转为对象
var y = new String(x)

// 属性
length;     // 字符串长度
constructor // 构造函数
prototype   // 向对象添加属性和方法

// 方法
concat()    // 连接字符串
charCodeAt()// 返回Unicode
indexOf()   // 返回索引
lastIndexOf() // 返回索引
match()     // 匹配 正则表达式
search()    // 搜索 正则表达式
replace()   // 替换 正则表达式
slice()     // 取几个字符
split()     // 分割
substr()    // 子串
substring() // 子串
trim()      // 去空格
toString()  // 转为普通字符串

字符串参考

强制转换

String

1
2
3
4
5
a.toString()
// null, undefined 不能用

String(123)
// 都可以用

Number

1
2
3
Number()
parseInt("123", 10)
parseNumber()

Boolean

1
2
Boolean()
// 0 Nan "" null undefined 都是 false

运算符

1
2
3
4
5
typeof x // 返回字符串

in // 判断是否有属性

正则表达式

数组

1
2
3
4
5
6
7
8
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=["Saab","Volvo","BMW"];

var cars=new Array("Saab","Volvo","BMW");

数组操作：

1
2
3
4
5
6
7
8
9
10
11
concat()    // 数组合并
join()      // 变成字符串
pop()       // 删除最后一个
push()      // 末尾添加
reverse()   // 翻转
shift()     // 删除第一个
slice()     // 切片
sort()      // 排序
splice()    // 添加元素
toString()  // 转为字符串
unshift()   // 开头添加

函数

定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function myFunction(var1,var2)
{
    var x;
    // 代码
    return x;
}

var func = function (var1, var2)
{
    var x;
    // 代码
    return x;
}

// 调用
myFunction(argument1,argument2)
func(argument1,argument2)

函数自调用：

1
2
3
(function () {
    var x = "Hello!!";      // 我将调用自己
})();

箭头函数：

1
2
3
(参数1, 参数2, …, 参数N) => { 函数声明 }
() => {函数声明}
// IE11 及更早 IE 版本不支持箭头函数。

闭包：

1
2
3
4
5
6
7
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add(); add(); add();
// 计数器为 3

call, apply

1
2
fun.call(obj, 2, 3);
fun.apply(obj, [2, 3]);

对象

定义对象：

1
2
3
4
5
6
7
8
9
10
11
12
var person={
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};

// 访问属性
name = person.lastname;
name = person["lastname"];

// 访问方法
name = person.fullName();

创建对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 一般用工厂函数创建对象
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

一个已存在的对象构造器中是不能添加新的属性的。

原型对象:所有的 JavaScript 对象都会包含一个 prototype（原型对象）。

可以使用 prototype 属性给对象的构造函数添加新的属性和方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
// 或 __proto__
Person.prototype.nationality = "English";
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

// 检查是否包含某个属性 
"name" in person;  // 会检查通过原型创建的属性
person.hasOwnProperty() // 不检查原型

this是指调用它的上下文。

1
this

日期

初始化一个日期：

1
2
3
4
new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

设置日期：

1
2
3
4
5
var myDate=new Date();
myDate.setFullYear(2010,0,14);

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

类型转换

语句

基本语句

for：

1
2
3
4
5
6
var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

typeof：

1
2
3
4
5
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

错误处理

1
2
3
4
5
6
7
try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

调试

使用 console：

1
console.log(123);

使用 Debugger：

1
2
3
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

严格模式

关键字

this

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

void

void 操作符指定要计算一个表达式但是不返回值。

1
2
3
var a,b,c;
a = void ( b = 5, c = 7 );
// a 的值为 undefined

例如：

1
2
3
4
5
6
void func()
javascript:void func()

// 或者
void(func())
javascript:void(func())
1
<a href="javascript:void(0)">单击此处什么也不会发生</a>

如果要定义一个死链接使用javascript:void(0)。

表单

访问表单字段：

1
2
3
4
5
6
7
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

验证API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
checkValidity()  // 对INPUT使用
setCustomValidity()  // 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

// 验证属性
customError	//设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	//设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	//设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	//设置为 true, 如果元素的值小于它的最小值。
stepMismatch	//设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	//设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	//设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	//设置为 true，如果元素 (required 属性) 没有值。
valid	//设置为 true，如果元素的值是合法的。


// 例如
if (document.getElementById("id1").validity.rangeOverflow) {
    txt = "输入的值太大了";
}

JSON

数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

1
2
3
4
// 解析为对象
var obj = JSON.parse(text);
// 转换为Json
JSON.stringify()

Require

该部分只能在服务器中使用。

它是在运行时动态加载，输出的是值的拷贝。

1
2
3
4
// 输出
module.exports = fs
// 输入
const fn = require('fn')

常用操作

查找标签：

1
2
3
4
5
6
7
8
9
// 通过 id 查找 HTML 元素
var x=document.getElementById("intro");

// 通过标签名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

// 通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

修改内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 全部修改
document.write(Date());

// 改变标签内容
document.getElementById("p1").innerHTML="新文本!";

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

// 修改CSS样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

dom.className = "btn";

事件

设置方式：

1
<body onload="checkCookies()">

或

1
document.getElementById("p2").onclick = () => {}

常用事件：
onclick
onload
onchange
onmouseover
onmouseout
onmousedown
onmouseup
onclick

鼠标坐标

1
2
clientX // 相对于可见区域
pageX  // 相对于文档

为DOM添加事件句柄，添加的事件句柄不会覆盖已存在的事件句柄。

1
2
3
4
5
6
7
8
9
element.addEventListener(event, function, useCapture);
// 例如
document.getElementById("myBtn").addEventListener("click", displayDate);

// 去除监听器
removeEventListener() 

// event 兼容性问题
event = event || window.event;

事件传递useCapture有两种方式：冒泡false与捕获true。

冒泡下定义了元素事件触发的顺序：

在捕获中，外部元素的事件会先被捕获，不触发，然后才会捕获内部元素的事件。

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；（委派）

捕获模式下则是：

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。

也可以关闭事件传递：

1
event.cancelBubble = true;

定时器

1
2
3
4
5
let timer = setInterval(callback, 2000);
clearInterval(timer);

setTimeout(callback, 2000)
clearTimeout()

IE 8 及更早版本需要使用：

1
x.attachEvent("onclick", myFunction);

DOM 元素

HTML DOM 树：

  • Document 对象
    • html 标签
      • head 标签
        • title 标签
          • text 属性
      • body 标签
        • div 标签
          • a 标签
            • href 属性

添加，删除与替换：

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
26
// 增加
var para = document.createElement("p");
var node = document.createTextNode("新的段落。");
para.appendChild(node);

// 获取父节点
var element = document.getElementById("div1");
var child = document.getElementById("p1");

// 加入或插入
element.appendChild(para);
element.insertBefore(para, child);

// 删除节点
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

// 替换节点
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

获取 DOM 集合（不是数组）：

1
2
3
4
5
6
// 获取集合
var myCollection = document.getElementsByTagName("p");
// 获取集合长度
myCollection.length;
// 获取某一元素
y = myCollection[1];

获取节点列表（不是数组）：

1
2
3
var myNodeList = document.querySelectorAll("p");
myNodelist.length;
y = myNodelist[1];

二者区别为：
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。

1
2
document.getElementById('fun').dataset.appId = 'hsfun' // <div data-app-id="hsfun"></div>
var f2 = document.getElementById('fun').dataset.appId // hsfun

页面加载完成后执行

1
2
3
window.onload = () => {
    
}

操作CSS

1
box.style.width = "300px";

浏览器对象

Window

表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
window.innerHeight // 浏览器窗口的内部高度(包括滚动条)
window.innerWidth  // 浏览器窗口的内部宽度(包括滚动条)

window.open() // 打开新窗口
window.close() // 关闭当前窗口
window.moveTo() // 移动当前窗口
window.resizeTo() // 调整当前窗口的尺寸

// 下面为window的子对象，window可以省略

// 以像素计，减去界面特性，比如窗口任务栏。
screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度

// 用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.hostname // 返回 web 主机的域名
location.pathname // 返回当前页面的路径和文件名
location.port // 返回 web 主机的端口 （80 或 443）
location.protocol // 返回所使用的 web 协议（http: 或 https:）
location.href  // 返回当前页面的 URL。
location.assign()  //  加载新的文档。

// 浏览器的历史。
history.back() // 与在浏览器点击后退按钮相同
history.forward() // 与在浏览器中点击向前按钮相同
history.go() // 前进或后退几页

// 有关访问者浏览器的信息。
navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.cookieEnabled
navigator.platform
navigator.userAgent
navigator.systemLanguage

// 弹窗
alert()
confirm()  // 点确认返回 true
prompt()   // 输入框

// 时间间隔
// 间隔指定的毫秒数不停地执行指定的代码
var intervalVariable = setInterval("javascript function", milliseconds);
clearInterval(intervalVariable)
// 在指定的毫秒数后执行指定代码
var intervalVariable= window.setTimeout("javascript function", milliseconds);
clearTimeout(intervalVariable)

// Cookie
document.cookie="username=John Doe;"  // 创建
var x = document.cookie   // 获取
document.cookie="username=;"   // 删除

存储对象

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

1
2
3
4
5
6
7
length  // 存储多少数据

key(n)  // 返回存储对象中第 n 个键的名称
getItem(keyname)  // 返回指定键的值
setItem(keyname, value)  // 添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)  // 移除键
clear()  // 清除存储对象中所有的键

Console

1
2
3
4
5
6
7
8
9
10
11
assert()  // 断言
clear()
count()   // 记录该函数调用次数
error()
warn()
info()
log()
time()     // 开始计时
timeEnd()  // 计时结束
trace()    // 打印堆栈
table()    // 表格形式显示数据

其他对象

Document

DOM 节点

属性 对象

事件

CSS