• JavaScript--继承模式、数组操作、操作dom

    一、继承模式
    var deng={
	wife1:{name:"小王"},
	wife2:{name:"小费"},
	saywife:function(num){
	    return this['wife'+num];	
	}
}
字符串加什么都是字符串
obj.name=obj['name']
*******************************************************
for in /in/instanceof  hasOwnProperty 
//遍历  枚举 enumeration
区分
[].constructor  Array
[] instanceof Array True
Object.prototype.toString=function(){
this
}是一个方法
*******************************************************
那些能输出1,2,3,4,5
function foo(x){
	console.log(arguments)
	return x
}
foo(1,2,3,4,5)

function foo(x){
	console.log(arguments)
	return x
}(1,2,3,4,5)

(function foo(x){
	console.log(arguments)
	return x
})(1,2,3,4,5)

function foo(){bar.apply(null,arguments)};
function bar(){console.log(arguments);
}
foo(1,2,3,4,5); 
*******************************************************
boolean String Number function Object undefined
*******************************************************
undefined==null
{}=={}房间不一样，引用值比的是地址

this
1.函数预编译过程中this指向的是windows
2.全局作用域中this指向windows
3.call/apply改变this指向
4.obj.func();func()里面的this指向obj
*******************************************************
arguments.callee用于立即执行函数(指向函数自身引用)
var num = (function(n){
	if(n==1){
	return 1;}
	else
	return n * arguments.callee(n-1);
}(100))
function test(){
	demo();
}
function demo(){
	console.log(demo.caller);
}
	test();
结果：function test(){}
*******************************************************
	var a=5;
	function test(){
		a = 0;
		alter(a);
		alter(this.a);
		var a;	
		alter(a);
}
	AO{
		a:0,
	this:windows
}	
	test();//new test(); function test(){__proto__:test.prototype;}

test 0 5 0    0 undefined 0
*******************************************************
克隆
var obj={
	name:"q";
	age:"18";
}
var obj1={}
 function clone(origin,target){
	var target = target || {};
	for(var prop in origin){
	    target[prop]=origin[prop];
	}
    }
clone(obj,obj1); 
*******************************************************
//1.判断是不是原始值
//2.判断是数组还是对象
//3.建立相应的数组或者对象
//4.递归
深度克隆
review:递归
	function Test( num ){
	return num * Test(num-1);
}
 arguments.callee用于立即执行函数(指向函数自身引用)
var num = (function(n){
	if(n==1){
	return 1;}
	else
	return n * arguments.callee(n-1);
}(100))
立即执行函数没有函数名，所以没办法直接用函数名循环调用
通过对象的属性argument.callee()方法
*******************************************************

		obj1={
			
		}
		obj={
			name:"wx",
			hoppy:["看书","跑步"]
		}
		function deepClone(origin,target){
			var target = target || {},
				arrStr = "[object Array]",
				toStr  = Object.prototype.toString;
			for(var prop in origin){
				if(origin.hasOwnProperty(prop)){
					if(origin[prop]!==null &&typeof(origin[prop])=='object'){
						if(toStr.call(origin[prop])== arrStr){
							target[prop]=[];
						}
						else{
						target[prop]={};
					}	
						deepClone(origin[prop],target[prop]);
					}else{
						target[prop]=origin[prop];
					}
				}
			}	
			return target;
		}
	deepClone(obj,obj1);	

//三目运算符
7>8?10:11 

		obj1={
			
		}
		obj={
			name:"wx",
			hoppy:["看书","跑步"]
		}
		function deepClone(origin,target){
			var target = target || {},
				arrStr = "[object Array]",
				toStr  = Object.prototype.toString;
			for(var prop in origin){
				if(origin.hasOwnProperty(prop)){
					if(origin[prop]!==null &&typeof(origin[prop])=='object'){
					origin[prop] =  toStr.call(origin[prop])==arrStr?[]:{};
					
						deepClone(origin[prop],target[prop]);
					}else{
						target[prop]=origin[prop];
					}
				}
			}	
			return target;
		}
	deepClone(obj,obj1);

    • 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
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
          var map = {
        name: "可可",
        age: 22,
        sex: "memale",
        __proto__:{
          cx:"11"
        }
      };
      for (var prop in map) {
        console.log(map[prop]);
      }
      /*
      可可
      22
      memale
      */
      for (var prop in map) {
        if(map.hasOwnProperty(prop)) {
          console.log(map[prop]);
        }
      }
      var arry =[];
      console.log(Object.prototype.toString.call(arry))

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

    二、操作数组

    Array.prototype.push=function(){
	for(var i =0;i<arguments.length;i++){
		this[this.length]=arguments[i];
	}
}
//push最后一位添加
//pop最后一位剪切
//arr.unshift() 在数组前面增加
//arr.shift()在数组前面剪切
//arr.reverse()反转
//arr.splice(从第几位开始，截取多少长度，在切口处添加数据)
//arr.sort(function(){});//默认是按照字符编码排序,sort留了一个接口
1.必须写俩形参
2.看返回值1)当返回值为负数时，那么前面的数放在前面
	  2)为正数，那么后面的数放在前面
	  3.为0不动

