devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript入门到精通（完整版! ! !）_javascript教程

作者：知新_RL | 2024-04-25 18:25:39

赞

踩

javascript教程

创建一个JavaScript程序

第1步：新建HTML文档，保存为index.html
第2步：使用快捷键！创建html骨架
第3步：创建script标签，并输入document.write(‘

Hello World!

’) 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.write('<h1>Hello World! 1</h1>')
    alert('Hello World! 2')
    confirm('Hello World! 3')
  </script>
</head>
<body>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

alert打印
confirm打印
docment.write打印

JS注释（多行注释+单行注释）

Ctrl+/            单行注释  //
Shift+Alt+a       多行注释  /* */

  • 1
  • 2

##JS 变量定义和赋值

  • 变量名中可以包含数字、字母、下划线_、美元符号$；
  • 变量名中不能出现汉字；
  • 变量名中不能包含空格；
  • 变量名不能是 JavaScript 中的关键字、保留字；
  • 变量名不能以数字开头，即第一个字符不能为数字。
  • JavaScript 引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。 这样，所有声明的变量都会被提升到代码的头部，这就叫作变量提升（Hoisting）。
var a       
var b=1     //全局变量
let c=1     //局部变量 
const d=1   //常量
var q,w,e

  • 1
  • 2
  • 3
  • 4
  • 5

JS 数据类型（基本数据类型+引用类型）

//基本数据类型
string、number、boolean、null、undefined、symbol

//引用类型
object
var person = {
    string: 'Bob',
    number: 20,
    boolean: true,
    name: null,
    hasCar: undefined,
    [Symbol.for('b')]: 3,
};
array 数组
[1, 2, 3, 4]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

JS 运算符汇总

1. 算术运算符
  var a=1
  var b=1
    a+b   //2 加
    a-b   //0 减
    a*b   //1 乘
    a/b   //1 除
    a%b   //0 取余

2. 赋值运算符
    a+=1  //a=a+1   2 
    a-=1  //a=a-1   0
    a*=1  //a=a*1   1
    a/=1  //a=a/1   0
    a%=1  //a=a%1   0

3. 字符串运算符
 var a ='Hello '
 var b ='World!'
 a+=b    //a='Hello World!'

4. 自增、自减运算符
  var a=1
      ++a  //++a   2
      a++  //a++   1
      --a  //--a   0
      a--  //a--   1 
   a++ a-- 返回a的值，自身加或减1
   ++a --a 将a+1 返回a的值,


  • 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
  1. 比较运算符
var x = 1;
var y = 2;
var z = "1";
console.log(x == z);  // 输出： true
console.log(x === z); // 输出： false
console.log(x != y);  // 输出： true
console.log(x !== z); // 输出： true
console.log(x < y);   // 输出： true
console.log(x > y);   // 输出： false
console.log(x <= y);  // 输出： true
console.log(x >= y);  // 输出： false

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  1. 逻辑运算符
&&  与  两个为真，则为真
||  或  一个为真，则为真
！  非  取反
true && true  //true
false || true //true
!false        //true

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 三元运算符
var x = 11,
    y = 20;
var a=x==11?'aa':'bb'    //a='bb'

语法格式 a?x:y

  • 1
  • 2
  • 3
  • 4
  • 5
  1. 位运算符
    在这里插入图片描述
按二进制规则返回结果
var a = 5 & 1,
    b = 5 | 1,
    c = 5 ^ 1,
    d = ~ 5,
    e = 5 << 1,
    f = 5 >> 1,
    g = 5 >>> 1;
console.log(a);  // 输出：1
console.log(b);  // 输出：5
console.log(c);  // 输出：4
console.log(d);  // 输出：-6
console.log(e);  // 输出：10
console.log(f);  // 输出：2
console.log(g);  // 输出：2


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

JS 输出语句

alert('a')              //弹出框
confirm('a')            //确认框
document.write（'a'）    //将a放入html文档中
var b=document.querySelector('.a')
b.innerHTML='<p>a</p>'         //将内容写入到 HTML 标签中
console.log('a')        //打印到控制台

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JS 条件判断语句

if(){
}

if(){
}else{
}

if(){
}else if(){
}else{
}


var a=11
switc('1'){
 case '1':
        a=11
        break;
 default :
        a=1
}
//a为11

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

JS while循环语句的用法

//1、while
var i = 1;
while( i <= 5) {
    console.log(i+",")
    i++;
}
/* 运行结果：1，2，3，4，5*/
//2、 do while
var i = 1;
do{
    document.write(i + " ");
    i++;
}while (i < 5);
/* 运行结果：1，2，3，4*/

//3、 for
for (var i = 1; i <= 5; i++) {
    document.write(i + " ");
}
/* 运行结果：1，2，3，4，5*/

//4、for 循环变体
 1）、for in循环语句的用法
  // 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
    document.write("<p>" + prop + " = " + person[prop] + "</p>");
}


2）、for of循环语句的用法（对象、数组、字符串）
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
    document.write(value + ", ");
}


  • 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

JS break和continue语句：跳出循环

//continue
for (var i = 0; i < 10; i++) {
    if(i == 5) {
        break;
    }
    document.write("i = " + i + "<br>");
}
document.write("循环之外的代码");

//continue
for (var i = 0; i < 10; i++) {
    if(i % 2 == 0) {
        continue;
    }
    document.write(i + "&nbsp;");
}

// JavaScript 标签
document.write("开始循环!<br /> ");
outerloop:          // 定义一个标签    
for (var i = 0; i < 5; i++) {
   document.write("外层循环: " + i + "<br />");
   innerloop:       // 定义一个标签
   for (var j = 0; j < 5; j++) {
      if (j > 3 ) break ;           // 跳出内层循环
      if (i == 2) break innerloop;  // 跳出内层讯息
      if (i == 4) break outerloop;  // 跳出外层循环
      document.write("内层循环: " + j + " <br />");
   }
}      
document.write("循环结束!<br /> ");
/*
j>3  跳出本层循环
i==2 跳到innerloop:执行i=3继续循环
i==4 跳到outerloop:执行i=5继续向下执行
*/

  • 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

JS 函数（function）

function Hello(name){
    document.write("Hello " + name);
}
Hello('asdasd')

function Hello(name){
 return   "Hello " + name
}
Hello('asdasd')
//Hello('asdasd')函数为return后的值

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

函数写法与调用的差别

函数表达式在定义之前被调用，会抛出异常（报错）
函数声明则可以成功运行
var会变量提升（js先解析函数声明，函数表达式则是匿名函数赋值给变量，在程序还没有执行到该表达式，就调用，相当于函数不存在）

