提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

三大部分数据类型注释运算符函数分支结构循环结构DOM树获取标签对象的相关方法创建元素的相关方法对元素对象内容进行操作事件的绑定方式JS中的事件事件的传播特性事件的委托格式规则Window对象Screen对象Location对象history对象计时事件弹窗Cookie对象

JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言，弱类型，脚本语言

三大部分

<script src="Script文件地址"></script>

/*定义数组*/
var a = new Array();
//或
var a = [1,"lucy"];
/*数组索引操作*/
a[0] = 12;
a[1] = "lucy";
document.write(a[0] + "," + a[1]);

a.length(); //数组长度
a.push(); //往数组尾部添加元素，类似与进栈
a.pop(); //取值数组最后一个元素，并且移除该元素，类似与出栈

/* 声明对象 */
var student = {name:"lucy",age:12,sex:"男"};
/*对象属性赋值*/
student.age = 15;
/*使用对象的属性,对象名.属性*/
document.write(student.name + "," + student.age + "," + student.sex);

var 变量名 = 值;
let 变量名 = 值;

/*定义函数*/
function 函数名(参数列表){
    return 返回值    //可选
}
/*调用函数*/
函数名();

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

核心（ECMAScript）：语法、类型、语句、关键字等

文档对象模型（DOM）：专门用于完成网页之间的交互

浏览器对象模型（BOM）：主要用于对浏览器窗口进行操作

运行过程

使用方式

1、在html文件中的**<script></script>**标签中直接编写

• script标签可以写多个
• script标签可以出现在任意位置

2、在js文件中编写，在HTML文件中引用

<script src="Script文件地址"></script>

ECMAScript

数据类型

/*定义数组*/
var a = new Array();
//或
var a = [1,"lucy"];
/*数组索引操作*/
a[0] = 12;
a[1] = "lucy";
document.write(a[0] + "," + a[1]);

a.length(); //数组长度
a.push(); //往数组尾部添加元素，类似与进栈
a.pop(); //取值数组最后一个元素，并且移除该元素，类似与出栈

/* 声明对象 */
var student = {name:"lucy",age:12,sex:"男"};
/*对象属性赋值*/
student.age = 15;
/*使用对象的属性,对象名.属性*/
document.write(student.name + "," + student.age + "," + student.sex);

var 变量名 = 值;
let 变量名 = 值;

/*定义函数*/
function 函数名(参数列表){
    return 返回值    //可选
}
/*调用函数*/
函数名();

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

数组

/*定义数组*/
var a = new Array();
//或
var a = [1,"lucy"];
/*数组索引操作*/
a[0] = 12;
a[1] = "lucy";
document.write(a[0] + "," + a[1]);

允许存放不同的数据类型，但是一般存放统一的数据类型

数组元素没有存放的位置，默认值undefined

常用方法

a.length(); //数组长度
a.push(); //往数组尾部添加元素，类似与进栈
a.pop(); //取值数组最后一个元素，并且移除该元素，类似与出栈

对象

/* 声明对象 */
var student = {name:"lucy",age:12,sex:"男"};
/*对象属性赋值*/
student.age = 15;
/*使用对象的属性,对象名.属性*/
document.write(student.name + "," + student.age + "," + student.sex);

变量

JavaScript使用var、let关键字定义变量

var 变量名 = 值;
let 变量名 = 值;

变量名称对大小写敏感

注释

/*定义函数*/
function 函数名(参数列表){
    return 返回值    //可选
}
/*调用函数*/
函数名();

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

• 单行注释：//
• 多行注释：/* ... */

运算符

/*定义函数*/
function 函数名(参数列表){
    return 返回值    //可选
}
/*调用函数*/
函数名();

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

算数运算符

除法和java不一样，数/数 = 数学结果，1 / 2 = 0.5

其余运算符与java中一致

关系运算符

==：只比较值是否相等，和类型无关（基本数据类型）

===：绝对等于（值和类型都相等）

!=：只比较值是否不相等，和类型无关（基本数据类型）

!==：绝对不等于（值和类型都不相等）

逻辑运算符

&、|的结果为数值0（false）、1（true）

其余运算符和java相似

函数

/*定义函数*/
function 函数名(参数列表){
    return 返回值    //可选
}
/*调用函数*/
函数名();

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

函数可以将一些代码放置在一起，形成一个代码块，该代码块可以反复的进行使用

格式

/*定义函数*/
function 函数名(参数列表){
    return 返回值    //可选
}
/*调用函数*/
函数名();