var arr=[20,2,10,13,4,8,9];
arr.sort(function(a,b){
	if(a>b){
	return 1;
	else{
	return -1;}
}});

//改写
var arr=[20,2,10,13,4,8,9];
arr.sort(function(a,b){
	return a-b;//升序
}});
控制台直接调用arr
//乱序
var arr=[20,2,10,13,4,8,9];
arr.sort(function(a,b){
	return Math.random()-0.5;//升序
}});
//改变原数组
push pop shift unshift sort reverse splice  
//不改变原数组
var arr =[1,2]
var arr1=[1,3]
arr.concat(arr1);

arr.toString(123)
//需要拿变量接收
arr.slice(1)//从第一位开始截取截取到最后
arr.slice(1，3)
//从该位开始截取,截取到该位
var newArry = arr.slice()//整个截取
//数组中的每一位连接，并且变成字符串连接
arr.join("ke")//不传参数按照逗号连接
str.split("ke")//跟join相反操作

//类数组
var obj={
"0":'a',
"1":'b',
}
//属性要为索引(数字)属性，必须要有length属性

//null function undefined boolean number Object

		function g(){}
		var arrys ={
			"[object Number]":'object-number',
			"[object Array]":"array",
			"[object Boolean]":'object-boolean',
			"[object Object]":'object-object',
			"[object String]":'object-string'
		}
		function type(target){
			var arry ={
			"[object Number]":'object-number',
			"[object Array]":"array",
			"[object Boolean]":'object-boolean',
			"[object Object]":'object-object',
			"[object String]":'object-string'
		}
			if(target === null){
				return "null";
			}
			if(typeof(target) == "object"){
				var value = Object.prototype.toString.call(target);
				return arry[value];
			}else{
				return typeof(target);
			}
		}
//数组去重
var arr=[1,1,2,3,3];
Array.prototype.unique=function (){
	var temp={},
	    arr=[],
	    len=this.length;
	for(var i=0;i<len;i++){
	    if(!temp[this[i]]){
		temp[this[i]]="ke";
		arr.push(this[i]);
	}
    }
		return arr;}
调用arr.unique()

包装类:
var num =123;
num.abc='abc';//系统为不报错
//new Number(num).abc='abc';--->delete
console.log(num.abc); //重新new Number(num).abc
//创建对象 指定prototype
var obj = Object.create(demo);
//一旦经历了var的操作,所得出的属性,window，叫做不可配置的属性
//不可配置的属性delete不调用
var num=123；  控制台中 delete num 结果为false
var obj={};
obj.name=123;可以删
window.name=123 delete name true
实参就等于默认了var
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
不可改变原始值(栈数据)
Number String Boolean undefined null
引用值(堆数据)
arry object function


