JQ

事件委托

<div id="div1"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> </div> <script type="text/javascript"> var fj = document.getElementById("div1"); fj.onclick = function(ev) { console.log(ev.target.innerHTML) } </script>

闭包

什么时候应用闭包

var li = 5; function my(){ var t = 12; console.log(li); //5 } my(); console.log(t); // t is not defined 函数内部可以直接访全局变量，但是在函数外部是无法访问局部变量的 于是闭包应运而生 定义：闭包是指在函数声明时的作用域以外的地方被调用的函数 在theF()函数的作用域中声明， 在全局环境的作用域中被调用的biBao()函数是闭包 function theF() { var theNum = 15; //biBao 这个方法就是一个闭包，它可以返回局部变量， function biBao() { return theNum; } return biBao; } console.log(theF()) 得到 function biBao() { return theNum; } console.log(theF()()); 相当于下面形成了一个自调用函数 (function biBao() { return theNum; }()) 即相当于console.log(biBao()); 好处： 1. 局部变量不会被垃圾回收机制所回收 2. 让函数外部可以访问局部变量，它也算是函数之间沟通的桥梁 3. 希望一个变量长期驻扎在内存中 4. 避免全局变量污染，局部变量的存在 问题： 为何会避免全局变量污染？ 1. 如果你声明一个全局变量，可以在任何地方调用， 2. 如果变量名过多/团队成员之间合作，可能会使相同的变量名， 3. 导致变量名字混乱，数据出错 4. 避免全局变量污染，局部变量的存在 5. 所以我们常说：尽量把功能封装成一个方法， 6. 在方法内声明你要用的变量，会避免全局变量污染问题 JS垃圾回收机制 function aaa() { var a = 1; } aaa(); //在调用结束之后，会把局部变量进行回收

自调用函数（立即执行函数）

模型(function(){})() 或者 (function(){}()) for(var i = 0; i < divArr.length; i++) { (function(ind) { divArr[ind].onclick = function() { console.log(ind); }; //console.log(ind);//0-8 })(i);//保存什么就把什写在i里 } 把每个i的值，通过自调用函数传进到函数内部， 于是ind不受i的影响，保留当前i 的值 二次解析 自调用函数（立即执行函数表达式） var a = 2; (function foo() { var a = 3; console.log( a ); // 3 })(); console.log( a ); // 2 由于函数被包含在一对 ( ) 括号内部，因此成为了一个表达式，通过在末尾加上另外一个 ( ) 可以立即执行这个函数，比如 (function foo(){ .. })() 。第一个 ( ) 将函数变成表 达式，第二个 ( ) 执行了这个函数。 进阶用法：把它们当作函数调用并传递参数进去。 var a = 2; (function IIFE( global ) { var a = 3; console.log( a ); // 3 console.log( global.a ); // 2 })( window ); console.log( a ); // 2

标签加属性

div{$}*10 <script type="text/javascript"> ------------------------------------------ //每个标签定义一个ind属性保存i,然后利用ind属性保留当前的i的值 var divArr = document.querySelectorAll("div"); for(var i = 0; i < divArr.length; i++) { divArr[i].ind = i; divArr[i].onclick = function() { console.log(this.ind); } } //或者 //形如for (let x...)的循环在每次迭代时都为x创建新的绑定。 //相当于为每个divArr[i] 创建一个点击事件 for(let i = 0; i < divArr.length; i++) { divArr[i].onclick = function() { console.log(i) } } //或者 IIFE 会通过声明并立即执行一个函数来创建作用域,把i值传进去就好了。 for(let i = 0; i < divArr.length; i++) { (function(j) { divArr[j].onclick = function() { console.log(j) } })(i); }

ZeptoJS这里写链接内容

ZeptoJS

以前在JQ是几M的时候，在手机端使用，不太好， 所以一般在PC使用JQ，在移动端使用ZeptoJS 因为Zepto才几Kb,比较轻量级 现在JQ1.3也可以 $("#myDiv").html("1231231"); $("#myDiv").on("click", function(){ alert("1456456"); }) var arr = {}; console.log($.isArray(arr)); </script>

匿名函数只有在被调用时才被初始化

func(); function func(){ console.log("123"); } func(); var func = function(){ console.log("456"); //func is not a function } ---------- for(var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }(), 0); } console.log("setTimeout"); 0 1 2 3 4 setTimeout 调用 setTimeout 并且自调用 function ---------- var timer = setTimeout(function(){ console.log("setTimeout"); },0) console.log("12313"); 12313 setTimeout 其他的执行结束 调用 setTimeout ---------- let a = 0; setTimeout(() =>{ console.log("1",a); },0); console.log("2",a); a = 2; console.log("3",a); 2,0 3,2 1,2;

var let 区别