注意

1、函数可以多个，如果一旦方法的名字相同的话，函数没有重载，后面同名函数会覆盖前面的同名函数

2、调用函数时，可以传入比函数定义参数更多的参数，只是多出来的参数不会被处理

3、对象的属性也可以是函数，可以使用**对象名.函数名()**进行调用

• 如果需要在对象中的函数调用对象的属性的话，不可以直接写属性名进行调用
• 需要使用this.属性进行调用

4、变量的作用域是在一个函数中

分支结构

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

if...else if...else的使用方法和java中的类似

switch...case的使用方法和java中的类似，使用时需要注意数据类型，在匹配时，需要绝对等于

循环结构

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

for循环

和java中的类似

for...in循环

//循环遍历数组
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

while循环

和java类似

do...while循环

和java类似

循环中的break和continue关键字的效果和java中一样

常用API

document.write("输出的内容，可以带html标签")
console.log("在浏览器控制台输出，调试模式下可以看到")
Math.random()  //随机数
parseInt(将数值解析为整数)
prompt("请输入"); //弹窗输入
eval("1+1"); // 可以计算字符串的结果

DOM

文档对象模型（Document Object Model）

在网页被加载时，浏览器会创建页面文档对象模型，形成DOM树

DOM树

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

• Document：树对象，文档对象
• Element：元素对象，标签对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象
• Node：节点对象

获取标签对象的相关方法

//页面加载完成，再执行函数
window.onload = function(){}

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

如果直接在script标签中执行获取标签对象的方法，页面没有加载，获取的对象为null

//页面加载完成，再执行函数
window.onload = function(){}

创建元素的相关方法

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

==注意：创建出来的对象，都是游离状态,需要放置在父元素对象上==

父元素对象.appendChild(创建的子元素对象);
//删除子元素对象
父元素对象.removeChild(需要删除的子元素对象);

对元素对象内容进行操作

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

标签对象.属性名 = "属性值";

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

操作的是元素对象，不可以操作元素对象数组，如果需要批量操作，只能写循环进行

获取修改标签内容

标签对象.innerHTML = "字符串";
标签对象.innerText = "字符串";
//区别
innerHTML，获取到的是HTML语句，用于处理标签，会解析字符串中的标签内容
innerText，获取到的是内容，用于处理文本，不会解析字符串中的标签内容

获取修改标签属性

标签对象.属性名 = "属性值";

获取修改标签样式

//在标签上添加样式(样式多的话，不推荐)
标签对象.style.样式名 = "值";
//给元素对象添加类属性,在style标签中添加类样式
标签对象.className = "类名"  //只可以加一个类名
标签对象.classList.add("类名1","类名2",...); //可以添加多类名
//删除多类名元素对象的一个类名
标签对象.classList.remove("类名");

事件

事件的绑定方式

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

1、在标签元素上添加onXXX属性的方式绑定（xxx代表事件名称）onXXX的值为js代码，缺点是耦合度高

2、获取标签元素的对象，通过标签.onXXX = function(){}，绑定事件

3、通过dom元素对象的addEventListener("事件名称",function(){}，传播特性)方法绑定事件（事件名称不需要on前缀），推荐

JS中的事件

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

• 点击事件：
  • onclick：鼠标点击某个对象
  • ondblclick：鼠标双击某个对象
• 焦点事件：
  • onblur：元素失去焦点
  • onfocus：元素获得焦点
  • blur()：一调用，就会失去焦点
  • focus()：一调用，就会获取焦点
• 键盘相关事件：
  • onkeydown：某个键盘的键被按下
  • onkeypress：某个键盘的键被按下或按住，某个键盘按键被按下并松开。
  • onkeyup：某个键盘的键被松开
• 加载事件：
  • onload：某个页面或图像被完成加载
  • onunload：用户离开某个页面
• 鼠标相关事件：
  • onmousedown：某个鼠标按键被按下
  • onmousemove：鼠标被移动
  • onmouseout：鼠标从某元素移开
  • onmouseover：鼠标被移到某元素之上
  • onmouseup：某个鼠标按键被松开
• 表单相关事件：
  • onchange：用户改变域的内容
    • 支持该事件的 HTML 标签：<input type="text">, <select>, <textarea>
  • onselect：文本被选定
    • 支持该事件的 HTML 标签：<input type="text">, <textarea>
  • onsubmit 提交按钮被点击

事件的传播特性

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

**addEventListener("事件名称",function(){}，传播特性)：**默认的传播方式是false，冒泡

事件的冒泡

