js碎知识整理
dom樹和render樹的對應關系
解釋型語言：一邊執行一邊解釋（js）
編譯型語言：運行速度快
es6才有常量，常量默認規范變量名使用大寫
基本數據類型儲存在棧中，object存儲在堆中
棧：速度快但容量小
堆：速度慢，容量大
所有數據類型都是基于對象構建而成的
0、空字符串、false、NaN、underfined、null強制轉換布爾值時是false
var b = true;
b = Number(b);//輸出b為1
NaN和數字比較為false
0 = false = “”;//相等
null = underfined；//相等
NaN 不等NaN //symbol也是如此
字符相加時首尾相連，若一端為字符串則會隱式轉換為字符串
1 +t rue = 2
1 + underfined = NaN
2 + null = 2
true + true = 2
null、underfined、NaN、空字符串取反為true，其余取反均為false
ps中每英寸占用72個像素點，一個字96個像素點
一英寸需要：72 * 4 = 288B
位非：加1取反
~~a；//數值還原取整
js中的hash實現歷史記錄訪問（頁面不刷新）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.menu {list-style: none;margin: 0;padding: 0;}.menu>li {float: left;padding: 5px 20px;border: 1px solid #c9b8b8;background-color: skyblue;color: white;user-select: none;}a{text-decoration: none;color: white;}ul::after {content: "";display: block;height: 0;visibility: hidden;overflow: hidden;clear: both;}div {width: 1000px;min-height: 100px;background-color: antiquewhite;}</style> </head> <body><ul class="menu"><li id="vegetables"><a href="#vegetables">蔬菜</a></li><li id="fruit"><a href="#fruit">瓜果</a></li><li id="oil"><a href="#oil">糧油</a></li><li id="meat"><a href="#meat">禽肉</a></li></ul><div id="div1"></div><script>var list = {vegetables: ["大白菜","娃娃菜","油麥菜","菠菜","蓮藕","春筍","韭菜","胡蘿卜","大蔥",],fruit: ["蘋果","西瓜","柚子","梨","香蕉","櫻桃","草莓","榴蓮","桃子","杏","橘子",],oil: ["大米","小米","黃米","黃豆","綠豆","紅豆","精面","莜面","花生油","大豆油","橄欖油",],meat: ["牛肉","羊肉","雞肉","豬肉","鴨肉","魚肉","驢肉","雞蛋","鴨蛋",],};var prev,div;init();function init(){div=document.getElementById("div1");window.onhashchange=hashChangeHandler;var vegetables = "vegetables";var data = list["vegetables"];changeTab(vegetables);renderDiv(data);}function hashChangeHandler(e){console.log(location.hash);var id=location.hash.slice(1);changeTab(id);var data=list[id];renderDiv(data);}function renderDiv(data){div.innerHTML="<ul>"+data.reduce(function(value,item){return value+"<li>"+item+"</li>";},"")+"</ul>";}function changeTab(id){if(prev){prev.style.backgroundColor="skyblue";}prev=document.getElementById(id);prev.style.backgroundColor="darkblue";}</script> </body> </html>通過history訪問
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.menu {list-style: none;margin: 0;padding: 0;}.menu>li {float: left;padding: 5px 20px;border: 1px solid #c9b8b8;background-color: skyblue;color: white;user-select: none;}ul::after {content: "";display: block;height: 0;visibility: hidden;overflow: hidden;clear: both;}div {width: 1000px;min-height: 100px;background-color: antiquewhite;}</style></head><body><ul class="menu"><li id="vegetables">蔬菜</li><li id="fruit">瓜果</li><li id="oil">糧油</li><li id="meat">禽肉</li></ul><div id="div1"></div><script>var list = {vegetables: ["大白菜","娃娃菜","油麥菜","菠菜","蓮藕","春筍","韭菜","胡蘿卜","大蔥",],fruit: ["蘋果","西瓜","柚子","梨","香蕉","櫻桃","草莓","榴蓮","桃子","杏","橘子",],oil: ["大米","小米","黃米","黃豆","綠豆","紅豆","精面","莜面","花生油","大豆油","橄欖油",],meat: ["牛肉","羊肉","雞肉","豬肉","鴨肉","魚肉","驢肉","雞蛋","鴨蛋",],};var prev, lis,div1;init();function init() {div1=document.getElementById("div1");lis = Array.from(document.getElementsByTagName("li"));lis.forEach(function (item) {item.onclick = clickhandler;});changeTab(lis[0])var data=list[lis[0].id];renderDiv(data,lis[0].id);history.pushState(data,lis[0].id,"#"+lis[0].id);window.onpopstate=popHandler;}function clickhandler() {changeTab(this);var data=list[this.id];renderDiv(data,this.id);history.pushState(data,this.id,"#"+this.id);}function renderDiv(data,id){div1.innerHTML="<ul>"+data.reduce(function(value,item){return value+="<li>"+item+"</li>"},"")+"</ul>";}function changeTab(elem) {if (prev) {prev.style.backgroundColor = "skyblue";}prev = elem;prev.style.backgroundColor = "darkblue";}function popHandler(e){if(!e.state) return;renderDiv(e.state,location.hash.slice(1));changeTab(document.getElementById(location.hash.slice(1)))}</script></body> </html>dom節點選擇
var div1=document.querySelector("#div1");// div.parentElement//父元素// div.parentNode//父節點// div.children//子元素 html標簽// div.childNodes//子節點// div.firstChild //第一個子節點// div.firstElementChild//第一個子元素// div.lastChild//最后一個子節點// div.lastElementChild//最后一個子元素// div.previousSibling//向上一個兄弟節點// div.previousElementSibling//向上一個兄弟元素// div.nextSibling//向下一個兄弟節點// div.nextElementSibling//向下一個兄弟元素//var elem= document.createElement("")//創建元素// var txtNode=document.createTextNode("文本節點");//創建文本節點// var elem=document.createDocumentFragment();//創建文檔碎片容器// div.txtContent //獲取設置元素的文本節點// parent.insertBefore(元素,要放置的位置后元素)//插入節點// parent.appendChild(元素) //插入節點到尾部// node.cloneNode(false) //淺復制// node.cloneNode(true) //深復制// elem.remove();//刪除// parent.removeChild(elem);//刪除// parent.replaceChild(元素，被替換的元素)//替換元素var ipt=document.querySelector("input"); //若多個input標簽，只用第一個，此處的ipt可對網頁中第一個input進行操作 // clientWidth clientHeight 客戶寬高 邊框以內的所有寬高之和-滾動條寬高// offsetWidth offsetHeight 偏移寬高 DOM元素在頁面中占位的寬高// scrollWidth scrollHeight 滾動區域寬高// clientLeft clientTop 客戶位置 邊線寬高// offsetLeft offsetTop 偏移位置 元素左上角的相對位置// scrollLeft scrollTop 滾動條位置 滾動條位置 可讀可寫// 初始化第一次渲染時，頁面中的滾動條不可以設置，當第一次渲染完畢，交互時有效 //常用方法// document.addEventListener("click",clickHandler);// function clickHandler(e){// // document.documentElement.scrollTop=300;// // document.body.scrollTop=300;// }// document.addEventListener("scroll",scrollHandler);// function scrollHandler(e){// console.log(document.documentElement.scrollTop)// }
總結
- 上一篇： 全球与中国冷冻莴苣市场深度研究分析报告
- 下一篇： 这才叫酷！戴上这些装备喝酒你就是酒仙了(