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];
   }
时间: 2024-11-05 16:32:18

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

js面向对象学习笔记之二(debug调试方法)

1. js的调试 很明显,js 调试只能够通过 alert 进行打印 alert(id); 对于复杂的数据类型,我们可以通过将其转换成json格式 再进行弹出 alert(JSON.stringify(data)); 2. DOM 信息调试 对于我们需要获取到的信息 可以根据要求打印到dom元素里 document.write(data); //会覆盖整个文档 3. 在程序端调试 直接在程序端打印所需信息后退出 var_dump() print_r() 4. js 其他错误信息处理 /*====

js面向对象学习笔记之八(cookie使用 与 url的get参数获取)

1. COOKIE的使用 <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="./jquery.cookie.js"></script> <script> //这个设置 与 移除 是一一对应的 默认cookie 作用域为当前文件夹下 $.cookie("favourite-city"

js面向对象学习笔记之六(变量)

[1.值对应的boolean] false 布尔值 false 对象 null 数字 NaN (not a number) 数字 0 初始值 undefined 空字符串 "" true 字符串 "0" 或其他 非以上六种值 [2. null 与 undefined 的不同] null 实质是被赋予的 空的对象 或 数组 undefined 则是 声明或者未声明的变量 但未赋值的变量初始值 所以并不是 使用了 var 声明就不会出现undefined 所有没有初始值

js面向对象学习笔记之一(类与对象)

1. javascript中的类即函数 /*==============================类即函数=====================================*/ function People(name,sex,addr){ this.name = name; this.sex = sex; this.addr = addr; this.foo = function(){ alert(this.name + this.sex+this.addr); } } var

js面向对象学习笔记之四(Date 对象)

//日期字符串转时间戳 var date="2015-03-18"; date = new Date(Date.parse(date.replace(/-/g, "/"))); date = date.getTime(); document.write(date); var date = new Date(); //返回当前的时间对象 getDate() //日 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() //星期 从 Date 对

js面向对象学习笔记之五(定时器)

话不多说 ,直接上代码 : function set(a,b,c){ alert(a); alert(b); alert(c); } //一次定时 setTimeout(set,3000,1,2,30); //三秒后 依次弹出 1,2,30 //循环定时 setInterval(set,3000,4,5,90); //每隔三秒 依次弹出 4,5,90

js面向对象学习笔记之七(函数 与 基础控制结构)

[函数部分] 1. 函数内置参数数组对象 arguments function sum(){ var len = arguments.length; var s = 0; for(var i = 0;i<len;i++){ s += arguments[i]; } return s; }; var b = sum(1,2,3,4,5); alert(b); //15 2. 预定义内置函数 parseInt() //字符串转整型 第二个参数 选择进制 parseInt(0777,8); parse

js面向对象学习笔记之三(Array 对象)

1. 数组的初始化: //三种初始化方式 new Array(); new Array(size); new Array(element0, element1, ..., elementn); 2. 属性 constructor 返回对创建此对象的数组函数的引用. length 设置或返回数组中元素的数目. prototype 使您有能力向对象添加属性和方法. 3. 方法 concat()     连接两个或更多的数组,并返回结果. 使用: arrayObj.concat(aobj1,aobj2

js面向对象学习笔记(二):工厂方式:封装函数

//工厂方式:封装函数function test(name) { var obj = new Object(); obj.name = name; obj.sayName = function () { alert(this.name); }; //抛出 return obj;}var p1 = test('小明');p1.sayName();var p2 = test('小王');p2.sayName(); //优化//创建对象要注意首字母大写//当new去调用一个函数:这个时候函数中的thi