javascript基础08（js对象，BOM，库）

1.js对象
JavaScript中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript允许自定义对象。
JavaScript 提供多个内建对象，比如String、Date、Array等等。 对象只是带有属性和方法的特殊数据类型。

1)访问对象的属性
语法：objectName.propertyName

var message="Hello World!";
var x=message.length;

2)访问对象的方法
语法：objectName.methodName()

 var message="Hello world!";
 var x=message.toUpperCase();

3)创建 JavaScript 对象

方式1：

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 

方式2：

 person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}; 

方式3：使用对象构造器

 function person(firstname,lastname,age,eyecolor)
 {
     this.firstname=firstname;
     this.lastname=lastname;
     this.age=age;
     this.eyecolor=eyecolor;
 }

var person1 = new person("Lee", "Loe", "blue");

为什么可以这样，因为函数就是对象。

2.JavaScript 类

JavaScript 是面向对象的语言（有人认为是基于面向对象语言，基于对象语言），但 JavaScript不使用类。
我们可以使用面向对象的思想去使用。
在JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript基于 prototype，而不是基于类的。

eg：循环遍历对象的属性：

 var person={fname:"John",lname:"Doe",age:25}; 
 for (x in person)
 {
    txt=txt + person[x];
 }

3.JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

1)浏览器对象模型 (BOM)
浏览器对象模型（Browser Object Model (BOM)）
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM 的方法和属性。

2)Window 对象
所有浏览器都支持 window对象。它表示浏览器窗口。
所有 JavaScript全局对象、函数以及变量均自动成为 window对象的成员。
全局变量是 window对象的属性。
全局函数是 window对象的方法。
甚至 HTML DOM 的 document也是 window 对象的属性之一：window.document.getElementById("header");

3)Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript方案（涵盖所有浏览器）：

// 宽度
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
// 高度
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

其他 Window 方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

4)JavaScript Window Screen

5)Window Location

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

Window Location Href

http://www.shouce.ren/api/view/a/872

Window Location Assign

window.location.assign("http://www.badidu.com"); // 跳转到百度

6）JavaScript Window History

Window History Back

window.history.back()；

Window History Forward

window.history.forward()；

7）JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

*注意：来自navigator对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

4.JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

window.alert("sometext"); // 警告框
window.confirm("sometext");  // 确认框
window.prompt("sometext","defaultvalue");  // 提示框

确认框：

var b = confirm("queding?");
if(b){        
    document.write("yes");
}else {    
    document.write("no");
}

5.计时事件

1）每隔一段时间执行函数
语法：setInterval("javascript function",milliseconds);

eg:
setInterval(function(){alert("Hello")},3000);

如何停止执行?
语法：window.clearInterval(intervalVariable)

var myVar=setInterval(function(){myTimer()},1000);
clearInterval(myVar);

2）setTimeout()

等待3秒，然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);

myVar=setTimeout(function(){alert("Hello")},3000);
clearTimeout(myVar);

6.cookie

Cookies用于存储 web页面的用户信息。

1）什么是 Cookies？
Cookies 是一些数据, 存储于你电脑上的文本文件中。
当web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

2）使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

document.cookie="username=John Doe";

eg:document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT"

3)使用 JavaScript 读取 Cookie

var x = document.cookie;

4）使用 JavaScript 修改 Cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

5)使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

6)设置 cookie 值的函数

function setCookie(cname,cvalue,exdays)
{
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

7)获取cookie的值

var ca_arr = document.cookie.split(';');

7.javascript库

JavaScript库 - jQuery、Prototype、MooTools。

JavaScript高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。
为了应对这些调整，许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。

所有这些框架都提供针对常见JavaScript 任务的函数，包括动画、DOM操作以及 Ajax 处理。

1)jQuery

它使用 CSS选择器来访问和操作网页上的HTML 元素（DOM对象）

jQuery 同时提供 companion UI（用户界面）和插件。
引用jQuery:

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">

</script>

实例：

 function myFunction()
 {
 var obj=document.getElementById("h01");
 obj.innerHTML="Hello jQuery";
 }
 onload=myFunction;

等价于：

function myFunction()
{
   $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

主要的jQuery 函数是 $() 函数（jQuery函数）。如果您向该函数传递 DOM对象，它会返回 jQuery对象，带有向其添加的 jQuery功能。

当向 jQuery 传递DOM对象时，jQuery会返回以HTML DOM对象包装的jQuery 对象。

$(document)
$(#id_01)

jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。

$(#document).ready()

由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

$(#document).ready(checkCookies())

jQuery 允许链接（链式语法）。链接（Chaining）是一种在同一对象上执行多个任务的便捷方法。

$("#id_05").attr("style", "color:#f00").html("我设置了style和内容");

2)Prototype

提供用于执行常见 web任务的简单API。
API是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。

引用 Prototype
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>

3)MooTools

MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。
MooTools 也含有一些轻量级的效果和动画函数。

使用框架:

决定为网页使用 JavaScript 框架之前，首先对框架进行测试是明智的,JavaScript 框架很容易进行测试,您无需在计算机上安装它们，同时也没有安装程序,只需从网页中引用一个库文件。