//在try里面发生错误，不会执行错误后try里面的代码
//
try{
	console.log('c');
	console.log(w);
}catch(e){//error.message error.name-->error
	console.log(e.name  +":"+ message);
}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
"use strict";//es5.0严格启动模式,第一行写上这串字符串
不支持with/arguments.callee/caller
局部的this必须被赋值
不允许重复的参数
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
with(obj.dp1.ke){
console.log(name);}//变成最顶级的域
with(document){write('a');}//with过于强大,消耗内核
eval('console.log(a)')//es3.0不能用也


    • 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
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    三、操作Dom

    点击按钮更改按钮颜色

        var btn = document.getElementsByTagName("button");
    for(var i = 0; i < btn.length; i++) {
      btn[i].onclick = function(){
        for(var j = 0; j <btn.length; j++) {
          btn[j].className = "";
        }
          this.className = "active";
      }
    }

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

    在这里插入图片描述

    点击当前按钮显示对应的盒子

     //function种i传入不进去 会生成闭包

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <style>
    .active {
      background-color: pink;
    }
  </style>
  <body>
    <button class="">按钮1</button>
    <button class="">按钮2</button>
    <button class="">按钮3</button>
    <div class="div">11</div>
    <div class="div">222</div>
    <div class="div">333</div>
  </body>
  <script>
    var btn = document.getElementsByTagName("button");
    var div = document.getElementsByTagName("div");
    for (var i = 0; i < btn.length; i++) {
      //function种i传入不进去 会生成闭包 使用立即执行函数
      (function (n) {
        btn[n].onclick = function () {
          for (var j = 0; j < btn.length; j++) {
            btn[j].className = "";
            div[j].style.display = "none";
          }
          this.className = "active";
          div[n].style.display = "block";
        };
      })(i);
    }

  </script>
</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

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      left: 0;
    }
  </style>
  <body></body>
  <script>
    var box = document.createElement("div");
    document.body.appendChild(box);
    box.style.width = "100px";
    box.style.height = "100px";
    box.style.position = "absolute";
    box.style.backgroundColor = "pink";
    box.style.left = "0";
    setInterval(function () {
      box.style.left = parseInt(box.style.left) + 3 + "px";
    }, 30);
  </script>
</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

    定时器

    <!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      left: 0;
    }
  </style>
  <body></body>
  <script>
    var box = document.createElement("div");
    document.body.appendChild(box);
    box.style.width = "100px";
    box.style.height = "100px";
    box.style.position = "absolute";
    box.style.backgroundColor = "pink";
    box.style.left = "0";
    var clearTimer = setInterval(function () {
      box.style.left = parseInt(box.style.left) + 3 + "px";
      if(parseInt(box.style.left)>200){
        clearInterval(clearTimer)
      }
    }, 30);
  </script>
</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

    操作键盘事件

      var div = document.createElement('div');
        document.body.appendChild(div);
        div.style.width="100px";
        div.style.height="100px";
        div.style.backgroundColor="pink";
        div.style.position="absolute";
        div.style.left="0";
        div.style.top="0";
        document.onkeydown=function(e){
            switch(e.which){
                case 38:
                    div.style.top = parseInt(div.style.top) - 5 + "px";
                    break;
                case 40:
                    div.style.top = parseInt(div.style.top) + 5 + "px";
                    break;
                case 37:
                    div.style.left = parseInt(div.style.left) - 5 + "px";
                    break;
                case 39:
                    div.style.left = parseInt(div.style.left) + 5 + "px";
                    break;
            }

            }

    • 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

    document代表整个文档， var div = document.getElementById(‘’);
    getElementById(‘’);//选中所有id为属性成类数组
    getElementsByTagName(‘div’);//所有的div拿出来放在一个类数组中
    getElementsByClassName();//不是所有的浏览器都兼容
    getElementsByName();//不是很常用，name属性不是所有的标签都好用(表单元素imag，iframe)
    querySelector();//div>span strong.demo 选出来的元素不是实时的一般不用
    querySelectorAll();//选出一组，选出来的元素不是实时的一般不用(选出来的是副本)

    遍历结点树
    parentNode()//父节点
    childNodes()//选择的是子节点们，结点分为不同的类型
    firstChild()//第一个子节点
    lastChild()//最后一个子节点

    nextSibling //最后一个兄弟结点perviousSibling前一个兄弟结点(不是元素结点)
/*基于元素结点树的遍历
parentsElement//返回当前元素的父节点
children
node.childElementCount==node.children.length
firstElementChild//返回的是第一个元素结点（IE不兼容）
lastElementChild返回的是最后一个元素结点（IE不兼容）
nextElementSibling/previousElementSibling返回后一个/前一个元素
结点的类型
元素节点1
属性节点2
文本节点3
注释节点8
document9  nodeType
DocumentFragment11
获取节点类型nodeType
节点的四个属性
nodeName
nodeValue//只能是文本或者注释
nodeType
attribute//该元素属性节点集合
node.hasChildNodes();
一个方法*/

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

    获取窗口属性,获取dom尺寸

    //获取窗口属性,获取dom尺寸
