克隆节点:
p2=p1.cloneNode(true) 使用参数true表示克隆节点时包含子节点
注意如何将克隆后的节点插入原来节点中 : 不能用已存在的节点,就是建立好的,应直接建立
如 for(var i=0;i<ali.length;i++){
oWrapper.appendChild(ali[i].cloneNode())
}
数据类型判断
基本数据类型
typeof
引用数据类型
数组 对象
方法 Array.isArray(ali) 判断是否是数组类型 是返回true 不是 返回false
.constructor
instanceof
(1)typeof
1.typeof 对于原始类型来说,除了 null 都可以显示正确的类型
console.log(typeof 2); // number
console.log(typeof true); // boolean
console.log(typeof 'str'); // string
console.log(typeof []); // object []数组的数据类型在 typeof 中被解释为 object
console.log(typeof function(){}); // function
console.log(typeof {}); // object
console.log(typeof undefined); // undefined
console.log(typeof null); // object null 的数据类型被 typeof 解释为 object
typeof 对于对象来说,除了函数都会显示 object,所以说 typeof 并不能准确判断变量到底是什么类型,所以想判断一个对象的正确类型,这时候可以考虑使用 instanceof
2.instanceof
instanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function(){} instanceof Function); // true
console.log({} instanceof Object); // true
// console.log(undefined instanceof Undefined);
// console.log(null instanceof Null);
可以看出直接的字面量值判断数据类型,instanceof可以精准判断引用数据类型(Array,Function,Object),而基本数据类型不能被instanceof精准判断。
3.constructor
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
这里有一个坑,如果我创建一个对象,更改它的原型,constructor就会变得不可靠了
function Fn(){};
Fn.prototype=new Array();
var f=new Fn();
console.log(f.constructor===Fn); // false
console.log(f.constructor===Array); // true
参考链接:juejin.cn/post/684490…
类:具有相同属性或方法的集合 又叫构造属性构造方法
function Student(){
}
var s1=new Student() 类下面的实例化对象
s1.constructor 返回类型 函数Student
arr.constructor == Array
obj.constructor == Object 返回true 或 false
arr instanceof Array 也返回 true 或 false
类和实例化对象的应用 :
function Student(name,age){
this.name=name, 注意类之间的内容用 逗号 隔开
this.age=age,
this.eat=function(){
console.log(this.name+'eating')
}
}
var s1=new Student('xm',20)
调用里面的方法 s1.eat()
可以得知 this 表示实例化出来的对象
prototype 原型下的属性和方法可以被所有的实例化对象共享
Student.prototype.sleep = function(){
}
注意 类首字母大写 每个实例化对象属性不同,因此属性放在类里面,函数放在原型下面 注意原形下也可以传this
事件 事件处理函数 事件源
事件源:谁触发的这个事件谁就是事件源
oDiv.onclick=function(e){
console.log(e.target)
//e.target就是事件源//
//this 给谁绑定的事件谁就是this 所以 事件源不一定跟this相同//
}
对象:
内置对象:Array Boolean Date Math Number String
DOM对象 如oDiv ali里面的每一项是DOM对象
自定义对象 var obj = {}
添加事件监听
可以给一个元素重复添加,克服覆盖
三个参数 第一个是事件类型 第二个事件处理函数function boolean:false事件冒泡 true事件捕获
oWrapper.addEventListener('click',function(){
console.log(1)
},false)
oWrapper.addEventListener('click',function(){
console.log(2)
},false)
事件冒泡从里向外执行,事件捕获从外向里执行。
如果同一个元素既有捕获又有冒泡先执行捕获再执行冒泡。
阻止事件冒泡:oWrapper.addEleventListener('click',function(e){
e.stopPropagation();
},false) 父元素事件不触发
e.stopPropagation() 阻止事件冒泡
e.preventDefault() 阻止浏览器的默认行为
returnfalse 阻止浏览器的默认行为
事件委托 :动态生成的元素不能直接绑定事件,只能通过绑定给已存在的父元素上
原理是事件冒泡
ul.onclick=function(e){
if(e.target.nodename=='LI'){//注意标签名称大写//
console.log(e.target.innerHTML)
}
}
this指向
1.事件处理函数中 this指向绑定事件的DOM元素
2.自定义函数中 this指向window
3.定时器 this指向window
4.自定义对象中 this指向对象
5.类中 this指向实例化对象
改变this的方法
function fn(a,b){
console.log(this)
console.log(a,b)
}
This=this
fn.call(oDiv,1,2)
fn.apply(oDiv,[1,2]) 传参数是数组形式的
fn.bind(oDiv,1,2)() 方法不会自动执行,需要手动执行
for(var i=0;i<ali.length;i++){
ali[i].onclick=function(){
//var This=this
setTimeout(function(){
//console.log(This.innerHTML)
}.bind(this),3000)
}
}
闭包
1.两个函数 函数套函数
2.里面的函数调用外面的函数的变量
function f2(){
var y=1;
return function(){
y++;
console.log(y)
}
}
var a=f2();
a();//2
a();//3
函数的立即调用
function f2(){
var y=1
(function(){
y++
console.log(y)
})()
}
for(var i=0;i<ali.length;i++){
(function(i){
ali[i].onclick=function(){
console.log(i)
}
})(i)
}