day 0701"/>
day 0701
location.hash //如果URL包含#,返回该符号之后的内容,如#anchor1
/*
hash 一般用于锚点或者路由
当改变hash会触发onhashchange事件
可以通过hash改变产生历史记录,也可以通过历史回退前进切换hash
可以通过hash不同设置同页面中不同的位置,以及同页面中不同的内容
*/
location.host //IP+Port
location.hostname //IP
location.href //当前载入页面的完整URL
location.port //URL声明的请求的端口
location.reload(true | false); //重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false
//获取浏览器定位信息
navigator.geolocation.getCurrentPosition(function(geo){
console.log(geo.coords);
},function(err){
console.log(err);
})
//谷歌浏览器会报错,原因:默认使用谷歌地图,信息安全原因
SSR与CSR的了解链接:点我
文档碎片容器
createDocumentFragment()
DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用,就像标准的document一样,存储由节点(nodes)组成的文档结构。与document相比,最大的区别是DocumentFragment 不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。
虚拟DOM 复制DOM(不复制属性等),解决元素属性更改页面就重绘的问题
了解1 了解2
案例:
//历史记录var arr=[["苹果","香蕉","西瓜","桃子","杏","榴莲","葡萄","芒果","荔枝","菠萝","火龙果","橘子","橙子"],["番茄","白菜","菠菜","茄子","土豆","豆角","黄瓜","油菜","油麦菜","花白","韭菜","西蓝花"],["小米","大米","燕麦","黑米","薏仁","绿豆","红豆","黄豆","花生油","菜籽油","玉米油","橄榄油","调和油"],["鸡","鸭","鱼","牛肉","羊肉","狗肉","驴肉","蛇肉","排骨","肋条","牛腱","眼肉","五花肉","鸡爪","鸡脖"],["虾爬子","带鱼","鲅鱼","平鱼","生蚝","石斑鱼","多宝鱼","章鱼","澳龙","青龙","鲍鱼","海胆","帝王蟹","海参"]]var list=["水果","蔬菜","粮油","禽肉","海鲜"]var lis,div,prev;init();function init(){lis=Array.from(document.getElementsByTagName("li"));div=document.getElementById("div1");lis.forEach(function(item){item.onclick=clickHandler;});var index=history.state;if(index===null)index=0;history.replaceState(index,lis[index].innerHTML)changePrev(lis[index]);window.onpopstate=popstateHandler;}function clickHandler(){changePrev(this);history.pushState(list.indexOf(this.innerHTML),this.innerHTML);}function setData(elem){var data=arr[list.indexOf(elem.innerHTML)];div.innerHTML=data.reduce(function(value,item){return value+item+"   "},"");}function changePrev(elem){if(prev){prev.style.backgroundColor="orange"prev.style.boxShadow="none";}prev=elem;prev.style.backgroundColor="rgb(255, 217, 0)"prev.style.boxShadow="0px 0px 3px 3px rgb(255, 253, 148) inset";setData(prev);}function popstateHandler(){if(history.state===null) return;changePrev(lis[history.state]);}
//历史记录hashvar arr=[["苹果","香蕉","西瓜","桃子","杏","榴莲","葡萄","芒果","荔枝","菠萝","火龙果","橘子","橙子"],["番茄","白菜","菠菜","茄子","土豆","豆角","黄瓜","油菜","油麦菜","花白","韭菜","西蓝花"],["小米","大米","燕麦","黑米","薏仁","绿豆","红豆","黄豆","花生油","菜籽油","玉米油","橄榄油","调和油"],["鸡","鸭","鱼","牛肉","羊肉","狗肉","驴肉","蛇肉","排骨","肋条","牛腱","眼肉","五花肉","鸡爪","鸡脖"],["虾爬子","带鱼","鲅鱼","平鱼","生蚝","石斑鱼","多宝鱼","章鱼","澳龙","青龙","鲍鱼","海胆","帝王蟹","海参"]]var list=["水果","蔬菜","粮油","禽肉","海鲜"]var lis,div,prev;init();function init(){lis=Array.from(document.getElementsByTagName("li"));div=document.getElementById("div1");lis.forEach(function(item){item.onclick=clickHandler;});var index=~~(location.hash.slice(1));history.replaceState(index,lis[index].innerHTML,"#"+index);changePrev(lis[index]);window.onhashchange=hashchangeHanlder;}function clickHandler(){changePrev(this);var index=list.indexOf(this.innerHTML);history.pushState(index,this.innerHTML,"#"+index);}function setData(elem){var data=arr[list.indexOf(elem.innerHTML)];div.innerHTML=data.reduce(function(value,item){return value+item+"   "},"");}function changePrev(elem){if(prev){prev.style.backgroundColor="orange"prev.style.boxShadow="none";}prev=elem;prev.style.backgroundColor="rgb(255, 217, 0)"prev.style.boxShadow="0px 0px 3px 3px rgb(255, 253, 148) inset";setData(prev);}function hashchangeHanlder(){var index=~~(location.hash.slice(1));changePrev(lis[index]);}
作业(后补):
1.获取当前浏览器版本和型号的函数
2.document.body获取类似于"我的产品"标签内容10个
更多推荐
day 0701
发布评论