前端学习之APIs+JS进阶

APIs一.DOM1.根据CSS选择器来获取DOM元素语法document.querySelectorAll(css选择器)参数包含一个或多个有效的CSS选择器 字符串返回值CSS选择器匹配的NodeList 对象集合document.querySelectorAll(ul li)2.操作元素1元素innerText 属性将文本内容添加更新到任意标签位置显示纯文本不解析标签const info document.querySelector(.info)info.innerText 嗨喽2innerHTML 属性将文本内容添加更新到任意标签位置会解析标签多标签建议使用模板字符const info document.querySelector(.info)info.innerHTML 嗨喽俺是strong刘德华/strong3对象.属性值4操作元素样式属性对象.style.样式属性值元素.className ‘active’5表单元素属性3.定时器-间歇函数setInterval函数间隔时间二.事件相关1.事件类型2.事件监听元素对象.addEvenListener‘事件类型’要执行的函数3.获取事件对象1语法元素addEventListener(click,function(e){ }2部分常用属性type获取当前的事件类型clientX/clientY获取光标相对于浏览器可见窗口左上角的位置 offsetX/offsetY获取光标相对于当前DOM元素左上角的位置key用户按下的键盘键的值现在不提倡使用keyCode4.回调函数5.事件流6.事件捕获DOM.addEventListener事件类型事件处理函数是否使用捕获机制7.事件冒泡8.阻止冒泡事件对象stopPropagation()e.preventDefault()9.解绑事件匿名函数无法解绑addEventListener方式必须使用removeEventListener事件类型事件处理函数获取捕获或者冒泡阶段)10.页面加载事件document.addEventListener(DOMContentLoaded, function () {// 执行的操作})11.页面滚动事件1监听整个页面滚动2获取位置12.页面尺寸事件三.日期对象1.实例化1获得当前时间const date new Date()2获得指定时间const date new Date(2008-8-8)console.log(date)2.时间对象方法3.时间戳三种方式获取时间戳1 使用 getTime(方法const date new Date()console.log(date.getTime())2 简写 new Date()console.log(new Date())3 使用 Date.now()无需实例化但是只能得到当前的时间戳 而前面两种可以返回指定时间的时间戳console.log(Date.now())四.节点操作1.查找结点子元素.parentNode父元素.children兄弟关系查找下一个兄弟节点nextElementSibling 属性上一个兄弟节点previousElementSibling 属性2.增加节点1创建节点document.createElement(标签名)2追加节点插入到这个父元素的最后父元素appendChild要插入的元素插入到某个子元素的前面父元素insertBefore要插入的元素在哪个元素前面3克隆节点元素cloneNode布尔值3.删除节点父元素removeChild要删除的元素五.M端事件六.Window对象1.bom浏览器对象模型2.定时器-延时函数setTimeout回调函数等待的毫秒数延时函数let timer setTimeout回调函数等待的毫秒数clearTimeout(timer)3.JS执行机制4.location对象常用属性和方法console.log(location.search)location.reload(true)5.navigator对象6.history对象7.本地存储1存储数据localStorage.setltem(key, value)获取数据localStorage.getltem(key)2存储复杂数据类型JSON.parse(JSON字符串const obj JSON.parse(localStorage.getItem(goods))console.log(obj)8.数组map和join方法9.正则表达式const 变量名 /表达式/10.元字符1边界符2量词3字符类【】匹配字符集合4修饰符/表达式/修饰符JS进阶一.函数参数1.动态参数arguments是函数内部内置的伪数组变量它包含了调用函数时传入的所有实参2.剩余参数3.展开运算符二.箭头函数箭头函数没有 arguments 动态参数但是有 剩余参数.args箭头函数不会创建自己的this它只会从自己的作用域链的上一层沿用this。三.解构1.数组解构const [a,b,c] [1,2,3]2.对象解构const [name,age] user四.数组和字符串1.array被遍历的数组forEach(function当前数组元素当前元素索引号{// 函数体})2.string五.原型1.console.log(Star.prototype//返回一个对象称为原型对象2.constructor六.拷贝1.浅拷贝拷贝对象Object.assgin()/展开运算符{..obj]}拷贝对象拷贝数组Array.prototype.concat()或者[..arr]2.深拷贝1自己利用递归函数书写深拷贝2利用js库lodash里面的_cloneDeep()3利用JSON字符串转换语法_.cloneDeep(要被克隆的对象const o_.cloneDeep(obj)const oJSON.parse(JSON.stringify(obj))七.其他1.throw 抛异常2.try/catch捕获错误信息3.debugger4.改变thisbind()不会调用函数。但是能改变函数内部this指向fun.bind(thisArg, argl, arg2, ...)5.防抖和节流用lodash实现