如果点击最内层的红色元素的话，点击事件也会传播到外层的蓝色元素，称为事件的冒泡

事件的捕获

==addEventListener可以改变事件的传播方式，第三个参数为true==

如果点击最外层的蓝色元素的话，点击事件会传播到内层的红色元素，称为事件的捕获

事件的委托

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

将一个元素A中的子元素的点击事件交给元素A处理，称为事件的委托

例如，接收表格中的按钮的点击事件

//变量e用于接收浏览器传入的点击目标对象信息
table.onclick = function(e){
    //获取到事件的触发元素对象
    var t = e.target;
    //获取触发元素对象的名称
    var butName = t.innerText;
    //筛选按钮类型
    switch(butName){
        case "购买":
            //获取购买按钮的父元素对象
            var td = but.parentElement;
            //获取td对象的父元素对象
            var tr = td.parentElement;
            //获取tr的td子元素
            var tds = tr.children;
            alert("购买：" + tds[0].innerText);
            break;
        case "加入购物车":
            break;
        case "查看详情":
            break;
    }
}

正则表达式

格式

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

//正则表达式格式
/正则表达式主体/修饰符(可选)
//正则表达式验证
var regExp = /正则表达式/;
regExp.test("校验的字符串");

规则

var a = "abcABC";
var r = a.match(/b/gi);

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

var a = "abc12def34";
var r = a.split(/\d+/);

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

方括号用于查找某个范围内的字符：

元字符是拥有特殊含义的字符：

量词:

修饰符可以在全局搜索中不区分大小写:

使用String类型的match方法，可以匹配正则表达式

var a = "abcABC";
var r = a.match(/b/gi);

使用String类型的replace方法，可以替换字符串中的字符

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

使用String类型的search方法，可以查询匹配的类型首次开始位置索引

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

使用String类型的split方法，可以按照特定规则分割字符串

var a = "abc12def34";
var r = a.split(/\d+/);

汉字的Unicode编码：[\u4e00-\u9fa5]

在表单标签相关属性：

pattern：相关文本规则，正则表达式不需要//

required：值为required，值不可以为空

BOM

浏览器对象模型（Browser Object Model）尚无正式标准

Window对象

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

所有浏览器都支持 window 对象。它表示浏览器窗口。

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

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

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

Window 常用属性、方法

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)

window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

window.open("新窗口地址","新窗口名称","新窗口其余属性设置") - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

Screen对象

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

window.screen 对象包含有关用户屏幕的信息。

Screen常用属性、方法

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

screen.colorDepth - 色彩深度

screen.pixelDepth - 色彩分辨率

Location对象

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器本窗口重定向到新的页面。

Location常用属性、方法

location.hostname - 返回 web 主机的域名

location.pathname - 返回当前页面的路径和文件名

location.port - 返回 web 主机的端口 （80 或 443）

location.protocol - 返回所使用的 web 协议（http: 或 https:）

location.href 返回当前页面的 URL

location.href = 'URL' - 可以重定向到新的页面

location.assign() 方法加载新的文档

history对象

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

window.history 对象包含浏览器的历史。

history常用属性、方法

history.go()：加载 history 列表中的某个具体页面,go方法中可以传递参数，如果是正数，就是下某页，如果是负数，就是上某页

history.length：返回浏览器历史列表中的 URL 数量

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

计时事件

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式

• 第一个参数：时间到了要执行的方法
• 第二个参数：周期（毫秒）
• 如果不关闭，它会一直执行下去

clearInterval()：取消由setInterval()设置的timeout

setTimeout()：在指定的毫秒数后调用函数或计算表达式

• 第一个参数：时间到了要执行的方法
• 第二个参数：过多长时间执行该方法（毫秒）
• 执行完一次之后，就不再执行

clearTimeout()：取消由 setTimeout()方法设置的timeout

弹窗

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

alert("警告信息");

确认框

confirm("提示信息");

返回值为boolean类型，选择确定返回true，选择取消返回false

提示框

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

window.prompt("提示信息","默认值");

Cookie对象

document.cookie="key=value";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

var x = document.cookie;

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Cookie 用于存储 web 页面的用户信息。

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

document.cookie="key=value";

添加过期时间

以 UTC 或 GMT 时间，默认情况下，cookie 在浏览器关闭时删除

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

读取 Cookie

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： key1=value;key2 =value; key3=value;

var x = document.cookie;

删除 Cookie

只需要设置 expires 参数为以前的时间即可

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

删除时不必指定 cookie 的值