window.pageYOffset//滚动条Y轴
window.pageXOffset
document.body.scrollLeft/Top ie8 ie5
document.documentElement.scorllLeft/Top   ie7  ie6
document.body.scrollLeft+document.documentElement.scorllLeft=横向滚动条
function getScrollOffset(){
	if(window.pageXOffset){
		return{
		    x:windows.pageXOffset,
		    y:windows.pageYOffset
		}
	}else{
	    return{
		x:document.body.scrollLeft+document.documentElement.scorllLeft,
		Y:document.body.scrollTop+document.documentElement.scorllTop
	}
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    window.innerWidth/Height         //标准宽度1440         ie8以上
标准模式
document.documentElement.ClientWidth/clientHeight
怪异模式下采用的
document.body.clientWidth/clientHeight
怎么看标准模式还是怪异模式
document.compatMode     CSS1Compat 标准模式
			BackCompat 怪异模式
div.offsetWidth//div看起来是什么样
div.offsetHeight//div看起来是什么样加上padding值
div.offsetLeft//按照自己的父级有定位的父级，无定位的父级元素返回相对文档的坐标
对于有定位父级返回相对于最近的有定位的父级的坐标
dom.offsetParent//有定位的父级
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
body里面有默认的8像素
window.scrool(x,y)//当前位置，不是当前距离
window.scroolTo(x,y)//一样功能
window.scroolBy(x,y)//累加滚动距离
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
     <script>
    var div = document.getElementsByTagName('div')[0];
    var start = document.getElementsByTagName('div')[1];
    var over = document.getElementsByTagName('div')[2];
    var timer = 0;
    var key = true;
    start.onclick=function(){
        if(key){   
            timer = setInterval(function(){
            window.scrollBy(0,1);
        } ,100);
            key = false;
    }
}
    over.onclick = function(){     
        clearInterval(timer);
            key = true;
    }
  </script>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
div.style.width//只能获取到行间样式中写的，没有兼容问题
1.复合型变成小头峰式命名
2.div.style.cssFloat=div.style.float//为了避免冲突
3.复合属性必须拆解
4.写入的值必须是字符串格式
除了.style没有任何方法可以写入css
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
window.getComputedStyle(div,null).width;//获取元素根据权重问题(获取的最后值是经过计算的)
//返回是是计算样式，值都是绝对值，//null可以获取伪元素的值
window.getComputedStyle(div,"after").width;
行内大于样式(如果加width=100px!important;)样式比行内权重大
div.currentStyle.width//获取的不是经过计算的IE独有的属性
封装getStyle()
function getStyle(elem,prop){
	if(window.getComputedStyle){
		return window.getComputedStyle(elem,null)[prop];
}else{
	return elem.currentStyle[prop];
	}
}
###########################################################
 <script>
//使用原生的js，addeventListener给每一个元素绑定一个click事件并且输出他们的顺序
    var myli = document.getElementsByTagName('li');
    for(var i = 0;i < myli.length;i++){
        (function(n){
            myli[n].addEventListener('click',function(){
            console.log(n+1);
        },false);
        }(i))
     
    }
 </script> 
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
obj.onclick=funcion(){}//兼容性很好，但是只能绑定一个处理程序
//基本等同于写在HTML行间上，this指向的是程序跟本身
obj.addEventListener('click',function(){},false);//IE9以下不兼容，可以为多个时间处理多个程度序
//可以给一个对象的一个事件绑定多个处理函数(不能给一个函数绑定多次)
//this指向的是程序跟本身
obj.attachEvent('on'+type,fn);//只适合ie浏览器
//指向window
//封装addEvent函数绑定函数
   function addEvent(type,elem,handle){
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }else{
            if(elem.attachEvent){
                elem.attachEvent("on" + type ,function(){
                    handle.call(elem);
                })
            }else{
                elem["on" + type] = handle; 
            }
        }
    }
    div.onclick=null;
    div.removeEventListener(type,fn,false);
    div.detachEvent('on',type,fn);
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
事件冒泡，结构上存在父子元素存在冒泡功能，结构上(非视觉上)嵌套关系的元素，会存在事件
冒泡功能，自子元素冒泡向父元素。(自底向下)
一个对象的一个事件类型就只有一个事件模型->捕获/冒泡
捕获:
结构上非视觉上，嵌套关系的元素，会存在冒泡功能事件，自父元素捕获至子元素(事件源元素)。
IE上没有捕获事件
触发顺序，先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不发生冒泡
W3C标准,e.stopPropagation();
IE独有e.cancelBubble=ture;
div.onclick = function(e){
    stopBubble(e);
}
function stopBubble(event){
    if(event.stopPropagation){
	event.stopPropagation();
}   else{
	event.cancel.Bubble = ture;
	}
}

    • 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
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118

    阻止默认事件oncontentmenu

    //阻止默认事件oncontentmenu
return  false;//以对象属性的方式注册的时间才生效
event.preventDefault();//W3C标准，IE以下不兼容
event.returnValue = false;//兼容IE
封装阻止默认事件的函数cancelHandler(event);
function cancelHandler(event){
    if(event.preventDefault){
	event.preventDefalut();
    }else{
	event.returnValue = false;
    }
}//可以把a标签的默认事件取消
    //加警告
event||window.event用于ie
//事件源对象:
event.target 火狐只有这个
event.srcElement ie只有这个
//这俩都有chrome
//兼容写法
div.onclick = function(e){
	var event = e||window.event;
	var target = event.target||event.srcElement;
	console.log(target);
}
//事件委托
	var ul = document.getElementsByTagName('ul')[0];
	ul.onclick = function(e){
	var evant = e || window.event;
	var target = event.targey||event.srcElement;
	console.log(target.innerText);
}

    • 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

    advantage：
    1、性能不需要循环所有的元素一个个的绑定事件
    2、灵活 当有新的子元素时不需要重新绑定事件

    选中源对象的子元素

    <!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      left: 0;
    }
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </body>
  <script>
    var ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function(e){
      var event = e || window.event;
      var target = event.target || event.srcElement;
      console.log(target.innerText);
    }
  </script>
