JS基础第三节

一、DOM

什么是DOM？Document Object Model(文档对象模型)。DOM是针对HTML和XML文档的一个API(Application Programming Interface应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

childNodes 子节点集合（包含文本节点、注释节点、标签节点）

children子节点集合，但是只包含标签节点

firstChild 子节点集合中的第一个节点，任意类型

firstElementChild 子节点集合中的第一个标签节点

lastChild 子节点集合中的最后一个节点，任意类型

lastElementChild 子节点集合中的最后一个标签节点

nextSibling 同级以下相邻的第一个节点，任意类型

nextElementSibling 同级以下第一个节点标签节点

previousSibling同级以上相邻的第一个节点，任意类型

previousElementSibling同级以上第一个节点标签节点

nodeName节点名称

nodeType节点类型（1元素节点，3文本节点，8注释节点，10doctype节点）

parentNode父节点，肯定是标签节点

parentElement 父节点，肯定是标签节点

1.节点操作

使用DOM创建p标签，一定要注意创建者为document

createElement("标签名"): 创建新元素

createTextNode(""): 创建文本节点

appendChild(node): 向childNodes末尾插入一个节点node

insertBefore(newElement, targetElement): 向targetNode之前插入节点node

replaceChild(newNode, oldNode): newNode替换节点oldNode

removeChild(node): 移除父节点的某个子节点

remove()，直接删除

插入、替换、移除方法:document.body.insertBefore(node, targetNode)

appendChild，在父节点的childNodes数组的末尾添加一个新的节点

var p=document.createElement("p");

p.innerHTML="我是新加的段落";

div.appendChild(p);

var p=document.createElement("p");

//创建一个文本节点

var t=document.createTextNode("我是文本添加的");

p.appendChild(t);

div.appendChild(p);

insertBefore，在父节点p节点的前面添加一个h3节点

var h3=document.createElement("h3");

h3.innerHTML="我是后来的三级标题";

div.insertBefore(h3, p);

将h3换成一个h1，replaceChild,将父节点中的h3用h1替换，h3和h1是单个变量

var h1=document.createElement("h1");

h1.innerHTML="我是h1";

div.replaceChild(h1, h3);

移除父节点中的某一个子节点，删除：第一种方法把父节点中的某一个节点删除，第二种方法直接删除自身

div.removeChild(p);

p.remove();

通过遍历删除第一个p标签

var childs=div.children;

for(vari=0; i<childs.length; i++) {

if(childs[i].nodeName=="P") {//这里的P一定要是大写的额，否则没有效果额

childs[i].remove();

break;

}

获取到第一个h3，删除h3的nextElementSibling

var newH3=div.firstElementChild;

var removeP=newH3.nextElementSibling;

removeP.remove();

2. 节点复制

cloneNode(boolean) 节点复制

true 深复制，复制节点本身以及子节点树

false浅复制，只复制节点本身

cloneNode 方法复制不会将原有元素中添加的js属性复制过去，但是css属性可以复制过去,通过js添加的css属性也可以复制过去

var div=document.getElementsByTagName("div")[0];

var newDiv=div.cloneNode(true);

3.属性常见的操作方法

不管是设置，获取，修改属性，都是针对元素的行间属性（常用的有：class id title style target href）

设置

a.setAttribute("title","popo");

a.setAttribute("class","haha");

a.setAttribute("style","background-color: green;")

删除

a.removeAttribute("title");

获取

console.log(a.getAttribute("href"));

4.js获取非行间样式

ie所支持的获取非行间样式的方法：currentStyle

用法: 对象.currentStyle.样式名，例: oDiv.currentStyle.width

非ie所支持的获取非行间样式的方法：getComputedStyle

用法: getComputedStyle(对象, 伪类).样式名

例: getComputedStyle(oDiv, null).color

getComputedStyle是一个函数，想获取哪个的样式就把哪个当参数传进去

console.log(getComputedStyle(div).width);

二、事件对象

document.onclick=function(event) {

//event 火狐，需要传参数

//window.event chrome

var ev=event||window.event;

//window.event获取事件对象

console.log(ev);

//网页标题

document.title=ev.clientX;

//clientX clientY 获取的值是鼠标距离可视化窗口的左右的偏移距离

}

1.鼠标移入移出事件

onmouseover、onmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

div.onmouseover=function(){

console.log("移入");

}

div.onmouseout=function(){

console.log("移出");

}

div.onmouseenter=function(){

console.log("移入");

}

div.onmouseleave=function(){

console.log("移出");

}

2.鼠标按下、抬起、点击、双击事件

//鼠标按下就会触发

btn.onmousedown=function() {

console.log("onmousedown");

}

//鼠标抬起时触发

btn.onmouseup=function() {

console.log("onmouseup");

}

//鼠标点击触发

btn.onclick=function(){

console.log("onclick");

}

//鼠标双击事件

div.ondblclick=function(){

console.log("ondblclick");

}

3.键盘事件

//键盘按下事件

document.onkeydown=function(event) {

console.log("onkeydown");

var ev=event||window.event;

console.log(ev);

console.log(ev.key);

console.log(ev.code);

console.log(ev.keyCode);

//空格32

//0~948~57

//左上右下 37，38，39，40

}

//键盘控制元素移动

//实现点上下左右键，box移动

var box=document.getElementById("box");

document.onkeydown=function(event) {

var ev=event||window.event;

switch(ev.keyCode) {

case37:

box.style.left=box.offsetLeft-100+"px";

break;

case38:

box.style.top=box.offsetTop-100+"px";

break;

case39:

box.style.left=box.offsetLeft+100+"px";

break;

case40:

box.style.top=box.offsetTop+100+"px";

break;

default:

alert("你个菜鸡");

break;

}

//键盘的抬起事件

document.onkeyup=function() {

console.log("onkeyup");

}

//键盘长按事件

//onkeypress

4.表单事件

onchange 当表单元素的值发生变化时触发

var Form=document.getElementById("form");

Form.onchange=function() {

console.log("onchange");

}

//聚焦与失焦事件 onfocus onblur

var Txt=document.getElementById("txt");

Txt.onfocus=function() {

this.value="onfocus";

}

Txt.onblur=function() {

this.value="onblur";

}

//表单提交事件onsubmit

Form.onsubmit=function(event) {

varev=event||window.event;

//如果内容是空，阻止表单提交事件

if(Txt.value=="") {

//阻止默认操作,全兼容

//return false;

//阻止默认操作,推荐使用的

ev.preventDefault();//不兼容IE6~8

}

5.绑定事件

addEventListener(事件名称 , 函数,捕获 )方法绑定事件

removeEventListener(事件名称 , 函数,捕获 )解除绑定

解除绑定时，为了方便操作，最好把绑定的事件，加上函数名

第一个参数，事件名称，不要带on，带引号

第二个参数，为监听者，就是具体的功能代码

第三个参数，为true或者false，false冒泡如果是冒泡，事件从响应元素逐渐往上传递；true下沉如果是下沉，事件是从下级逐级往下沉，一直到响应元素

如果是直接绑定事件默认是冒泡

window.addEventListener("load",function() {

alert("a");

},false)

IE下使用attachEvent(事件名称，函数)方法绑定事件

detachEvent(事件名称，函数)解除绑定

第一个参数为事件类型，要带on，带引号

第二个参数，为监听者，就是具体的功能代码

window.attachEvent("onload", function() {

alert("a");

})

6.事件捕获和事件冒泡

事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发。

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

阻止冒泡 ev.cancelBubble = true;

7.自定义右键菜单

//右键菜单

//document.oncontextmenu

document.addEventListener("contextmenu",function(event) {

var ev=event||window.event;

alert("oncontextmenu");

//阻止默认的事件

//阻止右键菜单ev.preventDefault();

//return false虽然全兼容，但是不能阻止使用add绑定的额事件

//这里用return false不行

//return false;

//preventDefault()都可以阻挡

ev.preventDefault();

},false)

把默认的右键菜单阻止之后，再重新定义

menu.addEventListener("contextmenu",function(event) {

varev=event||window.event;

ev.cancelBubble=true;

varLeft=ev.clientX+(menu.offsetWidth-(ev.clientX-menu.offsetLeft));

menu2.style.left=Left+"px";

menu2.style.top=ev.clientY+"px";

menu2.style.display="block";

ev.preventDefault();

},false)

8.函数回调

函数回调就是函数的参数为函数

函数回调一般用在，当在一个函数内部特定条件下需要触发另一个事件，

此时可以将函数作为一个参数传进来

function sum1(a,b) {

return a+b;

}

function getValue(a,b,fn) {

return fn(a, b);

}

console.log(getValue(10,20, sum1));

9.滚轮事件

火狐浏览器与其他浏览器滚轮事件不一样

火狐浏览器与其他浏览器滚轮触发的方向不一样，方向是反的

浏览器嗅探

var FF=navigator.userAgent.indexOf("Firefox");

//绑定事件wheel，注意兼容

if(FF!= -1) {

box.addEventListener("DOMMouseScroll", wheel,false)

}else{

box.onmousewheel=wheel;

}

function wheel(event) {

var ev=event||window.event;

//捕捉到滚动的方向

//console.log(ev);

//谷歌

//console.log(ev.wheelDelta);

//火狐

//console.log(ev.detail);

if(ev.detail) {

if(ev.detail>0) {

console.log("往下滑")

}else{

console.log("往上滑")

}

}else{

if(ev.wheelDelta>0) {

console.log("往上滑")

}else{

console.log("往下滑")

}

滚轮事件封装的函数

function mouseWheel(obj,fn) {

//嗅探

var ff=navigator.userAgent.indexOf("Firefox");

if(ff!= -1) {

obj.addEventListener("DOMMouseScroll", wheel,false);

}else{

obj.onmousewheel=wheel;

}

function wheel(event) {

var ev=event||window.event;

//滚轮往下滚是true

var down=true;

if(ev.detail) {

down=ev.detail>0

}else{

down=ev.wheelDelta<0;

}

//通过down来执行相应的代码

//让fn执行，并且让ev和down作为参数传进去

fn(ev, down);//函数调用

}

//保存box原有的宽高

var boxW=box.clientWidth;

var boxH=box.clientHeight;

//函数回调

mouseWheel(box, scaleSize);

function scaleSize(event,down) {

if(down) {

if(boxW>=500&&boxH>=500) {

boxW=500

boxH=500

}

boxW+=10;

boxH+=10;

box.style.width=boxW+"px";

box.style.height=boxH+"px";

}else{

if(boxW<=150&&boxH<=150) {

boxW=150

boxH=150

}

boxW-=10;

boxH-=10;

box.style.width=boxW+"px";

box.style.height=boxH+"px";

}

三、cookie

cookie用来存储数据（保存在浏览器里面），cookie储存的数据类型为数字或者字符串，cookie存储的数据容量为5KB，1KB为1024个字节，1个字节8个二进制。

Firefox每个域名cookie限制为50个。

Opera每个域名cookie限制为30个。

Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。

当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。

Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。

不同浏览器间cookie总大小也不同：

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

储存cookie

document.cookie="user=coco";

document.cookie="password=12345";

//创建日期

var nowDate= new Date();

var days=nowDate.getDate();

//往后推迟三天

nowDate.setDate(days+3);

//cookie设置时不能直接设置中文，需要先对中文进行编码，显示时再进行解码

document.cookie="hobby=popo;expires="+nowDate;

如果设置了中文转码需要加上decodeURI();当获取到内容的时候，一定要进行编码，否则会出现中文乱码问题。decodeURI

封装的关于cookie的函数：

获取cookie的函数

function getCookie(name) {

//获取cookie

var cookie=document.cookie;

//将cookie按照; 进行分割得到一个数组

var arr1=cookie.split("; ");

for(var i=0; i<arr1.length; i++) {

//将数组里的每一项按照等号再次进行分割

var arr2=arr1[i].split("=");

if(name==arr2[0]) {

return arr2[1];

}}}

//console.log(getCookie("hobby"));

封装设置cookie的函数

function setCookie(name,value,day) {

var now= new Date();

var days=now.getDate();

now.setDate(days+day);

document.cookie=name+"="+value+";expires="+now;}

//setCookie("wakaka", "doudou", 3)

封装一个删除cookie的函数

function removeCookie(name) {

setCookie(name,"",-10);

}

//removeCookie("hobby");

//console.log(document.cookie);

四、正则表达式

正则，是一种高准确性匹配字符串的方式

元字符既定格式 [] 量值

将以下字符串中的数字提取出来[123, 45, 45];

var str="123fajdj45dawkn45";

var reg=/\d+/g;

var arr=str.match(reg);

alert(arr);

1.正则创建方法

第一种，使用直接量创建

var reg=/正则的表达式/正则的属性;

第二种，使用对象创建

exp expression 描述表达式

var reg=new RegExp(正则的表达式,正则的属性);

2.元字符 . (点)

元字符 . (点)匹配字符串中的所有字符，但是换行符不行(\n)

var str="jdahj434\n88%32$482hfjff334j ===54--eud";

var reg=/./g;

var arr=str.match(reg);

alert(arr);

3.元字符\w

\w 只能匹配数字、字母、下划线

+ 是连续的意思，只要满足正则验证的字符都会拼接在一起，一旦遇到不满足的自动与后面的断开，再次遇到满足的时候，自动开启链接

var str="123 das$ $jkdFF FF78_=+ $%^ff6";

var reg=/\w+/g;

var arr=str.match(reg);

alert(arr);

4.元字符\d数字

var str="23 12n jkj$323$ad 312 rjfks%$jf";

var reg=/\d+/g;

var arr = str.match(reg);

alert(arr);

//replace将字符串里面满足正则验证的部分，用新的东西替换掉

var str=str.replace(reg,"***") ;

alert(str);

5.元字符\s验证空格

var str=" hello world, 哈哈哈 "

var reg=/\s+/g;

str = str.replace(reg, "*");//这样写会把多个空格换成一个*

alert(str);

把多个空格换成多个*

str=str.replace(reg,function(s) {

//alert("(" + s + ")");

//return "*";

var str=" ";

for(var i=0; i<s.length; i++) {

str+="*";

}

return str;

})

alert(str);

6.元字符\b边界搜索

\b代表边界搜索，单词边界，会自动检测单词是否是独立单词，只要左右两边有分界线，就可以找出来

//把单个he找出来

var str="he-hello world he hello";

var reg=/\bhe\b/g;

//var arr = str.match(reg);

//alert(arr);

str=str.replace(reg,"*");

alert(str);

7.转义

转义，将有意义的加反斜杠变成无意义的，将无意义的加反斜杠变成有意义的

alert("hahaha\\\\n哈哈\\哈");

var str="1/23+456";

//+在正则中有具体含义

var reg=/\+/;

var reg=/\//;

str=str.replace(reg,"*");

alert(str);

8.元字符汉字

var str="jdsdlk瓜哥love尿哥";

//搜索所有的汉字\u4e00-\u9ef8

var reg=/[\u4e00-\u9ef8]/g;

var arr=str.match(reg);

alert(arr)

//搜索指定的汉字

var reg=/哥/g;

var arr=str.match(reg);

alert(arr)

var reg=/瓜/g;

str=str.replace(reg,"火");

alert(str)

9.中括号[ ]

[]中括号内部就是取值区间,闭区间

var str="ssd387976atdr kf3dkl 45j jpo9hj fr00";

//var reg = /[3-9a-n]/g;

var reg=/[02468a-n]/g;

var arr=str.match(reg);

alert(arr);

10.元字符-开头结尾

^n 原字符串以n开头才满足正则验证

n$ 原字符串以n结尾才满足正则验证

var str=" #user p ";

//var reg=/^\s+/;

//var reg=/\s+$/;

var reg=/^\s+|\s+$/g;

str=str.replace(reg,"");

reg=/\s+/g;

str=str.replace(reg," ")

alert(str);

11.量词

var str="123jkds67xak0ld45643";

//n+ 至少包含一个n

//var reg=/\d+/g;

//n* 包含0个或者多个n

//var reg=/\d*/g;

//n? 包含0个或一个n

//var reg=/\d?/g;

//n{数值X}包含x个n

//var reg=/\d{3}/g;

//n{x,y} 包含x个到y个n，x必填代表下限，y可选，如果不填，上限灵活

//{2,} 至少2个，多的无上限

//包含1个2个3个\d

//var reg=/\d{1,3}/g;

var arr=str.match(reg);

alert(arr);

12.正则的使用方法

replace 字符串方法，用于匹配正则，将满足的内容用新内容进行替换

replace(reg, “替换的新内容”)

replace(reg, 回调函数)

match 字符串方法，用与匹配正则，返回值数组

reg.test(字符串) 正则验证，满足正则匹配返回true，否则返回false

最后编辑于：2017.12.05 06:18:29

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,884评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,347评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,435评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,509评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,611评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,837评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,987评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,730评论 0赞 267
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,194评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,525评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,664评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,334评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,944评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,764评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,997评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,389评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,554评论 2赞 349

JS基础第三节

一、DOM

1.节点操作

createElement("标签名"): 创建新元素

createTextNode(""): 创建文本节点

appendChild(node): 向childNodes末尾插入一个节点node

insertBefore(newElement, targetElement): 向targetNode之前插入 节点node

replaceChild(newNode, oldNode): newNode替换节点oldNode

removeChild(node): 移除父节点的某个子节点

remove()，直接删除

插入、 替换、 移除方法:document.body.insertBefore(node, targetNode)

appendChild，在父节点的childNodes数组的末尾添加一个新的节点

将h3换成一个h1，replaceChild,将父节点中的h3用h1替换，h3和h1是单个变量

移除父节点中的某一个子节点，删除：第一种方法把父节点中的某一个节点删除，第二种方法直接删除自身

2. 节点复制

3.属性常见的操作方法

4.js获取非行间样式

ie所支持的获取非行间样式的方法：currentStyle

用法: 对象.currentStyle.样式名，例: oDiv.currentStyle.width

非ie所支持的获取非行间样式的方法：getComputedStyle

用法: getComputedStyle(对象, 伪类).样式名

例: getComputedStyle(oDiv, null).color

二、事件对象

1.鼠标移入移出事件

2.鼠标按下、抬起、点击、双击事件

//鼠标按下就会触发

btn.onmousedown=function() {

//鼠标抬起时触发

btn.onmouseup=function() {

//鼠标点击触发

btn.onclick=function(){

//鼠标双击事件

div.ondblclick=function(){

3.键盘事件

document.onkeydown=function(event) {

console.log(ev);

console.log(ev.key);

console.log(ev.code);

console.log(ev.keyCode);

switch(ev.keyCode) {

//键盘的抬起事件

document.onkeyup=function() {

//键盘长按事件

//onkeypress

4.表单事件

onchange 当表单元素的值发生变化时触发

//聚焦与失焦事件 onfocus onblur

//表单提交事件onsubmit

//阻止默认操作,全兼容

//return false;

//阻止默认操作,推荐使用的

ev.preventDefault();//不兼容IE6~8

5.绑定事件

addEventListener(事件名称 , 函数,捕获 )方法绑定事件

removeEventListener(事件名称 , 函数,捕获 )解除绑定

6.事件捕获和事件冒泡

阻止冒泡 ev.cancelBubble = true;

7.自定义右键菜单

//右键菜单

//document.oncontextmenu

//阻止默认的事件

//阻止右键菜单ev.preventDefault();

menu.addEventListener("contextmenu",function(event) {

8.函数回调

9.滚轮事件

浏览器嗅探

滚轮事件封装的函数

三、cookie

获取cookie的函数

封装设置cookie的函数

封装一个删除cookie的函数

四、正则表达式

1.正则创建方法

2.元字符 . (点)

3.元字符\w

4.元字符\d数字

5.元字符\s验证空格

6.元字符\b边界搜索

7.转义

8.元字符汉字

insertBefore(newElement, targetElement): 向targetNode之前插入节点node

插入、替换、移除方法:document.body.insertBefore(node, targetNode)