函数事件
DOM树节点：
DOM节点分为三大类，元素节点，属性节点，文本节点；
文本节点，属性节点属于元素节点的子节点，操作时，均需要取到元素节点，在操作子节点；
可以使用getElement系列方法，取到元素节点。
【查看元素节点】
getElementById:通过id取到唯一节点，如果id重名只能取到第一个
getElementByName():通过name属性
getElementTagName():通过标签名；
getElementClassName():通过Class名；
给大家详解一下怎么取到节点：
在body里面做一个ID为DIV1的div<body><div id="div1">haha</div></body>
在script里面 window.onload=function(){ 取到节点 |
但是需要注意的是：
获取元素节点时：一定要注意：获取节点的语句，必须在DOM渲染完成之后执行，可以有两种实现方式：
①：将JS代码写在body之后；
②将代码写到window.onload函数之中
后面三个getElements取到的是数组格式，不能直接添加各种属性，而应该取出数组的每一个单独操作。
eg: getElementByName("name1")[0].onclick = function
[查看设置属性节点]
1查看设置属性节点：getAtteribute("属性名")
2 设置属性节点： setAtteribute("属性名；新属性值")
也需要注意：
查看和设置属性节点。必须先取到元素节点，才能使用；
setAtteribute():函数在ie中可能给出现兼容性问题；比如在IE中，* 不支持使用这个函数设置style/onclick等样式属性和时间属
我们推荐使用后点符号法替代上述函数。
eg:dom1.style.color="" dom1.onclick="" dom1.src=""
[js修改DOM节点的样式]
1使用 setAtteribute()设置class和style属性。但是存在兼容性问题；不提倡
div.setAatteribute("class","cls1");
2,使用.clssName直接设置class类；注意是className,而不是.class
div.className= "cls1";
3使用.style设置单个属性；注意属性名要是驼峰命名法则！
div.style.backgroundColor = "red";
4 使用.style 或 .style.cssText 设置多个样式属性！
div.style.cssText=" background-color:red; color:yellow;"推荐使用第二种；
[查看使用文本节点]
.innerText:取到或设置节点里面的文字内容！
.innerHTML:取到或者设置节点里面的HTML代码
.tagName:取到当前节点的标签名，标签名全部大写显示
window.onload=function(){
var btn1 = document.getElementById("btn1");
var div1 =document.getElementById("div1")
btn1.onclick = function(){
div1.innerText = "hehe";
div1.innerHTML="<h1>hehe</h1>"
alert(div1.innerText);
alert(div1.innerHTML);
alert(div1.tagName);
}
}
<body>
<div id="div1">haha</div>
<button id="btn1" class="btn">这是一个按钮1</button>
</body>
在JS代码中取到ID节点！！ 做一个点击按钮！用函数表示：
上述结果依次是：刚开始的样式是：
1：点击那妞打印hehe：
2 HTML是取到HTML代码形式，因此加上H1标签，代码会成标题标签：
3 打印DIV1的内容：
4 打印他的HTMI代码：
5 打印DIV1的标签名：
2
[根据层次获取节点]
1 .childNodes:获取元素的所有子节点，包括回车等文本节点。
.children:获取当前元素的所有元素节点（只获取标签）。
2 .firstChild:获取元素的第一个子节点，包括回车等文本节点；
.firstElementChild： 获取元素的第一个子节点，不包括回车等文本节点
.lastchild:获取元素的最后第一个子节点，包括回车等文本节点；
.lastElementChild:获取元素的最后第一个子节点，不包括回车等文本节点
3 .parentNode:获取当前节点的父节点
4.previousSibling：获取当前节点的前一个兄弟节点，包括回车等文本节点；
.previousElementSibling;
5 .nextSibling:获取当前节点的后一个兄弟节点，包括回车等文本节点
.nextElementSibling;
6 .getAttributes:获取当前节点的属性节点。
[创建并新增节点]
1 creatElement("标签名"):创建节点,需要配合 setAttribute 使用
2 父节点 appendChild(): 末尾追加方式插入节点
3 父节点 insertBefore(新节点，老节点): 在制定节点前插入新节点
4 被克隆节点 cloneNode(true/false): 克隆节点
传入true:表示克隆当前节点。以及当前节点的所有子节点：
传入false或不传：表示只克隆当前节点，而不克隆子节点。
[删除或者替换节点]
1 父节点： .removeChild(被删除节点)：删除父节点里面的子节点；
2父节点： .replaceChild(新节点，老节点)使用新节点替换掉老节点
<body> <button onclick="addImg()">添加一副图片</button> <button onclick="cloneUl()">添加一副图片</button> <button onclick="delUl()">删除UL</button> <button onclick="replaceUl()">用h1替换ul</button> <ul id="ul"> <li>111</li> <li>111</li> </ul> </body> <script>
function addImg(){ var img= document.createElement("img"); img.setAttribute("src","../../../02css基础属性/css文件夹/img/QQ图片20170726153653.gif"); var ul =document.getElementById("ul"); document.body.insertBefore(img,ul); }
先取到节点img 创建一个新节点 img
插入一个图片
取到节点ul 将图片插入img插入ul前面
点击添加图片可以看出图片在UL前面，当然可以多次添加！
function cloneUl(){
var ul =document.getElementById("ul");
var ulClone = ul.cloneNode(true);
document.body.appendChild(ulClone);
}
同样，先去到节点ul，克隆一个ul，传入true, 将克隆的ul插入后面
function delUl(){
var ul = document.getElementById("ul");
if(ul){
document.body.removeChild(ul);
}else{
alert("ul已经被删了！")
}
}
function replaceUl(){
var ul=document.getElementById("ul")
var h1 =document.createElement("h1")
h1.innerText ="这是一个新创建的H1";
h1.setAttribute("width","500");
document.body.replaceChild(h1,ul);
}
取到节点UL，创建一个新节点h1;
给h1输入内容，使用innerText标签输入内容！
配合.setAttribute设置熟属性.
进行新节点替换老节点
[表哥对象]
1 rows属性：返回表格中的所有行，是一个数组格式；
2 insertRow(index)：在指定位置插入一行，index从0开始；
3 deleteRow(index):删除指定一行，index从0开始；
[行对象]
1。cells属性，返回这一行中的所有单元格，是一个数组格式；
2 。rowIndex属性：返回这一行是表格中的第几行，从0开始；
3. insertCell(index):在这一行指定位置插入一个单元格，index从0开始
4 ，deleteCell(index);删除这一行中的指定单元格，index从0开始；
[单元格对象]
1 cellIndex属性：返回这单元格是本行的第几个，从0开始；
2 innerText:取到或设置节点里面的文字内容！
3 innerHTML:取到或者设置节点里面的HTML代码
4 align:
5 className:
1.事件冒泡：
当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先
节点的同类型事件，直到DOM根节点
什么情况下会产生事件冒泡？
①：DOM0模型绑定事件全部都是冒泡；
⑤IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；
③：其他浏览器，使addEventlinstener（）添加事件。当第三个参数省略或者为false时候，为事件冒泡
2 。事件捕获：当某DOM元素触发某一件事件时，
会从文档根节点开始，逐级向下触发其祖先节点的同类型事件，知道该节点自身
》》》 什么情况下会触发事件捕获？
①：使用addEventlinstener（）添加事件，当第三个参数为TRUE是，为事件捕获
↓ DOM根节点 ↑
↓ ↑
捕 爷爷节点 冒
↓ ↑
获 父节点 泡
↓ ↑
↓ 当前节点 ↑
3 阻止事件冒泡：
在IE浏览器中，使用e.cancelBubble = true；
在其他浏览器中使用e.stopPropagation()
兼容其他浏览器的写法：
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE 8前
}
}
4取消事件默认行为
在IE浏览器中,使用e.returnValue = false;
在其他浏览器,使用e.preventDefault();
兼容所有浏览器的写法:
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
[js里面的时间分类]
1 .鼠标事件
click . dblcick .onmouseover/onmouseout
2 HTML事件
onload /onscroll/onsubmit/onfocus
3 键盘事件
keydown :键盘按下去触发
keypress:键盘按下松开的瞬间触发
keyup：键盘抬起时候触发
[注意事项]
① 执行顺序： keydown->keypress->keyup
② 当长按时：会循环执行keydown->keypress
③ 有keydown并不一定有keyup;当事件触发过程中，鼠标将光标移走，将导致没有keyup
④ keypress ：只鞥捕获键盘上的数字键，字符，符号键，不能捕获各种功能键。而keydown和keyup可以
⑤ keypres :支持区分大小写，keydown和keyup并不支持
【确定出发的按键】
① 在触发的函数中，存入一个参数e，表示键盘事件；
②： 使用e.keyCode取到支持的Ascii码值，进而确定触发按键；
③ 素有浏览器的兼容写法（一般并不需要）
var evn = e ||event;
var code = evn.keyCode|| even .which|| evn.charCode;
[js中的事件模型]
1. 内联模型(行内绑定)：直接将函数0作为HTML标签额某个事件属性的属性值
eg:<button onclick="func()">DOM0内联模型</button>
优点：使用方便简洁
缺点：违反了W3C关于HTML与javacsript分离的基本原则；
2.脚本模型（动态绑定），在JS脚本中取到某个标签，并添加事件属性，
eg:window.onload=function(){}
优点：实现了W3C关于HTML与javacsript分离的基本原则；
缺点：同一个节点只能绑定一个同类型事件，如果绑定多次，最后一个生效。
[DOM2事件模型]
1.添加绑定事件方式：
① IE8之前：btn2.attachEvent("onclick",函数)；
②：其他浏览器btn2.addEventListener("click"，函数，TRUE/FALSE）；
参数三：false(默认) 表示事件冒泡 true 表示事件捕获
③ 兼容写法： if(btn2.attachEvent){
btn2.attachEvent();
}else{
btn2.addEventListener();
}
2优点：可以给同一节点添加同一类型的事件
②：提供了可以取消事件绑定的函数
3取消DOM2的事件绑定，：
注意：如果要取消DOM2的事件绑定，那么在绑定事件时，处理函数必须要使用有名函数
而不能使用匿名函数，
btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);
3
[js中的数组]
数组的基本概念？
数组实在内存空间中连续存储的一组有序数据的集合
元素在数组中的顺寻，称为下标，可以使用下标访问数组的每个元素。
如何声明一个数组？
①：使用字面量声明：var arr=[] ; //切记是中括号
在JS中，同一个数组可以存贮多种数据类型
例如var arr=[1,"jianghao",true,{},null,func];
②：只用NEW关键字声明：var arr =new Array(参数);
》》》参数可以是：
a。 参数省略，创建一个空数组；
b。参数为一个整数，表示声明一个length为指定长度的数组，但是这个length可以随时可变可追加。
c. 参数为逗号分隔的多个数值，表示数组的多个值，
new array(1,2,3) == [1，2，3]
3 数组中元素的读写/增删
①：读写：通过下标访问元素，下标从0开始 arr[1]="haha"；
②；a增删： 使用DELETE关键字，删除数组的某一个值，删除之后，数组的长度不变，对应的关键字
变为Undefined，eg:delete arr[1];
b: arr.pop()：删除数组的最后一个值，相当于arr.length -= 1
c: arr.shift(): 删除数组的第一个值.
d: arr.unshift():在数组的第0个位置新增一个值；
e: arr.push():在末尾增加一个值；
f: 直接访问数组没达到的下标，可以动态追加；
arr[100]=1; 中间如果有空余下标，将存入Undefined。
var arr=[1,2,3,4,5,6,7,8,12]; delete arr[3]; // arr.length -=1; //arr.pop(); //arr.shift(); //arr.unshift("haha"); // arr.push("haha"); // var arr=[1,2,3,4,5,6]; // var str = arr.join("-"); console.log(arr);
1：arr. delete():删除下标为3的数组，即删除书里面的4，，变为undefined
2 arr.pop() :删除最后一个值
3 arr.shift():删除第一个屁；
4 arr.unshift("haha")：在低0个位置增加一个值：
5 arr.push("haha")：
4.数组中的其他方法：
①：join（）：将数组用制定分隔符连接成字符串，当参数为空时，默认为逗号分隔
②：concat()：【原数组不会被改变】将数组，与两个与多个数组的值链接为新数组，
连接时候，如果有二维数组，则至多能拆一层[]
[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
[1,2].concat([3,4[5,6]])-->[1,2,3,4,[5,6]]
var arr=[1,2,3,4,5,6]; var str = arr.join("-"); console.log(str);
arr=[1,2].concat([3,4,[5,6]]);
arr.reverse()原数组被改变，将数组翻转，倒叙输出
⑤：slice（begin,end):[原数组不会被改变]截取数组中的某一个部分，并返回截取的新数组
>>>传入一个数组，表示开始区间，默认将截到的数组最后；
》》》传入两个参数，表示开始和结束下标区间，左闭右开区间(包含begin,不包含end)
》》》两个参数可以为负数，表示可以从右边开始，最后一个值为-1；
var arr=[1,2,3,4,5,6,7,8,12]; arr.reverse(); var arr1=arr.slice(3,7); //var arr1=arr.slice(-3,-1); console.log(arr1);
var arr=[1,2,3,4,5,6,7,8,12];
// var arr1=arr.slice(3,7);
var arr1=arr.slice(-3,-1);
console.log(arr1);
⑥：sort():【原数组被改变】将数组进行升序排列：
>>>默认情况下会按照每个元素的首字母的ASCII值进行排列
[1,2,3,4,5,6,7,8,12,112]-->[1,112,12,2,3,4,5,6,7,8]
》》》可以传入一个比较函数，手动指定排序的函数函数算法；
函数将默认接受两个值a,b ，如果返回值>0 ，证明a>b；如果返回值<0 ，证明a<b；
arr.sort(function(a,b){
return a-b;升序排列：
return b-a;降序排列：
})；
var arr=[2,1,4,3,5,6,7,8,12]; arr.sort(function(a,b){ if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } return a-b;//升序排列 return b-a;//降序排列 }); console.log(arr);
indexOf(value,index)返回数组中的第一个value值所在的下标，如果没有返回-1；
lastindexOf(value,index) 返回数组中最后一个value值所在的下标，如果没有返回-1；
》》》如果没有指定index，则表示全数组查找value；
》》》如果指定了index，则表示从index开始，向后查找value；
var arr=[2,1,4,3,5,6,7,8,12]; var index=arr.indexOf(1); console.log(index)
⑧： arr.forEach(function(item,index){
console.log(item);
})
forEach专门用于循环便利数组，接受一个回调函数，回调函数接受两个参数，第一个参数为数组的每一项值，
第二个参数表示每一个参数的下标；【IE8之前不支持】
⑨：var arr1=arr.map(function(item,index){
console.log(item);
return item + 2;
})
console.log(arr1);
map：数组映射，使用方式与forEach相同，不同的是，map可以有return返回值，表示将原数组的每个值进行操作后，
返回给一个新数组【IE8也不支持】
var arr=[2,1,4,3,5,6,7,8,12];
var arr1=arr.map(function(item,index){
return item + 2;
})
console.log(arr1);
Boolean类
两种声明方式
可以使用字面量方式声明一个单纯的变量
也可以使用new Boolean()声明一个Boolean类型的对象，用type检测为Object类型
number
Number.MAX_VALUE 返回Number类表示的最大值；
Number.MIN_VALUE 返回Number类表示的最小值；
.toString():将数值类型转化为字符串类型
.toLocaleString():将数值按照本地格式顺序转换为字符串，一般从右开始，三个加一个逗号分隔；
.toFixed(n):将数值保留n为小数，并转为字符串格式
.toPrecision(n):将数字转化为指定长度，N表示不含小数点的位数长度，如果n<原来数字长度，则用科学
计数法表示，如果n<原数字长度，则小数点后补0
.valveOf():返回Number对象的基本数字值；
String类型
1.属性：Str.length返回字符串的长度，也就是字符数；
字符串支持类似数组的下标访问方式 :str[0];
2方法：.toLowerCase();将字符串的所有字符转成小写，
.toUpperCase();将字符串的所有字符转成大写，
.charAt(n):截取数组的第N个子字符，相当于str[n];
.indexOf("str",index):从index位置开始查找，子串在字符串中的出现的位置，
如果没有找到返回-1；其他从数组的indexOf方法：
.lastIndexOf():同数组
.substring(begin,end):从字符串中截取子串；
》》》只传入一个参数，表示从begin开始；到最后
》》》传入两个参数，表示从begin到end的区间，左闭右开。
.split("分隔符")：将字符串以制定分隔符分隔，存入数组中。传入空""表示将字符串
的每个字符分开放入数组，
.replace("old","new")：将字符串的第一个old替换为new;
>>>第一个参数，可以是普通字符串，也可以是正则表达式；
》》》如果是普通字符串，则只替换第一个old，如果是正则表达式。则可以根据正则的写法要求
进行替换。
var str="JiangHao Is ShuaiGe!"; //var str1=str.toLowerCase(); //var str1=str.toUpperCase(); //var str1=str.charAt(0); //var str1 =str.indexOf("an") //var str1 = str.substring(5,15); //var str1 =str.split("").join("") // var str1 =str.replace("i","*");//只替换字符串的第一个i //var str1 =str.replace(/i/g,"*");//替换字符串的所有i console.log(str1);
1:toLowerCase():字符串全部小写；
2：.toUpperCase()：字符串全部大写；
3：.charAt(0);截取第0个字符：
4 .indexOf("an")：查找字符串位置
5：str.substring(5,15);截取字符串 左闭右开
6：.split("")：
7：.replace("i","*") ：只替换第一个i：
8：.replace(/i/g,"*")替换所有i
date 日期类
1。 new Date():返回当前最新时间
new Date("2017,8,23,12:34:56")；返回指定的时间
2 常用方法：
dates.getFullYear();获取四位年份
dates.getMonth()：获取月份 0-11月
dates.getDate():获取一个月中的第几天 1-31；
dates.getDay();获取一周中的第几天，0-6 ，0表示周天；
getHours():获取小时；
getMinutes()：获取分钟；
getSeconds()：获取秒；
<script>
function getTime (){ var dates =new Date(); var year=dates.getFullYear(); var month=dates.getMonth(); var date1= dates.getDate(); var day =dates.getDay(); var weeks =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var hours=dates.getHours()<10? "0"+dates.getHours():dates.getHours(); var minutes=dates.getMinutes()<10? "0"+dates.getMinutes():dates.getMinutes() var seconds=dates.getSeconds()<10? "0"+dates.getSeconds():dates.getSeconds(); var div1=document.getElementById("div1"); div1.innerText = year+"年"+(month+1)+"月"+date1+"日"+weeks[day]+hours+":"+minutes+":"+seconds; } setInterval(getTime,1000); window.onload=function(){ getTime(); } </script> </head> <body> <div id="div1"></div> </body>
【自定义对象】
①：对象：是拥有一系列无序属性跟方法的集合；
②：键值对：对象中的数据是以键值对的形式存在，对象的每个属性和方法都对应一个键名，以键取值
③：属性：描述对象特征的一系列变量称为属性，【对象中的变量】
④：方法：描述对象行为的一系列函数。称为方法【对象中的函数】
2.声明对象：
①：字面量声明 var obj={
key1:value1,
key2:value2,
func1:function(){}}
注意：
>>>对象中的数据是以键值对形式存储，键与值之间用：分隔，多个键值对中间用，分隔
>>>对象中的键可以是除了数组/对象以外的任何数据类型，但是一般我们只用普通的变量名作为键
》》》对象的值可以是任何数据类型，包括数组和对象
②：使用NEW关键字声明。 var Obj =new Object();
obj.key1=value1;
obj.func1=function(){}
var person={
name:"张三",
"haha":["张三"],
age:14,
say:function(){
alert("我会说话!");
}
}
console.log(person.name);
console.log(person.age);
console.log(person.say);
var person = new Object()
person.name="张三",
person.age=14,
person.say=function(){
alert("我会说话");
}
console.log(person.name);
console.log(person.age);
console.log(person.say);
3. 对象中属性跟方法的读写：
①：运算符：对象名。属性 对象名。方法（）；
对象内部：this.属性 this.方法()
对象外部： 对象名.属性 对象名.方法()；
②：通过["key"]调用：对象名.["属性名"] 对象名.["方法名"]();
》》》如果键中包括特殊字符，只能使用第二种方式；
》》》对象中直接写对象名默认为全局变量，若要调用对象自身的属性或者方法。需要使用对象名
，属性，或者this.属性
person.age this.age 都可以，但推荐使用this关键字。
③：删除对象的属性和方法，使用delete 对象名.属性名/方法名
delete person.age;
var person={ name:"张三", age:14, say:function(){ alert("我叫"+this.name+",今年"+person.age+"岁了"); } } console.log(person["age"]); console.log(person.age); person.say()；
