学习web前端你的小伙伴都是知道的js是一个门槛,如果学不会js对于日后的开发也是有一定的影响的,但是怎么学习好js,小猿圈web前端讲师讲解JS前端知识点整理总结,希望对于学习web前端的你有所帮助。
页面加载事件的比较 window.onload jquery中的document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); callback(); }, false) } // 兼容IE else 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[0].style.backgroundColor = "red"; // 第一个孩子 child[child.length-1].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;" 常用的循环 for while dowhile switch多分支语句 var str = "abc"; switch(str) { case "a" // ... break; case "b" // ... break; case "c" // ... break; case "abc" // ... break; default: // ... } 以上就是小猿圈web前端老师介绍的JS前端知识点整理总结部分,想要学习web前端的小伙伴可以关注我,每天会分享不同的知识点web前端自学②群:738735873,相信不会让你失望的,学习前端可以到小猿圈网站去看一下最新最全面的前端课程。
|