小猿圈web前端解读JS前端知识点整理总结
学习web前端你的小伙伴都是知道的js是一个门槛，如果学不会js对于日后的开发也是有一定的影响的，但是怎么学习好js，小猿圈web前端讲师讲解JS前端知识点整理总结，希望对于学习web前端的你有所帮助。https://upload-images.jianshu.io/upload_images/18616261-d75aa4b80b70efb2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240页面加载事件的比较window.onloadjquery中的document.readydocument.ready = function (callback) {// 兼容FF,Googleif (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); callback(); }, false)}// 兼容IEelse if (document.attachEvent) { document.attachEvent('onreadystatechange', function () { if (document.readyState == "complete") { document.detachEvent("onreadystatechange", arguments.callee); callback(); } })}else if (document.lastChild == document.body) { callback();}}window.onload = function () {alert('onload'); // 后执行};document.ready(function () {alert('ready'); // 先执行});内部实现细节如上数组的常用操作方法push从后面追加一个或多个，返回新数组的长度unshift从前面追加一个或多个，返回新数组的长度pop删除最后一个元素，返回被删除的元素shift删除第一个元素，返回第一个被删除的元素concat连接数组，返回新的数组join将数组转字符串，参数是分隔符，默认是分隔符是逗号”,”split将字符串转换为数组，默认分割符是逗号stringObject.split(separator,howmany),howmany参数可指定返回的数组的最大长度js的构成ECMAScript描述了js语法和基本对象DOM(文档对象模型)提供了文档结构化表示，并定义了如何通过脚本来访问文档结构BOM(浏览器对象模型)提供与浏览器交互的方法和接口dom节点标签节点文字节点属性节点注释节点获取节点的方式document.getElementById(“id”)document.getElementByTagName(“div”)document.getElementsByClassName(“classname”) ie 678 不支持document.querySelector(); // 返回第一个匹配的dom元素document.querySelectorAll(); // 返回所有dom元素匹配的集合获取浏览器是否支持的写法如下if(document.querySelector){// do your business}节点的访问父节点(唯一):dom.parentNode兄弟节点(兼容写法):// nextSibling 和 previousSibling 是IE的写法var next = (dom.nextElementSibling) || (dom.nextSibling);var pre = (dom.previousElementSibling) || (dom.previousSibling);孩子节点(兼容写法):// firstChild, lastChild 是IE的写法var first = father.firstElementChild || father.firstChild;var last = father.lastElementChild || father.lastChild;孩子们节点：childNodes和children// childNodes 是w3c推荐使用， 但谷歌等浏览器把换行也看成一个节点// 用下面的方式实现，比较麻烦var demo = document.getElementById("demo");var nodes = demo.childNodes;for(var i=0;i<nodes.length;i++) {if(nodes.nodeType == 1) {nodes.style.display = "none";}}// children 在ie678里面包含注释节点， 注意在编码时避开使用注释var demo = document.getElementById("demo");var child = demo.children;child.style.backgroundColor = "red";// 第一个孩子child.style.backgroundColor = "red";// 最后一个孩子dom节点操作创建节点：var dom = document.createElement(“div”);添加节点：// appendChild 将dom追加到dom1的最后面dom1.appendChild(dom) ;// insertBefore 将newDom 插入到 ReferencedDom 的前面, 返回值为新插入的值, dom1 为父节点dom1.insertBefore(newDom, ReferencedDom)删除节点：removeChild() eg: domA.removeChild(domB); // 删除domA里面的孩子节点domB克隆节点：cloneNode复制节点，接受一个布尔值，true表示深复制(复制节点及其内部所有节点)，false表示浅复制// 深复制demo.cloneNode(true);// 浅复制demo.cloneNode(false);属性设定非兼容ie6,7的写法-获取：dom.getAttribute(“属性”);-设置：dom.setAttribute(“属性”,”值”);-删除：dom.removeAttribute(“属性”);兼容写法举例：-获取：varcn=dom.className-设置：dom.className=“dcl”-删除：dom.className=null;特殊样式属性cssText用于更改多个样式属性设置dom.style.cssText = "width:30px;height:10px;"常用的循环forwhiledowhileswitch多分支语句var str = "abc";switch(str) {case "a"// ...break;case "b"// ...break;case "c"// ...break;case "abc"// ...break;default:// ...}以上就是小猿圈web前端老师介绍的JS前端知识点整理总结部分，想要学习web前端的小伙伴可以关注我，每天会分享不同的知识点web前端自学②群：738735873，相信不会让你失望的，学习前端可以到小猿圈网站去看一下最新最全面的前端课程。
页:
[1]