js面向对象学习笔记之9(BOM 与 DOM 中常用属性分析)

js面向对象学习笔记之九(BOM 与 DOM 中常用属性分析)

一  BOM对象 window 的 相关属性

1. 用户配置机器配置对象 navigator

 navigator.userAgent //该属性可以查看用户机器浏览器的配置
   "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"

2. 用户uri访问地址 location

   主    机：host: "www.baidu.com"                           
   主机名称：hostname: "www.baidu.com"
   完整uri ：href: "http://www.baidu.com/s?wd=%E5%A6%82%E4%B"
   域    名：origin: "http://www.baidu.com"
   路    径：pathname: "/s"
   端 口 号：port: ""
   协议类型：protocol: "http:"
   重新载入：reload: function  无参数 直接调用
   重新载入：replace: function 有参数 调用后 不会在history中生成
   GET 参数：search: "?wd=aaa&lang=zh_cn&name=lizsi"

//获取用户url 上的参数
   //直接使用 getParam('name')
   function getParam(param){
   	   var getarr = (window.location.search.substring(1)).split('&');
	   var getparam = {};
	   for(var j in getarr){
		   var temp = getarr[j].split('=');
		   temp[0] = temp[0].replace(' ','');//去掉变量名中的空格
		   getparam[temp[0]] = temp[1];
	   }
	   return getparam[param];
   }

   //对于pathinfo模式的获取 直接使用getpathinfo(1); 从1开始
   function getpathinfo(index){
	   var getarr = (window.location.pathname.substring(1)).split('/');
	   return getarr[parseInt(index)-1];
   }

3. 历史访问记录 history

   只允许访问本域名下的历史记录
   后退 一 页：back: function 无参数 直接调用
   前进 一 页：forward: function 无参数 直接调用
   返回指定页：go: function -1 后退一页 0 刷新当前页 1 前进一页 2 前进俩页
   pushState: function () 参数
   replaceState: function () 参数

 //详情查看 http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?area=pudong

	//点击过的 加入历史记录
	var query = this.href.split("?")[1];
	history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query);
	var title = $(this).text().replace(/\d+$/, "");
	document.title = title;
    
	//监听 相关事件
	window.addEventListener("popstate", function() {
        history.replaceState(null, document.title, location.href.split("?")[0]);
    });

4. 屏幕对象 screen

   屏幕可见高度: availHeight: 667
   屏幕可见宽度: availWidth: 375
   屏幕分辨率:   colorDepth: 24
   屏幕高度:     height: 667
   屏幕宽度:     width: 375
   availLeft: 0
   availTop: 0

二  DOM 对象 document

1. 缓存 cookie

 //直接使用 cookieParam('name')
   function cookieParam(param){
   	   var getarr = document.cookie.split(';');
	   var getparam = {};
	   for(var j in getarr){
		   var temp = getarr[j].split('=');
		   temp[0] = temp[0].replace(' ','');//去掉变量名中的空格
		   getparam[temp[0]] = temp[1];
	   }
	   return getparam[param];
   }