</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

    js实现搜索功能显示隐藏

    <!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 800px;
      background-color: #fff;
      margin: 0 auto;
      padding-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .input-filter {
      width: 100%;
      height: 35px;
      padding-left: 10px;
      border: none;
      border-bottom: 1px solid rgb(150, 149, 149);
    }
    input:focus {
      outline: none;
    }
    li {
      list-style: none;
      padding: 5px 0;
      border-bottom: 1px solid #ededed;
    }
    .body-content {
      width: 100%;
      margin-top: 20px;
    }
    ul {
      padding: 0;
      border: 1px solid #ededed;
    }
    a {
      padding-left: 20px;
      color: #039ed6;
      text-decoration: none;
      padding-top: 5px;
    }
    h5 {
      padding: 5px 10px;
    }
    .collection-item{
      display: none;
    }
  </style>
  <body>
    <div class="container">
      <h2>我的通讯录</h2>
      <input
        type="text"
        class="input-filter"
        id="inputFilter"
        placeholder="请输入搜索内容"
      />
      <div class="body-content">
        <ul id="name">
          <li>
            <h5>A</h5>
          </li>
          <li class="collection-item"><a href="#">Aas</a></li>
          <li class="collection-item"><a href="#">Aass</a></li>
          <li class="collection-item"><a href="#">Aass</a></li>
          <li class="collection-item"><a href="#">Aeas</a></li>
          <li>
            <h5>B</h5>
          </li>
          <li class="collection-item"><a href="#">Bsc</a></li>
          <li class="collection-item"><a href="#">Bswc</a></li>
          <li class="collection-item"><a href="#">Bssc</a></li>
          <li class="collection-item"><a href="#">Bscsd</a></li>
        </ul>
      </div>
    </div>
    <script>
      var searchInput = document.getElementById("inputFilter");
      searchInput.addEventListener("keyup", filterNames);
      function filterNames() {
        let filterValue = document
          .getElementById("inputFilter")
          .value.toUpperCase();
        let ul = document.getElementById("name");
        console.log(ul)
        let li = ul.querySelectorAll("li.collection-item");
        console.log(li)
        for (let i = 0; i < li.length; i++) {
          let a = li[i].getElementsByTagName("a")[0];
          console.log(a)
          if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
            li[i].style.display = "block";
          } else {
            li[i].style.display = "none";
          }
        }
      }
      // var ul = document.getElementsByTagName('ul')[0];
      // ul.onclick = function(e){
      //   var event = e || window.event;
      //   var target = event.target || event.srcElement;
      //   console.log(target.innerText);
      // }
      // var div = document.getElementsByTagName("div")[0];
      // var disX;
      // var disY;
      // div.onmousedown = function (e) {
      //   disX = e.pageX - parseInt(div.style.left);
      //   disY = e.pageY - parseInt(div.style.top);
      //   console.log(e.pageX);
      //   document.onmousemove = function (e) {
      //     var event = e || window.event;
      //     console.log(e.pageX);
      //     div.style.left = e.pageX - disX + "px";
      //     div.style.top = e.pageY - disY + "px";
      //   };
      //   document.onmouseup = function (e) {
      //     div.onmousemove = null;
      //   };
      // };
    </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
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137

    在这里插入图片描述

    复习案例

        // 对象封装类
    //   function Persion(name,age){
    //     this.name = name;
    //     this.age = age;
    //     this.say = function(){
    //       console.log(this.say)
    //     }
    //     return this;
    //   }
    //   var persion = new Persion('可可',18);
    //   var persion2 = new Persion('coco',22);

    // var str = "abcd";
    // str.length = 2; //系统自动生成一个new String('abcd').length = 2
    // console.log(str.length); //结果是:4
    // var str2 = "abcd";
    // str = +1;
    // var text = typeof str;
    // if (text.length == 6) {
    //   text.sign = "typeof返回结果是String";
    // }
    // console.log(text.sign);
    // 原型链
    // Person.prototype.lastName = "keke";//增加
    // function Person(name){
    //   this.name = name;
    // }
    // var person = new Person("可可");
    // console.log(person.constructor);
    // function Sis(){}
    // Sis.prototype = new Person();
    // var sis =  new Sis();
    // console.log(sis.lastName);//输出:keke
    // Person.prototype.lastName = "可可";//增加
    // console.log(sis.lastName);//输出可可
    // 修改原型
    // Person.prototype.lastName = "keke"; //增加
    // function Person() {
    // }
    // var person = new Person();
    // Person.prototype = {
    //   lastName: "可可"
    // }; //增加
    // console.log(person.lastName);//keke
    // var num = Math.floor(Math.random()*100)//0.00-0.99
    // console.log(num)
    // call指定执行
    // function Person(name,age){
    //   //this == obj 改变this指向
    //   this.name = name;
    //   this.age = age;
    // }
    // var persion = new Persion("keke",18)
    // var obj = {

    // }
    // Person.call(obj,"可可",22);
    // function Student(name, age) {
    //   this.name = name;
    //   this.age = age;
    // }
    // function Person(name, age, sex) {
    //   Student.call(this,name,age)
    //   Student.apply(this,[name,age]);//apply后面只能跟一个数组
    //   this.sex = sex;
    // }
    // var Person = new Person('sunny',18,"female")
    // 有重复属性
    // inherit
    // 圣杯模式
    // function inherit(Target,Origin) {
    //   function F(){};
    //   F.prototype = Origin.prototype;
    //   Target.prototype = new F();
    //   Target.prototype.constructor = Target;
    //   Target.prototype.uber = Origin.prototype;
    // }
    // Father.prototype.lastName = "keke"
    // function Father(){}
    // function Son(){}
    // inherit(Son,Father)
    // for in循环
    // var map = {
    //   name: "可可",
    //   age: 22,
    //   sex: "memale",
    //   __proto__:{
    //     cx:"11"
    //   }
    // };
    // for (var prop in map) {
    //   console.log(map[prop]);
    // }
    // /*
    // 可可
    // 22
    // memale
    // */
    // for (var prop in map) {
    //   if(map.hasOwnProperty(prop)) {
    //     console.log(map[prop]);
    //   }
    // }
    // var arry =[];
    // console.log(Object.prototype.toString.call(arry))
    // hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。

    • 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
    • 106
  • 相关阅读:
    PyTorch实战：实现MNIST手写数字识别
    【示波器专题】示波器带宽对测量的影响
    java毕业生设计重工教师职称管理系统计算机源码+系统+mysql+调试部署+lw
    阿里云OSS对象存储
    试用了多款报表工具，终于找到了基于.Net 6开发的一个了
    逆袭-2014年中电投篮球赛札记_01【转】
    【微服务｜Sentinel】SentinelResourceAspect详解
    JavaScript_4 基本语法：DOM的元素操作
    Postgresql中JSON数据构造与操作符实例
    python使用%操作符进行字符串格式化
  • 原文地址：https://blog.csdn.net/qq_43547255/article/details/126052475