JavaScript基础回顾 {alert type="success"}Document对象{callout color="#68ef4d"}HTMLCollection 是 HTML 元素的集合,NodeList 是一个文档节点的集合。{/callout}document.activeElement:返回当前获取焦点元素document.activeElement;document.addEventListener():向文档添加句柄document.addEventListener('click', function () { ... });document.createAttribute():创建一个属性节点let attr = document.createAttribute('data-value'); attr.value = 'true'; document.getElementById("p").setAttributeNode(attr);document.createComment():创建注释节点let common = document.createComment('ddd'); document.getElementById('content').appendChild(common);document.createElement():创建元素节点let p = document.createElement('p'); p.innerText = 2 ;document.createTextNode():创建文本节点let p = document.createElement('p'); let text = document.createTextNode('文本'); p.appendChild(text);document.images:返回对文档中所有 Image 对象引用document.images; // HTMLCollectiondocument.querySelector():返回文档中匹配指定的CSS选择器的第一元素document.querySelector(".pp"); // 第一个节点document.querySelectorAll():返回文档中匹配的CSS选择器的所有元素节点列表document.querySelector(".pp"); //所有节点document.write():向文档写HTML表达式或JavaScript代码document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");Dom元素对象{callout color="#74f53d"}document.addEventListener(event, function, useCapture)函数中，useCapture指定事件是否 在捕获或冒泡阶段执行,默认false 关闭冒泡。{/callout}element.addEventListener():向指定元素添加事件句柄 document.getElementById("a").addEventListener('click',function(){ ... })element.removeEventListener(): 移除添加的句柄事件element.appendChild():为元素添加一个新的子元素 let ele = document.getElementById('div'); let newEle = document.createElement('p'); let attr = document.createAttribute('name'); attr.value = 'age'; newEle.setAttribute('data-value', 'true'); newEle.setAttributeNode(attr); ele.appendChild(newEle);element.attributes:返回一个元素的属性数组let newEle = document.createElement('p'); let attr = document.createAttribute('name'); attr.value = 'age'; newEle.setAttribute('data-value', 'true'); newEle.setAttributeNode(attr); console.log(newEle.attributes); element.children:返回元素的子元素的集合(HTMLCollection)// HTMLCollection集合转为数组格式 Array.from(document.getElemntById("div").children); [...document.getElemntById("div").children];element.classList:返回元素的类名，作为 DOMTokenList 对象(DOMTokenList)[...document.getElemntById("div").classList];document.getElemntById("div").classList.add("class"); //增加类document.getElemntById("div").classList.contains("class"); // 是否存在指定类document.getElemntById("div").classList.remove("cla1",,); // 移除指定类 多个类以逗号分开document.getElemntById("div").classList.toggle("cla1",true/false); // 在元素中切换类名element.className:设置或返回元素的class属性document.getElemntById("div").className.cinludes("cls");element.cloneNode():克隆某个元素(同JQ中clone()函数)document.getElemntById("div").cloneNode(); // 复制Domelement.contentEditable:设置或返回元素的内容是否可编辑(contenteditable属性)let p = document.getElementById('p'); p.contentEditable = true; // 设置可编辑属性为true console.log(p.getAttribute('contenteditable')); // 输出可编辑属性为true p.setAttribute('contenteditable', false); //关闭可编辑属性 let att = document.createAttribute('contenteditable'); // 创建可编辑属性 att.value = true; p.setAttributeNode(att); // 重新设置可编辑为true let text = document.createTextNode('1234'); // 创建文本节点 p.appendChild(text); //文本节点内容追加于原文本之后 let common = document.createComment('注解内容'); p.appendChild(common); let span = document.createElement('span'); //创建span标签 span.innerHTML = '<strong>世界 你好！</strong>'; p.appendChild(span); p.removeAttribute('contenteditable');element.firstChild：返回元素的第一个子节点document.getElementsByClassName("pp").firstChild;element.hasAttribute()：如果元素中存在指定的属性返回 true，否则返回falsedocument.getElementsByClassName("pp").hasAttribute("name");element.hasFocus()：返回布尔值，检测文档或元素是否获取焦点document.getElementsById("div").hasFocus();element.lastChild：返回最后一个子节点document.getElementsByClassName("pp").lastChild();element.nodeName：返回元素的标记名（大写）document.getElemntById("div").nodeNmae; // DIVelement.removeAttribute()：从元素中删除指定的属性document.getElementById("div").removeAttribute("name");DOM 事件鼠标事件{callout color="#68ef4d"}函数方法中存在event事件变量，包含鼠标点击信息{/callout}oncontextmenu ：在用户点击鼠标右键打开上下文菜单时触发onmousedown ：鼠标按钮被按下onmouseup : 鼠标按键被松开onmouseover ：鼠标移到某元素之上(支持冒泡)onmouseout : 鼠标从某元素移开(支持冒泡)onmouseenter : 当鼠标指针移动到元素上时触发(不支持冒泡)onmouseleave : 当鼠标指针移出元素时触发(不支持冒泡)onmousemove : 鼠标移动触发onwheel：该事件在鼠标滚轮在元素上下滚动时触发键盘事件onkeypress:某个键盘按键被按下并松开onkeydown:某个键盘按键被按下(监听事件使用)onkeyup:某个键盘按键被松开表单事件onfocus:聚焦时间(不支持冒泡)onblur:失焦事件(不支持冒泡)onfocusin:元素即将获取焦点时触发(支持冒泡)onfocusout:元素即将失去焦点时触发(支持冒泡) // #form form表单 // 1. 不支持冒泡 document.getElementById('form').onfocus = function () { console.log('不冒泡'); }; // 2. 不支持冒泡 document.getElementById('form').addEventListener('focus', function () { console.log('不支持冒泡2'); }); // 3. 支持冒泡 document.getElementById('form').addEventListener('focusin', function () { console.log('支持冒泡2'); }); // 4. 支持冒泡 document.getElementById('form').addEventListener( 'focus', function () { console.log('支持冒泡3'); }, true );oninput: 元素获取用户输入时触发onselect:用户选择文本(input,textarea)剪贴板事件oncopy:该事件在用户拷贝元素内容时触发oncut:该事件在用户剪切元素内容时触发onpaste:该事件在用户粘贴元素内容时触发事件属性bubbles ：返回布尔值 事件是否起泡类型target ： 触发事件的元素type ： 当前对象事件名称事件方法event.stopPropagation()：阻止事件冒泡event.preventDefault()： 阻止默认事件Console对象console.group()：在控制台创建一个信息分组。以 console.group() 开始，console.groupEnd() 结束cosnole.trace(): 显示当前执行的代码在堆栈中的调用路径console.table(tabledata,tablecolumns): 输出表格信息.第一个参数必须，数组或对象格式var site1 = { name : "Runoob", site : "www.runoob.com" } var site2 = { name : "Google", site : "www.google.com" } var site3 = { name : "Taobao", site : "www.taobao.com" } console.table([site1, site2, site3]);console.time(): 计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间console.time('Runoob'); for (i = 0; i < 100000; i++) { // 代码部分 } console.timeEnd('Runoob');JavaScript 闭包{callout color="#6cf4b4"}自调用函数会自调用立即执行闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。{/callout}let add = (function () { let co = 1; console.log(1); return function () { return (co += 1); }; })();{music id="16483438" color="#4efd63" /}{/alert}