函数声明
b();          // 输出: function declaration
function b() {
    document.write("function");
}
函数表达式
a();           // 报错：Uncaught TypeError: undefined is not a function
var a = function() {
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

JS 事件（event）处理

鼠标、键盘事件
*鼠标
onclick       *点击鼠标触发
ondblclick    双击鼠标触发
onmousedown   按下鼠标触发
onmouseup     松开后触发
onmouseover   *鼠标移入触发
onmousemove   鼠标移动触发
onmouseout    *鼠标移出触发

*键盘
onkeydown     键盘按下触发
onkeypress    键盘按下并松开触发
onkeyup       键盘松开触发

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
窗口事件
onabort       图片下载被用户中断触发
onbefreunload 当前页面将要被改变时触发
onerror       出现错误时触发
onload        页面加载完成时触发
onmove        移动浏览器窗口触发
onresize      *改变窗口大小触发
onscroll      *滚动条滚动触发
onstop        按下浏览器的停止按钮或者下载的文件被中断的时候触发
oncontextmenu 当弹出右键上下文菜单时触发
onunload      改变当前页面时触发

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
表单事件
表单
onblur       input失去聚焦触发
onchange     *修改input触发
onfocus      获取焦点时触发
onreset      *点击表单重置按钮触发
onsubmit     *提交表单时触发

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JS 作用域

JS 全局作用域

1）、最外层的函数和在最外层函数外面定义的变量拥有全局作用域；
2）、所有未定义直接赋值的变量拥有全局作用域；
3）、所有 window 对象的属性拥有全局作用域，例如 window.name、window.location、window.top 等。

var sta='as'
function b(){
a='asd'
}
b()
console.log(a)//asd

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
JS 局部作用域

局部变量只能在其作用域中（函数内部）使用

function newweb(){
a='sa'
console.log(a)//sa
}
newweb
console.log(a)//报错a is not defined

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JS 对象的创建和使用

创建对象
var person = {
    name: "Peter",
    age: 28,
    gender: "Male"，
    displayName: function() {
        console.log(this.name);
    }
};

访问对象属性的值
console.log(person.name);   // 输出Peter
console.log(person['name']);   // 输出Peter

修改对象的值
person.age = 20;
person['age'] = 20;

删除对象的键值对
delete person.age 
console.log(person)//对象里面没有了age的属性

调用对象的方法
person.displayName();       // 输出：Peter
person["displayName"]();    // 输出：Peter

  • 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

JS Number 数字

±Infinity（无穷）
NaN（非数字）
Number('23242')

  • 1
  • 2
  • 3
Number属性
Number.MAX_VALUE	        JavaScript 中所能表示的最大值
Number.MIN_VALUE	        JavaScript 中所能表示的最小值
Number.NaN	                非数字
Number.NEGATIVE_INFINITY	负无穷，在溢出时返回
Number.POSITIVE_INFINITY	正无穷，在溢出时返回
Number.EPSILON	            表示 1 与 Number 所能表示的大于 1 的最小浮点数之间的差
Number.MIN_SAFE_INTEGER	    最小安全整数，即 -9007199254740991
Number.MAX_SAFE_INTEGER   	最大安全整数，即 9007199254740991

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
Number 方法
Number.parseFloat()	    将字符串转换成浮点数，和全局方法 parseFloat() 作用相同
Number.parseInt()	    将字符串转换成整型数字，和全局方法 parseInt() 作用相同
Number.isFinite()	    判断 Number 对象是否为有穷数
Number.isInteger()	    判断 Number 对象是否为整数
Number.isNaN()	        判断 Number 对象是否为 NaN 类型
Number.isSafeInteger()	判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数
Number.toString()	    把 Number 对象转换为字符串，使用指定的基数
Number.toLocaleString()	把 Number 对象转换为字符串，使用本地数字格式顺序
Number.toFixed()	    把 Number 对象转换为字符串，结果的小数点后有指定位数的数字
Number.toExponential()	把 Number 对象的值转换为指数计数法
Number.toPrecision()	把 Number 对象格式化为指定的长度
Number.valueOf()     	返回一个 Number 对象的基本数字值

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

JS String 字符串

String 的属性
constructor   	获取创建此对象的 String() 函数的引用
length          获取字符串的长度
prototype	    通过该属性您可以向对象中添加属性和方法

  • 1
  • 2
  • 3
String 的方法
anchor()	         创建一个 HTML 锚点，即生成一个<a>标签，标签的 name 属性为 anchor()方法中的参数
big()	             用大号字体显示字符串
blink()              显示闪动的字符串
bold()	             使用粗体显示字符串
charAt()	         返回在指定位置的字符
charCodeAt()         返回指定字符的 Unicode 编码
concat()	         拼接字符串
fixed()	             以打字机文本显示字符串
fontcolor()	         使用指定的颜色来显示字符串
fontsize()	         使用指定的尺寸来显示字符串
fromCharCode()	     将字符编码转换为一个字符串
indexOf()	         检索字符串，获取给定字符串在字符串对象中首次出现的位置
italics()	         使用斜体显示字符串
lastIndexOf()	     获取给定字符串在字符串对象中最后出现的位置
link()	             将字符串显示为链接
localeCompare()	     返回一个数字，并使用该数字来表示字符串对象是大于、小于还是等于给定字符串
match()     	     根据正则表达式匹配字符串中的字符
replace()	         替换与正则表达式匹配的子字符串
search()	         获取与正则表达式相匹配字符串首次出现的位置
slice()	             截取字符串的片断，并将其返回
small()	             使用小字号来显示字符串
split()	             根据给定字符将字符串分割为字符串数组
strike()	         使用删除线来显示字符串
sub()	             把字符串显示为下标
substr()	         从指定索引位置截取指定长度的字符串
substring()	         截取字符串中两个指定的索引之间的字符
sup()	             把字符串显示为上标
toLocaleLowerCase()	 把字符串转换为小写
toLocaleUpperCase()	 把字符串转换为大写
toLowerCase()	     把字符串转换为小写
toUpperCase()	     把字符串转换为大写
toString()	         返回字符串
valueOf()	         返回某个字符串对象的原始值


  • 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
特殊字符
\'	   单引号	
\r	   回车
\"	   双引号	
\t	   tab
\\	   反斜线本身	
\b	   空格
\n	   换行	
\f	   换页

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

JS Array 数组

Array 的属性
constructor	 返回创建数组对象的原型函数
length	     设置或返回数组中元素的个数
prototype	 通过该属性可以向对象中添加属性和方法
var cars = new Array(1, 2, 3);
Array.prototype.name = null;

  • 1
  • 2
  • 3
  • 4
  • 5
Array 的方法

常用

concat()           拼接两个或更多的数组，并返回结果
copyWithin()	   从数组的指定位置拷贝元素到数组的另一个指定位置中
entries()	       返回数组的可迭代对象
every()	           检测数值元素的每个元素是否都符合条件
fill()	           使用一个固定值来填充数组
filter()	       检测数值元素，并返回符合条件所有元素的数组
find()	           返回符合传入函数条件的数组元素
findIndex()	       返回符合传入函数条件的数组元素索引
forEach()	       数组每个元素都执行一次回调函数
from()	           通 过给定的对象中创建一个数组
includes()	       判断一个数组是否包含一个指定的值
indexOf()	       搜索数组中的元素，并返回它所在的位置
isArray()	       判断对象是否为数组
join()	           把数组的所有元素放入一个字符串
keys()	           返回数组的可迭代对象，包含原始数组的键（key）
lastIndexOf()	   搜索数组中的元素，并返回它最后出现的位置
map()	           通过指定函数处理数组的每个元素，并返回处理后的数组
pop()	           删除数组的最后一个元素并返回删除的元素
push()	           向数组的末尾添加一个或更多元素，并返回数组的长度
reduce()           累加（从左到右）数组中的所有元素，并返回结果
reduceRight()      累加（从右到左）数组中的所有元素，并返回结果
reverse()	       反转数组中元素的顺序
shift()	           删除并返回数组的第一个元素
slice()	           截取数组的一部分，并返回这个新的数组
some()	           检测数组元素中是否有元素符合指定条件
sort()	           对数组的元素进行排序
splice()	       从数组中添加或删除元素
toString()	       把数组转换为字符串，并返回结果
unshift()	       向数组的开头添加一个或多个元素，并返回新数组的长度
valueOf()	       返回数组对象的原始值

  • 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

JS Date（时间/日期）

new Date()
constructor	          返回创建 Date 对象的原型函数
prototype	          通过该属性您可以向对象中添加属性和方法

getDate()	          从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	          从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth()	          从 Date 对象返回月份 (0 ~ 11)
getFullYear()	      从 Date 对象返回四位数字的年份
getYear()	          已废弃，请使用 getFullYear() 方法代替
getHours()	          返回 Date 对象的小时 (0 ~ 23)
getMinutes()          返回 Date 对象的分钟 (0 ~ 59)
getSeconds()          返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()     返回 Date 对象的毫秒(0 ~ 999)
getTime()	          返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset()	  返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate()	      根据通用时间从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay()	          根据通用时间从 Date 对象返回周中的一天 (0 ~ 6)
getUTCMonth()	      根据通用时间从 Date 对象返回月份 (0 ~ 11)
getUTCFullYear()	  根据通用时间从 Date 对象返回四位数的年份
getUTCHours()		  根据通用时间返回 Date 对象的小时 (0 ~ 23)
getUTCMinutes()		  根据通用时间返回 Date 对象的分钟 (0 ~ 59)
getUTCSeconds()		  根据通用时间返回 Date 对象的秒钟 (0 ~ 59)
getUTCMilliseconds()  根据通用时间返回 Date 对象的毫秒(0 ~ 999)
parse()		   	  	  返回1970年1月1日午夜到指定日期（字符串）的毫秒数
setDate()		  	  设置 Date 对象中月的某一天 (1 ~ 31)
setMonth()		  	  设置 Date 对象中月份 (0 ~ 11)
setFullYear()		  设置 Date 对象中的年份（四位数字）
setYear()		  	  已废弃，请使用 setFullYear() 方法代替
setHours()		  	  设置 Date 对象中的小时 (0 ~ 23)
setMinutes()		  设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()		  设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds()	  设置 Date 对象中的毫秒 (0 ~ 999)
setTime()		  	  以毫秒设置 Date 对象
setUTCDate()		  根据通用时间设置 Date 对象中月份的一天 (1 ~ 31)
setUTCMonth()		  根据通用时间设置 Date 对象中的月份 (0 ~ 11)
setUTCFullYear()	  根据通用时间设置 Date 对象中的年份（四位数字）
setUTCHours()	      根据通用时间设置 Date 对象中的小时 (0 ~ 23)
setUTCMinutes()	      根据通用时间设置 Date 对象中的分钟 (0 ~ 59)
setUTCSeconds()	      根据通用时间设置 Date 对象中的秒钟 (0 ~ 59)
setUTCMilliseconds()  根据通用时间设置 Date 对象中的毫秒 (0 ~ 999)
toSource()	          返回该对象的源代码
toString()	          把 Date 对象转换为字符串
toTimeString()	      把 Date 对象的时间部分转换为字符串
toDateString()	      把 Date 对象的日期部分转换为字符串
toGMTString()	      已废弃，请使用 toUTCString() 方法代替
toUTCString()	      根据通用时间，把 Date 对象转换为字符串
toLocaleString()	  根据本地时间格式，把 Date 对象转换为字符串
toLocaleTimeString()  根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString()  根据本地时间格式，把 Date 对象的日期部分转换为字符串
UTC()	              根据通用时间返回 1970 年 1 月 1 日 到指定日期的毫秒数
valueOf()	          返回 Date 对象的原始值


  • 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

JS Math（数学）

Math 属性
E	         返回算术常量 e，即自然对数的底数（约等于 2.718）
LN2	         返回 2 的自然对数（约等于 0.693）
LN10	     返回 10 的自然对数（约等于 2.302）
LOG2E	     返回以 2 为底的 e 的对数（约等于 1.443）
LOG10E	     返回以 10 为底的 e 的对数（约等于 0.434）
PI	         返回圆周率 π（约等于 3.14159）
SQRT1_2	     返回返回 2 的平方根的倒数（约等于 0.707）
SQRT2	     返回 2 的平方根（约等于 1.414）


document.write(Math.E + "<br>");            // 输出：2.718281828459045
document.write(Math.LN2 + "<br>");          // 输出：0.6931471805599453
document.write(Math.LN10 + "<br>");         // 输出：2.302585092994046
document.write(Math.LOG2E + "<br>");        // 输出：1.4426950408889634
document.write(Math.LOG10E + "<br>");       // 输出：0.4342944819032518
document.write(Math.PI + "<br>");           // 输出：3.141592653589793
document.write(Math.SQRT1_2 + "<br>");      // 输出：0.7071067811865476
document.write(Math.SQRT2 + "<br>");        // 输出：1.4142135623730951


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
Math 的方法
floor(x)	        对 x 进行向下取整，即返回小于 x 的最大整数
ceil(x)	            对 x 进行向上取整，即返回大于 x 的最小整数
trunc(x)	        返回 x 的整数部分
round(x)	        返回 x 四舍五入后的整数
exp(x)	            返回算术常量 e 的 x 次方，即 Ex
abs(x)	            返回 x 的绝对值
acos(x)	            返回 x 的反余弦值
acosh(x)	        返回 x 的反双曲余弦值
asin(x)	            返回 x 的反正弦值
asinh(x)	        返回 x 的反双曲正弦值
atan(x)	            返回 x 的反正切值
atanh(x)	        返回 x 的反双曲正切值
atan2(y,x)        	返回 y/x 的反正切值
cbrt(x)	            返回 x 的立方根
clz32(x)	        返回将 x 转换成 32 无符号整形数字的二进制形式后，开头 0 的个数
cos(x)	            返回 x 的余弦值
cosh(x)	            返回 x 的双曲余弦值
expm1(x)	        返回 exp(x) - 1 的值
fround(x)	        返回最接近 x 的单精度浮点数
hypot([x, [y, […]]])返回所有参数平方和的平方根
imul(x, y)	        将参数 x、y 分别转换位 32 位整数，并返回它们相乘后的结果
log(x)	            返回 x 的自然对数
log1p(x)	        返回 x 加 1 后的自然对数
log10(x)	        返回 x 以 10 为底的对数
log2(x)	            返回 x 以 2 为底的对数
max([x, [y, […]]])	返回多个参数中的最大值
min([x, [y, […]]])	返回多个参数中的最小值
pow(x,y)	        返回 x 的 y 次幂
random()	        返回一个 0 到 1 之间的随机数
sign(x)	            返回 x 的符号，即一个数是正数、负数还是 0
sin(x)	            返回 x 的正弦值
sinh(x)	            返回 x 的双曲正弦值
sqrt(x)	            返回 x 的平方根
tan(x)	            返回 x 的正切值
tanh(x)	            返回 x 的双曲正切值
toSource()	        返回字符串"Math"
valueOf()	        返回 Math 对象的原始值

  • 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

JS 正则表达式

\	                 转义字符。
^	                 匹配字符串的开头。
$	                 匹配字符串的末尾。
*	                 匹配前一个表达式 0 次或多次，等价于 {0,}。
+	                 匹配前面一个表达式 1 次或者多次，等价于 {1,}。
?	                 匹配前面一个表达式 0 次或者 1 次，等价于 {0,1}。
.	                 匹配除换行符之外的任何单个字符。例如“/.n/”将会匹配“nay, an apple is on the tree”中的“an”和“on”。
(x)	                 匹配“x”并记住这一匹配项，这里的括号被称为捕获括号。
(?:x)	             匹配“x”但是不记住匹配项，这里的括号被称为非捕获括号。
x(?=y)	             当“x”后面跟着“y”时，匹配其中的“x”。例如“/Jack(?=Sprat)/”会匹配后面跟着“Sprat”的“Jack”，“/Jack(?=Sprat
(?<=y)x	             当“x”前面是“y”时，匹配其中的“x”。例如“/(?<=Jack)Sprat/”会匹配前面未“Sprat”的“Jack”，“/(?<=Jack
x(?!y)	             当“x”后面不是“y”时，匹配其中的“x”。 例如“/\d+(?!.)/”会匹配“3.141”中的“141”，而不是“3.141”。
(?<!y)               x	当“x”前面不是“y”时，匹配其中的“x”。
xly	匹配“x”或者“y”。 例如“/greenlred/”能够匹配“green apple”中的“green”和“red apple”中的“red”。
{n}	                 n 是一个正整数，表示匹配前一个字符 n 次。例如“/a{2}/”不会匹配“candy”中的“a”，但是能够匹配“caandy”中所有的“a”，以及“caaandy”中的前两个“a”。
{n,}	             n 是一个正整数，表示匹配前一个字符至少 n 次。例如“/a{2,}/”能够匹配“aa”、“aaaa”或“aaaaa”，但不会匹配“a”。
{n,m}	             n 和 m 都是整数，表示匹配前一个字符至少 n 次，最多 m 次，如果 n 或 m 等于 0，则表示忽略这个值。例如“/a{1, 3}/”能够匹配“candy”中的“a”，“caandy”中的前两个“a”，“caaaaaaandy”中的前三个“a”。
[xyz]	             转义序列，匹配 x、y 或 z，您也可以使用破折号-来指定一个字符范围。例如“[abcd]”和“[a-d]”是一样的，它们都能匹配“brisket”中的“b”,“city”中的“c”。
[^xyz]	             反向字符集，匹配除 x、y、z 以外的任何字符，您通用也可以使用破折号 - 来指定一个字符范围。例如“[abc]”和“[a-c]”是一样的，它们都能匹配“brisket”中的“r”，“chop”中的“h”。
[\b]	             匹配一个退格符，注意：不要和 \b 混淆。
\b	                 匹配一个单词的边界，即单词的开始或末尾。例如“/\bm/”能够匹配“moon”中的“m”，但不会匹配“imoon”中的“m”。
\B	                 匹配一个非单词边界。例如“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
\cX	                 当 X 是 A 到 Z 之间的字符时，匹配字符串中的一个控制符。例如“/\cM/”能够匹配字符串中的“control-M(U+000D)”。
\d	                 匹配一个数字，等价于“[0-9]”。例如“/\d/”或者“/[0-9]/”能够匹配“B2 is the suite number.”中的“2”。
\D	                 匹配一个非数字字符，等价于“[^0-9]”。 例如“/\D/”或者“/[^0-9]/”能够匹配“B2 is the suite number.”中的“B”。
\f	                 匹配一个换页符 (U+000C)。
\n	                 匹配一个换行符 (U+000A)。
\r	                 匹配一个回车符 (U+000D)。
\s	                 匹配一个空白字符，包括空格、制表符、换页符和换行符，等价于“[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]”。例如“/\s\w*/”能够匹配“foo bar.”中的“bar”。
\S	                 匹配一个非空白字符，等价于“[^\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]”。例如“/\S\w*/”能够匹配“foo bar.”中的“foo”。
\t	                 匹配一个水平制表符 (U+0009)。
\v	                 匹配一个垂直制表符 (U+000B)。
\w	                 匹配一个单字字符（字母、数字或者下划线），等价于“[A-Za-z0-9_]”。例如“/\w/”能够匹配“apple,”中的“a”，“$5.28,”中的“5”和“3D.”中的“3”。
\W	                 匹配一个非单字字符，等价于“[A-Za-z0-9_]”。例如“/\W/”或者“/[A-Za-z0-9_]/”能够匹配“50%.”中的“%”。
\n	                 获取最后的第 n 个匹配的值。比如“/apple(,)\sorange\1/”能够匹配“apple, orange, cherry, peach.”中的“apple, orange,”。
\0	                 匹配 NULL（U+0000）字符，不要在这后面跟其它小数，因为 \0 是一个八进制转义序列。
\xhh	             匹配一个两位十六进制数（\x00-\xFF）表示的字符。
\uhhhh	             匹配一个四位十六进制数表示的 UTF-16 代码单元。
\u{hhhh}或\u{hhhhh}	（仅在设置了修饰符 u 时）匹配一个十六进制数表示的 Unicode 字符。

  • 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
正则表达式 的方法
compile()	在 1.5 版本中已废弃，编译正则表达式
exec()	    在字符串搜索匹配项，并返回一个数组，若没有匹配项则返回 null
test()	    测试字符串是否与正则表达式匹配，匹配则返回 true，不匹配则返回 false
toString()	返回表示指定对象的字符串

  • 1
  • 2
  • 3
  • 4

JS DOM（文档对象模型）

DOM 对象的属性
document.activeElement	        返回当前获取焦点的元素

document.anchors	            返回对文档中所有 Anchor 对象的引用

document.applets	            返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素

document.baseURI	            返回文档的基础 URI

document.body	                返回文档的 body 元素

document.cookie	                设置或返回与当前文档有关的所有 cookie

document.doctype	            返回与文档相关的文档类型声明 (DTD)

document.documentElement	    返回文档的根节点

document.documentMode	        返回浏览器渲染文档的模式

document.documentURI	        设置或返回文档的位置

document.domain	                返回当前文档的域名

document.domConfig	            已废弃，返回 normalizeDocument() 被调用时所使用的配置

document.embeds	                返回文档中所有嵌入内容（embed）的集合

document.forms	                返回文档中所有 Form 对象的引用

document.images	                返回文档中所有 Image 对象的引用

document.implementation	        返回处理该文档的 DOMImplementation 对象

document.inputEncoding	        返回文档的编码方式

document.lastModified	        返回文档的最后修改日期

document.links	                返回对文档中所有 Area 和 Link 对象的引用

document.readyState	            返回文档状态（载入中）

document.referrer	            返回载入当前文档的 URL

document.scripts	            返回页面中所有脚本的集合

document.strictErrorChecking	设置或返回是否强制进行错误检查

document.title	                返回当前文档的标题

document.URL	                返回文档的完整 URL


  • 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
JS DOM方法
document.addEventListener()	        向文档中添加事件

document.adoptNode(node)	        从另外一个文档返回 adapded 节点到当前文档

document.close()	                关闭使用 document.open() 方法打开的输出流，并显示选定的数据

document.createAttribute()	        为指定标签添加一个属性节点

document.createComment()	        创建一个注释节点

document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象

document.createElement()	        创建一个元素节点

document.createTextNode()	        创建一个文本节点

document.getElementsByClassName()	返回文档中所有具有指定类名的元素集合

document.getElementById()	        返回文档中具有指定 id 属性的元素

document.getElementsByName()	    返回具有指定 name 属性的对象集合

document.getElementsByTagName()	    返回具有指定标签名的对象集合

document.importNode()	            把一个节点从另一个文档复制到该文档以便应用

document.normalize()	            删除空文本节点，并合并相邻的文本节点

document.normalizeDocument()	    删除空文本节点，并合并相邻的节点

document.open()	                    打开一个流，以收集来自 document.write() 或 document.writeln()

document.querySelector()	        返回文档中具有指定 CSS 选择器的第一个元素

document.querySelectorAll(  )	    返回文档中具有指定 CSS 选择器的所有元素

document.removeEventListener()	    移除文档中的事件句柄

document.renameNode()	            重命名元素或者属性节点

document.write()	                向文档中写入某些内容

document.writeln()	                等同于 write() 方法，不同的是 writeln() 方法会在末尾输出一个换行符

  • 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

JS Element 元素对象

JS Element方法
element.accessKey	            设置或返回一个访问单选按钮的快捷键
element.attributes	            返回一个元素的属性数组
element.childNodes	            返回元素的一个子节点的数组
element.children	            返回元素中子元素的集合
element.classList	            返回元素中类名组成的对象
element.className	            设置或返回元素的 class 属性
element.clientHeight	        返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	            返回内容的可视宽度（不包括边框，边距或滚动条）
element.contentEditable	        设置或返回元素的内容是否可编辑
element.dir	                    设置或返回一个元素中的文本方向
element.firstChild            	返回元素中的第一个子元素
element.id	                    设置或者返回元素的 id
element.innerHTML	            设置或者返回元素的内容
element.isContentEditable	    返回元素内容是否可编辑，如果可编辑则返回 true，否则返回 false
element.lang	                设置或者返回一个元素的语言
element.lastChild	            返回元素的最后一个子元素
element.namespaceURI	        返回命名空间的 URI
element.nextSibling	            返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）
element.nextElementSibling	    返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）
element.nodeName	            返回元素名称（大写）
element.nodeType	            返回元素的节点类型
element.nodeValue	            返回元素的节点值
element.offsetHeight	        返回元素的高度，包括边框和内边距，但不包括外边距
element.offsetWidth	            返回元素的宽度，包括边框和内边距，但不包括外边距
element.offsetLeft	            返回元素在水平方向的偏移量
element.offsetParent	        返回距离该元素最近的进行过定位的父元素
element.offsetTop	            返回元素在垂直方向的偏移量
element.ownerDocument	        返回元素的根元素（文档对象）
element.parentNode	            返回元素的父节点
element.previousSibling	        返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）
element.previousElementSibling	返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）
element.scrollHeight	        返回元素的完整高度（包括被滚动条隐蔽的部分）
element.scrollLeft	            设置或返回元素滚动条距离元素左侧的距离
element.scrollTop	            设置或返回元素滚动条距离元素上方的距离
element.scrollWidth	            返回元素的完整宽度（包括被滚动条隐蔽的部分）
element.style	                设置或返回元素的样式属性
element.tabIndex	            设置或返回元素的标签顺序
element.tagName	                以字符的形式返回元素的名称（大写）
element.textContent	            设置或返回某个元素以及其中的文本内容
element.title	                设置或返回元素的 title 属性
element.length	                返回对象的长度


  • 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
Element 方法
element.addEventListener()	        为指定元素定义事件
element.appendChild()	            为元素添加一个新的子元素
element.cloneNode()	                克隆某个元素
element.compareDocumentPosition()	比较当前元素与指定元素在文档中的位置，返回值如下：1：表示两个元素没有关系，不属于同一文档；2：表示当前元素在指定元素之后；4：当前元素在指定元素之前；8：当前元素在指定元素之内；16：指定元素在当前元素之内；32：两个元素没有关系，或者它们是同一元素的两个属性。
element.focus()	                    使元素获得焦点
element.getAttribute()	            通过属性名称获取指定元素的属性值
element.getAttributeNode()	        通过属性名称获取指定元素得属性节点
element.getElementsByTagName()	    通过标签名获取当前元素下的所有子元素的集合
element.getElementsByClassName()	通过类名获取当前元素下的子元素的集合
element.hasAttribute()	            判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false
element.hasAttributes()	            判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false
element.hasChildNodes()	            判断一个元素是否具有子元素，有则返回 true，没有则返回 false
element.hasFocus()	                判断元素是否获得了焦点
element.insertBefore()	            在已有子元素之前插入一个新的子元素
element.isDefaultNamespace()	    如果指定 namespaceURI 是默认的则返回 true，否则返回 false。
element.isEqualNode()	            检查两个元素是否相等
element.isSameNode()	            检查当前元素与指定元素是否为同一元素
element.isSupported()	            判断当前元素是否支持某个特性
element.normalize()	                合并相邻的文本节点，并删除空的文本节点
element.querySelector()	            根据 CSS 选择器，返回第一个匹配的元素
document.querySelectorAll()	        根据 CSS 选择器，返回所有匹配的元素
element.removeAttribute()	        从元素中删除指定的属性
element.removeAttributeNode()	    从元素中删除指定的属性节点
element.removeChild()	            删除一个子元素
element.removeEventListener()	    移除由 addEventListener() 方法添加的事件
element.replaceChild()	            替换一个子元素
element.setAttribute()	            设置或者修改指定属性的值
element.setAttributeNode()	        设置或者修改指定的属性节点
element.setUserData()	            在元素中为指定键值关联对象
element.toString()	                将元素转换成字符串
nodelist.item()	                    返回某个元素基于文档树的索引

  • 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

JS BOM（浏览器对象模型）

window 对象中属性
closed	        返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
document	    对 Document 对象的只读引用
frames		    返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 或 标签
history		    对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight	    返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth	    返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage	在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
length		    返回当前窗口中 框架的数量
location	    引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name		    设置或返回窗口的名称
navigator	    对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener		    返回对创建此窗口的 window 对象的引用
outerHeight	    返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth	    返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset	    设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset	    设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent	        返回父窗口
screen	        对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft	    返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop	    返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX	        返回浏览器窗口相对于计算机屏幕的 X 坐标
sessionStorage	在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
screenY	        返回浏览器窗口相对于计算机屏幕的 Y 坐标
self	        返回对 window 对象的引用
status	        设置窗口状态栏的文本
top	            返回最顶层的父窗口

  • 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
window 对象中的方法
alert()	            在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()	            解码一个 base-64 编码的字符串
btoa()	            创建一个 base-64 编码的字符串
blur()	            把键盘焦点从顶层窗口移开
clearInterval()	    取消由 setInterval() 方法设置的定时器
clearTimeout()	    消由 setTimeout() 方法设置的定时器
close()	            关闭某个浏览器窗口
confirm()	        在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()	    创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()	            使一个窗口获得焦点
getSelection()    	返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()	获取指定元素的 CSS 样式
matchMedia()	    返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()	        将浏览器窗口移动指定的像素
moveTo()	        将浏览器窗口移动到一个指定的坐标
open()	            打开一个新的浏览器窗口或查找一个已命名的窗口
print()	            打印当前窗口的内容
prompt()	        显示一个可供用户输入的对话框
resizeBy()	        按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()	        将窗口的大小调整到指定的宽度和高度
scroll()	        已废弃。您可以使用 scrollTo() 方法来替代
scrollBy()	        将窗口的内容滚动指定的像素
scrollTo()	        将窗口的内容滚动到指定的坐标
setInterval()	    创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()	    创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()	            停止页面载入
postMessage()	    安全地实现跨源通信

  • 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

JS Navigator对象：获取浏览器信息

Navigator 属性
appCodeName	    返回当前浏览器的内部名称（开发代号）

appName		    返回浏览器的官方名称

appVersion	    返回浏览器的平台和版本信息

cookieEnabled	返回浏览器是否启用 cookie，启用返回 true，禁用返回 false

onLine		    返回浏览器是否联网，联网则返回 true，断网则返回 false

platform	    返回浏览器运行的操作系统平台

userAgent	    返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
Navigator 方法
javaEnabled()	返回浏览器是否支持运行 Java Applet 小程序，支持则返回 true，不支持则返回 false

sendBeacon()	向浏览器异步传输少量数据

  • 1
  • 2
  • 3

JS Screen对象：获取屏幕信息

screen 对象属性

availTop		返回屏幕上方边界的第一个像素点（大多数情况下返回 0）
availLeft		返回屏幕左边边界的第一个像素点（大多数情况下返回 0）
availHeight		返回屏幕的高度（不包括 Windows 任务栏）
availWidth		返回屏幕的宽度（不包括 Windows 任务栏）
colorDepth		返回屏幕的颜色深度（color depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
height			返回屏幕的完整高度
pixelDepth		返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM
width			返回屏幕的完整宽度
orientation		返回当前屏幕的方向

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

JS Location对象：获取URL

Location 属性
hash		返回一个 URL 中锚的部分，例如：http://c.biancheng.net#js 中的 #js。
host		返回一个 URL 的主机名和端口号，例如 http://c.biancheng.net:8080。
hostname	返回一个 URL 的主机名，例如 http://c.biancheng.net。
href	    返回一个完整的 URL，例如 http://c.biancheng.net/javascript/location-object.html。
pathname	返回一个 URL 中的路径部分，开头有个 /。
port		返回一个 URL 中的端口号，如果 URL 中不包含明确的端口号，则返回一个空字符串 ' '。
protocol	返回一个 URL 协议，即 URL 中冒号 : 及其之前的部分，例如 http: 和 https:。
search		返回一个 URL 中的查询部分，即 URL 中 ? 及其之后的一系列查询参数。


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
location 方法
assign()	加载指定的 URL，即载入指定的文档。
reload()	重新加载当前 URL。
replace()	用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace()
toString()	与 href 属性的效果相同，以字符串的形式返回当前完整的 URL。


  • 1
  • 2
  • 3
  • 4
  • 5

JS History对象：获取浏览历史

history 属性
length	             返回浏览历史的数目，包含当前已经加载的页面。
scrollRestoration	 利用浏览器特性，使我们在返回上一页或者下一页时，将页面滚动到之前浏览的位置，该属性有两个值，分别是 auto（表示滚动）与 manual（表示不滚动）。
state	             返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。


  • 1
  • 2
  • 3
  • 4
history 方法
back()	参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的 ← 按钮来实现同样的效果。
forward()	参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的 → 按钮来实现同样的效果。
go()	参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页。
pushState()	向浏览器的历史记录中插入一条新的历史记录。
replaceState()	使用指定的数据、名称和 URL 来替换当前历史记录。


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JS 定时器：setTimeout和setInterval

setTimeout()	在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次
setInterval()	按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口
clearInterval()

  • 1
  • 2
  • 3

JS try catch用法：异常处理

在编程中，有时代码并不会像我们预期的那样运行，会遇到各式各样的错误，例如代码中使用了错误的符号、调用未定义的方法、网络错误、读取不存在的文件、没有操作权限等。

根据类型的不同，JavaScript 编程中的错误大致可以分为以下三种类型：

  • 语法错误：也称为解析错误，一般是因为代码存在某些语法错误引起的。当发生语法错误时，代码会停止运行；
  • 运行时错误：也称为异常，发生在程序运行期间，例如调用未定义的方法、读取不存在的文件等，发生运行时错误也会终止代码运行；
  • 逻辑错误：是最难发现的一种错误，逻辑错误通常是因为代码存在瑕疵，导致程序输出意外的结果或终止运行。

1. 错误和异常的区别

  • 错误（Error）是在代码运行之前出现的，在运行 JavaScript 程序之前，JavaScript
    解释器会先对代码进行检查，如果代码有误，例如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。
  • 异常（Exception）是在代码运行中出现的，例如调用某个未定义的方法、读取不存在的文件等。在出现异常之前，代码的运行并不受影响，当出现异常时，会在浏览器控制台输出错误信息，并终止程序的运行。

2. JS 异常处理
异常处理的目的是捕捉产生异常的代码，使整个程序不会因为异常而终止运行。在 JavaScript 中，您可以使用 try catch 语句来捕获异常，并做出相应处理，语法格式如下：

//JS 抛出错误

try {
    // 可能会发生异常的代码
    throw new Error("抱歉，无法计算负数的平方根！")//抛出错误后执行catch
} catch(error) {
    // 发生异常时要执行的操作
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3. JS 错误类型

EvalError	    使用 eval() 函数时发出错误，会抛出该错误
InternalError	由 JavaScript 引擎内部错误导致的异常，会抛出该错误
RangeError	    范围错误，当使用了超出允许范围的数值时，会抛出该错误
SyntaxError	    语法错误，当代码中存在任何语法错误时，会抛出该错误
TypeError	    类型错误，当使用的值不是预期类型时，会抛出该错误，例如对数字调用字符串方法，对字符串调用数组方法等
URIError	    URI 错误，当使用 URI 相关函数但传入 URI 参数时，会抛出该错误
ReferenceError	参数错误，当尝试使用未定义的变量、函数、对象时，会抛出该错误


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
JS 表单验证

使用 JavaScript 进行表单验证
必填字段验证在用户注册时比较常见，通过必填字段验证，能够确保表单中的必填字段都被填写，例如用户名、密码、邮箱等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        .error{
            color: red;
        }
        label{
            display: inline-block;
            width: 70px;
            text-align: right;
        }
    </style>
</head>
<body>
    <form onsubmit="return validateForm()" action="" method="post">
        <fieldset>
            <legend>注册:</legend>
            <div class="row">
                <label>用户名：</label>
                <input type="text" name="name">
                <span class="error" id="nameErr"></span>
            </div>
            <div class="row">
                <label>密码：</label>
                <input type="password" name="pwd">
                <span class="error" id="pwdErr"></span>
            </div>
            <div class="row">
                <label>Email：</label>
                <input type="text" name="email">
                <span class="error" id="emailErr"></span>
            </div>
            <div class="row">
                <label>手机号：</label>
                <input type="text" name="mobile" maxlength="11">
                <span class="error" id="mobileErr"></span>
            </div>
            <div class="row">
                <label>验证码：</label>
                <input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
                <span class="error" id="captchaErr"></span>
            </div>
            <div class="row">
                <input type="submit" value="注册">
            </div>
        </fieldset>
    </form>
    <script>
        var captcha = getCaptcha(); // 生成验证码
        // 清空 input 标签后的提示信息
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            tags[i].onchange = function(){
                var idname = this.name + "Err";
                document.getElementById(idname).innerHTML = '';
            }
        }
        // 显示错误消息
        function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }
        // 验证表单数据
        function validateForm() {
            // 获取表单元素的值
            var name = document.querySelector("input[name='name']").value;
            var pwd = document.querySelector("input[name='pwd']").value;
            var email = document.querySelector("input[name='email']").value;
            var mobile = document.querySelector("input[name='mobile']").value;
            var captcha = document.querySelector("input[name='captcha']").value;
                  
            if(name == "" || name == null){
                printError("nameErr", "用户名不能为空");
                return false;
            }
            if(pwd == "" || pwd == null){
                printError("pwdErr", "密码不能为空");
                return false;
            }
            if(email == "" || email == null){
                printError("emailErr", "邮箱不能为空");
                return false;
            }
            if(mobile == "" || mobile == null){
                printError("mobileErr", "手机号不能为空");
                return false;
            }
            if(captcha == "" || captcha == null){
                printError("captchaErr", "验证码不能为空");
                return false;
            }
        }
        // 获取验证码
        function getCaptcha(){
            var cap = Math.floor(Math.random()*10000).toString();
            if(cap.length != 4) cap += "0";
            captcha = cap;
            document.getElementById("captcha").innerHTML = cap;
        }
    </script>
</body>
</html>


  • 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
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105

JS 闭包的原理和作用

1. 什么是闭包
所谓闭包，指的就是一个函数。当两个函数彼此嵌套时，内部的函数就是闭包。

因为在 JavaScript 中，函数属于对象，对象又是属性的集合，而属性的值又可以是对象，所以我们可以在函数内部再定义函数。例如在函数 A 中定义了函数 B，然后在函数外部调用函数 B，这个过程就是闭包。
闭包的形成条件是内部函数需要通过外部函数 return 给返回出来:

function funOne(){    // 外部函数
    var num = 0;      // 局部变量
    function funTwo(){   // 内部函数
        num++;                 
        return num;
    }
    return funTwo;
}
var fun = funOne();             // 返回函数 funTwo


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2. 闭包的用途
在介绍闭包的作用之前，我们先来了解一下 JavaScript 中的 GC（垃圾回收）机制。

在 JavaScript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象会一直保存在内存中。在上面的例子中，内部函数 funTwo() 定义在外部函数 funOne() 中，因此 funTwo() 依赖于 funOne()，而全局变量 fun 又引用了 funTwo()，所以 funOne() 间接的被 fun 引用。因此 funOne() 不会被 GC 回收，会一直保存在内存中，如下例所示：

function funOne(){
    var num = 0;
    function funTwo(){
        num++;
        console.log(num);
    }
    return funTwo;
}
var fun = funOne();
fun();      // 输出：1
fun();      // 输出：2
fun();      // 输出：3
fun();      // 输出：4


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

num 是外部函数 funOne() 中的一个变量，它的值在内部函数 funTwo() 中被修改，函数 funTwo() 每执行一次就会将 num 加 1。根据闭包的特点，函数 funOne() 中的变量 num 会一直保存在内存中。

当我们需要在函数中定义一些变量，并且希望这些变量能够一直保存在内存中，同时不影响函数外的全局变量时，就可以使用闭包。

3. 闭包的高级用法

var funOne = (function(){
    var num = 0;
    return function(){
        num++;
        return num;
    }
})();
console.log(funOne());      // 输出：1
console.log(funOne());      // 输出：2
console.log(funOne());      // 输出：3


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

JS严格模式（use strict）

由于 JavaScript 语法不够严谨，一直被人们所诟病，例如在使用一个变量时，可以不使用 var 关键字来提前声明（例如：url = ‘https://www.csdn.net/’;），此时 JavaScript 解释器会自动为您创建这个变量。为了使代码更加严谨，JavaScript 中引入了严格模式，一旦使用了严格模式，将不再允许使用那些不严谨的语法。

1. 什么是严格模式

严格模式是在 ECMAScript5（ES5）中引入的，在严格模式下，JavaScript 对语法的要求会更加严格，一些在正常模式下能够运行的代码，在严格模式下将不能运行。

添加严格模式，主要有以下几个目的：

消除 JavaScript 语法中一些不合理、不严谨的地方；
消除代码中一些不安全的地方，保证代码的安全运行；
提高 JavaScript 程序的运行效率；
为以后新版本的 JavaScript 做好铺垫。
目前，主流浏览器包括 IE10 及其之后的版本都已支持严格模式，JavaScript 正在向着更合理、更安全、更严谨的方向发展.

2. 启用严格模式

要启用严格模式，您只需要在 JavaScript 脚本的开头添加 “use strict”; 或 ‘use strict’; 指令即可，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        "use strict";
        x = 'https://www.csdn.net/'; // 此处报错：Uncaught ReferenceError: x is not defined at index.html:11
        console.log(x);
    </script>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

如果将 “use strict”; 指令添加到 JavaScript 程序的第一行，则表示整个脚本都会处于严格模式。如果在函数的第一行代码中添加 “use strict”;，则表示只在该函数中启用严格模式。

注意：“use strict”; 或 ‘use strict’; 指令只有在整个脚本第一行或者函数第一行时才能被识别，除了 IE9 以及更低的版本外，所有的浏览器都支持该指令。

3. 严格模式中的变化
  • 不允许使用未声明的变量
"use strict";
v = 1;        // 此处报错：Uncaught ReferenceError: v is not defined
for(i = 0; i < 2; i++) { // 此处报错：Uncaught ReferenceError: i is not defined
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 不允许删除变量或函数
"use strict";
var person = {name: "Peter", age: 28};
delete person;  // 此处报错：Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
function sum(a, b) {
    return a + b;
}
delete sum;  // 此处报错：Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 函数中不允许有同名的参数
"use strict";
function square(a, a) {     // 此处报错：Uncaught SyntaxError: Duplicate parameter name not allowed in this context
    return a * a;
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • eval 语句的作用域是独立的
"use strict";
eval("var x = 5; console.log(x);");
console.log(x);     // 此处报错：Uncaught ReferenceError: x is not defined


  • 1
  • 2
  • 3
  • 4
  • 不允许使用 with 语句
"use strict";
var radius1 = 5;
var area1 = Math.PI * radius1 * radius1;
var radius2 = 5;
with(Math) {        // 此处报错：Uncaught SyntaxError: Strict mode code may not include a with statement
    var area2 = PI * radius2 * radius2;
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 不允许写入只读属性
"use strict";
var person = {name: "Peter", age: 28};
Object.defineProperty(person, "gender", {value: "male", writable: false});
person.gender = "female"; // 此处报错：Uncaught TypeError: Cannot assign to read only property 'gender' of object '#<Object>'


  • 1
  • 2
  • 3
  • 4
  • 5
  • 不允许使用八进制数
"use strict";
var x = 010; // 此处报错：Uncaught SyntaxError: Octal literals are not allowed in strict mode.
console.log(parseInt(x));


  • 1
  • 2
  • 3
  • 4
  • 不能在 if 语句中声明函数
"use strict";
//如果在if语句中声明函数，则会产生语法错误
if (true) {
    function demo() { // 此处报错：Uncaught ReferenceError: demo is not defined
        console.log("https://www.csdn.net/");
    }
}
demo();


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 禁止使用 this 表示全局对象
"use strict";
var name = "https://www.csdn.net/";
function demoTest() {
    console.log(this); 
}
demoTest();


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

JS 解析JSON

什么是 JSON

JSON 是从 JavaScript 脚本中演变而来的，并且使用 JavaScript 中的语法来描述数据。与 XML 一样，JSON 也是一种基于文本的格式，文件扩展名为 .json。

目前大多数编程语言（例如 PHP、Java、.Net）都支持 JSON，JSON 中有两种基本的结构：

对象：由若干键/值对（即 key:value）组成的无序集合，每个对象以左花括号 { 开始，以右花括号 } 结尾，多个键/值对之间使用逗号 , 分隔；
数组：一个有序的值列表，每个数组以左方括号 [ 开始，以右方括号 ] 结尾，多个值之间使用逗号 , 分隔。
在 JSON 中，属性名称或键都是字符串格式的（需要使用英文的双引号括起来），而值则可以是任意类型，如下所示：

{
    "course": {
        "name": "JavaScript",
        "author": "https://www.csdn.net/",
        "year": 2021,
        "genre": "Getting Started tutorial",
        "bestseller": true
    },
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
在 JavaScript 中解析 JSON 数据
var json = '{"course": {"name": "JavaScript","author": "http://c.biancheng.net/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}';
var obj = JSON.parse(json);
console.log(obj.course);
console.log(obj.fruits);


  • 1
  • 2
  • 3
  • 4
  • 5
解析嵌套的 JSON 数据
在这里插入代码片var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fantasy Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;
// 将 JSON 数据转换为 JSON 对象
var obj = JSON.parse(json);
// 打印嵌套的 JSON 数据
function printValues(obj) {
    for (var k in obj) {
        if (obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};
// 调用 printValues() 函数
printValues(obj);
document.write("<hr>");
// 打印 JSON 数据中的单个值
document.write(obj["book"]["author"] + "<br>");         // 输出: J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>");  // 输出: Harry Potter
document.write(obj["book"]["price"]["hardcover"]);      // 输出: $20.32


  • 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
将数据转换为 JSON
var obj = {
    "name": "JavaScript",
    "author": "https://www.csdn.net/",
    "year": 2021,
    "genre": "Getting Started tutorial",
    "bestseller": true
};
var json = JSON.stringify(obj);
document.write(json);


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

注意：虽然 JavaScript 对象与 JSON 对象看起来非常相似，但它们并不相同，例如在 JavaScript 中，对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来，也可以完全省略引号。但是，在 JSON 中，所有属性名称都必须用双引号括起来。

JS cookie的设置、获取和删除

在编程领域，Cookie 代表一种小型的文本文件，可以让开发人员在用户计算机上存储少量的数据（大约 4kb），来记录用户的某些信息，例如用户身份、喜好等，当用户下次访问网站时，网站可以通过检索这些信息来为用户展示个性化页面。另外，一些电商网站的购物车也用到了 Cookie 技术。

在 HTTPS 协议还未诞生之前，Web 浏览器和服务器之间需要通过 HTTP 协议进行通信，HTTP 协议是一种无状态协议，当服务器与浏览器之间完成一次交互（浏览器向服务器发送请求，服务器做出响应）后，链接会被关闭，服务器就会忘记浏览器的一切。Cookie 就是为了让服务器能够记住浏览器而发明的。

提示：Cookie 由若干个键/值对组成（例如 key1=value1;key2=value2），一个 Cookie 最大可以存储 4kb 的数据，超过长度的 Cookie 将被忽略。您也可以在浏览器端禁用 Cookie，这样一些借助 Cookie 才能完成的操作将无法进行。另外，不要在 Cookie 中存储账号、密码等敏感信息。

Cookie 最初是为 PHP、ASP 等服务器端脚本语言设计的，但是我们也可以使用 JavaScript 来操作，只是操作起来比较复杂，下面就来简单介绍一下如何使用 JavaScript 来操作 Cookie。

JS 设置 Cookie
document.cookie = "url=http://c.biancheng.net/";
//path为/可在同域名下所以地方使用，为javascript//在当前页面使用
//domain在指定域名下的子域名使用
//expires修改过期时间
document.cookie = "url=http://c.biancheng.net/; path=/; domain=.biancheng.net; expires=Sun, 31 Dec 2017 12:00:00 UTC;";

  • 1
  • 2
  • 3
  • 4
  • 5
JS 获取 Cookie
document.cookie//返回一个字符串,使用split(';')拆分

  • 1
JS 修改或更新 Cookie 的值
document.cookie = "url=http://c.biancheng.net/javascript/; path=/; max-age=" + 365*24*60*60;

  • 1
JS 删除 Cookie
// 创建一个 Cookie
document.cookie = "url=http://c.biancheng.net/; path=/; max-age=" + 30*24*60*60;
// 删除这个 Cookie
document.cookie = "url=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";


  • 1
  • 2
  • 3
  • 4
  • 5

JS Ajax 请求

  • 检索响应信息
    请求发送成功后（即使用 send() 方法发送请求后），可以通过检索 XMLHttpRequest 对象来获取服务器的响应信息，XMLHttpRequest 对象中有许多与响应有关的属性，例如：
  • XMLHttpRequest.readyState：一个无符号整型数字，表示请求的状态码，取值如下所示：
    0：未初始化，尚未调用 open() 方法；
    1：启动，已调用 open() 方法，但尚未调用 send() 方法；
    2：发送，已调用 send() 方法，但尚未接收到响应；
    3：接收，已接收到部分响应数据，但尚未完成；
    4：完成，已接收到全部响应数据，可以在客户端使用了。
  • XMLHttpRequest.onreadystatechange：指定一个函数（回调函数），当 readyState
    的值发生改变时，就会调用这个函数；
  • XMLHttpRequest.responseText：请求的响应信息，如果请求未成功或尚未发送请求，则为 null；
  • XMLHttpRequest.responseType：一个枚举值，用于指定响应中包含的数据类型；
  • XMLHttpRequest.responseURL：返回响应的序列化 URL（与请求的 URL 相同），如果 URL
    为空则返回空字符串；
  • XMLHttpRequest.responseXML：返回一个包含 HTML 或 XML 的 Document
    对象，若请求未成功、未发送或响应数据无法解析为 XML 或 HTML 则返回 null；
  • XMLHttpRequest.status：一个无符号整型数字，表示请求的响应状态码，常见的响应状态码如下所示：
    200：请求成功，服务器成功处理了请求；
    404：请求失败，服务器未找到请求的页面；
    500：服务器暂时不可用。
  • XMLHttpRequest.statusText：一个字符串，表示响应状态的文本信息，例如“OK”或“Not Found”；
  • XMLHttpRequest.timeout：一个无符号整型数字，表示请求的超时时间，单位为毫秒，若超过该时间，请求会自动终止，默认值为
    0，表示没有超时时间；
  • XMLHttpRequest.upload：返回一个 XMLHttpRequestUpload 对象，用来表示上传的进度。
//实例化一个 XMLHttpRequest 对象
 var request = new XMLHttpRequest();
//使用 XMLHttpRequest 对象的 open() 方法来初始化一个请求
request.open('GET', 'http://192.168.9.62:8080/web/v1/startup/productinfo');
// 监听 readyState 的变化
request.onreadystatechange = function() {
      // 检查请求是否成功
      if(this.readyState === 4 && this.status === 200) {
        // 将来自服务器的响应插入当前页面
        console.log(JSON.parse(this.responseText));
        // document.getElementById("result").innerHTML = this.responseText;
       }
 };
//使用 XMLHttpRequest 对象的 send() 方法将请求发送到服务器
request.send();



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

JS 类型转换

JS 隐式类型转换

隐式转换就是自动转换.
javaScript 中，表达式中包含以下运算符时，会发生隐式类型转换：

  • 算术运算符：加（+）、减（-）、乘（*）、除（/）、取模（%）；
  • 逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）；
  • 字符串运算符：+、+=。
document.write("3" - 2);           // 输出：1
document.write("3" + 2);           // 输出："32"
document.write(3 + "2");           // 输出："32"
document.write("3" * "2");         // 输出：6
document.write("10" / "2");        // 输出：5
document.write(1 + true);          // 输出：2
document.write(1 + false);         // 输出：1
document.write(1 + undefined);     // 输出：NaN
document.write(3 + null);          // 输出：3
document.write("3" + null);        // 输出："3null"
document.write(true + null);       // 输出：1
document.write(true + undefined);  // 输出：NaN


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

字符串加数字，数字会转换为字符串；
数字减字符串，字符串会转换为数字，如果字符串无法转换为数字（例如"abc"、“JavaScript”），则会转换为 NaN；
字符串减数字，字符串会转换为数字，如果字符串无法转换为数字，则会转换为 NaN；
乘、除运算时，也会先将字符串转换为数字。

JS 强制类型转换
Number()



  • 1
  • 2

在使用 Number() 函数时，有以下几点需要注意：

  • 如果参数中只包含数字，将转换为十进制数字，忽略前导 0
    以及前导空格，如果数字前面有负（-）号，那么-会保留在转换结果中，如果数字前面有加（+）号，转换后会删掉+号；
  • 如果参数中包含有效浮点数字，将转换为对应的浮点数字，忽略前导 0 以及前导空格，同样对于数字前的正负号，会保留负号忽略正号；
  • 如果参数中包含有效的十六进制数字，将转换为对应大小的十进制数字；
  • 如果参数为空字符串，将转换为 0；
  • 如果参数为布尔值，则将 true 转换为 1，将 false 转换为 0；
  • 如果参数为 null，将转换为 0；
  • 如果参数为 undefined，将转换为 NaN；
  • 如果参数为 Date 对象，将转换为从 1970 年 1 月 1 日到执行转换时的毫秒数；
  • 如果参数为函数、包含两个元素以上的数组对象以及除 Date 对象以外的其他对象，将转换为 NaN；
  • 如果在参数前面包含了除空格、+和-以外的其他特殊符号或非数字字符，或在参数中间包含了包括空格、+和-的特殊符号或非数字字符，将转换为
    NaN。
parseInt()

string 为要转换的值，如果参数不是一个字符串，则会先将其转换为字符串，字符串开头的空白将会忽略

radix 为一个可选参数，表示字符串的基数，取值范围在 2 到 36 之间，例如将 radix 参数设置为 16，则表示将 string 转换为一个十六进制数

在使用 parseInt() 函数时，有以下几点需要注意：

  • 解析字符串时，会忽略字符串前后的空格，如果字符串第一个字符为负号（-），那么负号会保留在转换结果中，如果字符串第一个字符为正号（+），那么转换后将忽略正号；
  • 如果字符串前面为除空格、正号（+）、负号（-）以外的特殊符号或者除 a～f（或
    A～F）之外的非数字字符，那么字符串将不会被解析，返回结果为 NaN；
  • 在字符串中包含空格、小数点（.）等特殊符号或非数字的字符时，解析将在遇到这些字符时停止，并返回已解析的结果；
  • 如果字符串是空字符串，返回结果为 NaN。
parseInt(string, radix);//string字符串，radix进制数
document.write(parseInt("1101",2));   // 输出：13
document.write(parseInt("a37f",16));  // 输出：41855
document.write(parseInt("123"));      // 输出：123
document.write(parseInt("  123"));    // 输出：123


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
parseFloat()

string 为要被转换为浮点数的值，如果转换失败，则会返回 NaN

parseFloat() 函数时，有以下几点需要注意：

  • 如果在解析的过程中遇到了正号（+）、负号（-）、数字（0-9）、小数点（.）、或科学计数法中的指数（e 或E）以外的字符，则会忽略该字符以及之后的所有字符，并返回解析到的浮点数；
  • 解析过程中若遇到多个小数点，则会在解析到第二个小数点时停止，并返回第二个小数点之前的解析结果；
  • 解析过程中会忽略参数开头或末尾的空白字符；
  • 如果参数的第一个字符不能被解析为数字，则会返回 NaN。
parseFloat(string);
document.write(parseFloat("312.456"));  // 输出：312.456
document.write(parseFloat("-3.12"));    // 输出：-3.12
document.write(parseFloat("+3.12"));    // 输出：3.12
document.write(parseFloat(".12"));      // 输出：0.12



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

JS 事件冒泡与事件捕获

在这里插入图片描述

1. 事件捕获

由微软公司提出，事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标节点；

2. 事件冒泡

由网景公司提出，与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。整个过程就像水中的气泡一样，从水底向上运动。

3. 阻止事件捕获和冒泡

//stopPropagation() 会阻止事件捕获和事件冒泡，但是无法阻止标签的默认行为，例如点击链接任然可以打开对应网页。
event.stopPropagation();

//例如某个节点定义了多个点击事件，当事件触发时，这些事件会按定义顺序依次执行，如果其中一个事件处理程序中使用了 stopImmediatePropagation() 方法，那么剩下的事件处理程序将不再执行。
event.stopImmediatePropagation();



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

4. 阻止默认操作
当您单击某个链接时，会自动跳转到指定的页面，当您单击提交按钮时，会将数据提交到服务器等。如果不想这样的默认操作发生，可以使用 preventDefault() 方法来阻止，

event.preventDefault();



  • 1
  • 2
  • 3

JS事件委托（事件代理）

利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托（Event Delegation，也称为“事件代理”），是 JavaScript 中最热门的技术之一。

事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。

1. 为什么要使用事件委托
在 JavaScript 中，页面内事件处理程序的个数会直接影响页面的整体性能，因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，页面的性能则越差。此外，事件处理程序需要与 DOM 节点进行交互，访问 DOM 的次数越多，引起浏览器重绘和重排的次数也就越多，从而影响页面的性能。

重绘是指当元素样式改变时，浏览器会根据元素的新样式重新绘制元素的外观。重排是指当 DOM 树的一部分发生变化时（例如元素尺寸改变），浏览器会重新创建 DOM 树。

当页面中很多表格或列表需要添加事件时，如果逐个添加那就太麻烦了，但是使用事件委托就能极大的减轻我们的工作量，同时也能提高页面的性能。

2. 事件委托实现原理
事件委托是利用事件的冒泡原理来实现的，大致可以分为三个步骤：

  • 确定要添加事件元素的父级元素；
  • 给父元素定义事件，监听子元素的冒泡事件；
  • 使用 event.target 来定位触发事件冒泡的子元素。

使用事件委托时，并不是说把事件委托给随意一个父元素就行。因为事件冒泡的过程也需要消耗时间，距离越远，所需的时间也就越长，所有最好在直接父元素上使用事件委托。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        window.onload = function(){
            var the_ul = document.getElementById('list');
            the_ul.onclick = function(e){
                console.log(e.target.innerHTML)
            }
        }
    </script>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

使用事件委托我们只需要为 ul 标签绑定事件，当 li 标签被点击时，由于事件冒泡的特性，会触发 ul 标签上的事件，我们只需要在事件中通过 event 对象中的 target 属性来找到被点击的 li 标签即可。不过这样做也有一个弊端，那就是当我们点击 ul 标签时，也会触发事件。

如果我们需要动态的向 ul 标签中添加 li 标签，同时也需要在新添加的 li 标签中添加点击事件，就必须通过事件委托来实现了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list" style="width: 100px;margin:0;float: left;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button style="float:left;" id="addli">添加一个 li</button>
    <button style="float:left;" id="delli">删除一个 li</button>
    <script>
        window.onload = function(){
            var the_ul = document.getElementById('list');
            var the_li = the_ul.getElementsByTagName('li');
            var sum = the_li.length
            the_ul.onclick = function(e){
                console.log(e.target.innerHTML)
            };
            document.getElementById('addli').onclick = function (){
                var newli = document.createElement("li");
                newli.innerHTML = ++sum;
                the_ul.appendChild(newli);
            };
            document.getElementById('delli').onclick = function (){
                the_ul.firstElementChild.remove();
            };
        }
    </script>
</body>
</html>


  • 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

3. 事件委托的优点

1) 减小内存消耗
使用事件委托可以大量节省内存，减少事件的定义，通过上面的示例可以看出，要为 ul 标签下的所有 li 标签添加点击事件，如果分别为每个 li 标签绑定事件，不仅写起来比较繁琐，而且对内存的消耗也非常大。而使用事件委托的方式将点击事件绑定到 ul 标签上，就可以实现监听所有 li 标签，简洁、高效。

2) 动态绑定事件
在网页中，有时我们需要动态增加或移除页面中的元素，比如上面示例中动态的在 ul 标签中添加 li 标签，如果不使用事件委托，则需要手动为新增的元素绑定事件，同时为删除的元素解绑事件。而使用事件委托就没有这么麻烦了，无论是增加还是减少 ul 标签中的 li 标签，即不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。

所以使用事件委托动态绑定事件可以减少很多重复工作的。

3. 总结
要使用事件委托，需要保证事件能够发生冒泡，适合使用事件委托的事件有 click、mousedown、mouseup、keydown、keyup、keypress 等。需要注意的是，虽然 mouseover 和 mouseout 事件也会发生事件冒泡，但处理起来非常麻烦，所以不推荐在 mouseover 和 mouseout 事件中使用事件委托。

另外，对于不会发生事件冒泡的事件（例如 load、unload、abort、focus、blur 等），则无法使用事件委托。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/486656
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号