Javascript中的深拷贝和浅拷贝 {alert type="success"}1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下： number 、 string 、 boolean 、 null 、 undefined 、 symbol 引用类型值指那些可能由多个值构成的对象，只有一种如下： object 而数组Array和对象Object的数据类型都属于引用数据类型 object 在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。 在操作对象时， 实际上是在操作对象的引用而不是实际的对象。2.Javascript的变量的存储方式--栈（stack）和堆（heap）栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址堆：动态分配的内存，大小不定，也不会自动释放。里面存放引用类型的值。3.值传递与址传递 //地址传递 var aa="strs"; var bb=aa; aa="strs2"; console.log(aa); //strs2 console.log(bb); //strs //浅拷贝 地址传递 var aa = { a: 1, b: 2 }; //定义对象 数组同例 var bb = aa; //此时是地址传递,两个变量指向栈上同一个地址 aa.a = 3; //改变堆上地址对应的值 console.log(aa); //{ a: 3, b: 2 }; console.log(bb); //{ a: 3, b: 2 }; //深拷贝 地址传递 var aa = { a: 1, b: 2 }; var bb = JSON.parse(JSON.stringify(aa));//序列化之后反序列化,在栈上开辟了独立空间 aa.a = 3; //改变堆上地址对应的值 console.log(aa); //{ a: 3, b: 2 }; console.log(bb); //{ a: 1, b: 2 }; 需要注意的是，如果对象比较大，层级也比较多，深复制会带来性能上的问题。在遇到需要采用深复制的场景时，可以考虑有没有其他替代的方案。在实际的应用场景中，也是浅复制更为常用.{/alert}

jQuery备忘记录 {callout color="#f0ad4e"}数组处理常用方法var a = [1, 98, 34, 5, 6, 78, 5, 8]; var b = [2, 5, 8, 3]; //数组合并 var newArray=[...a,...b]; //1. es6语法 var newArray=$.merge(a,b); //2. jquery语法 //数组去重 使用es6 Set方法去重 //得到的时一个Set对象 是伪数组 const set=new Set([...a,...b]); const set=new Set($.merge(a,b)); //将伪数组转为可用数组 //1. 使用$.makeArray()方法 const arr= $.makeArray(new Set([...a,...b])) //2.使用es6方法[...arr] const arr=[...new Set([...a,...b])]; {/callout}