首页 > 代码库 > js常用内置对象、Dom对象、BOM对象
js常用内置对象、Dom对象、BOM对象
11、html元素事件属性中，如onclick="",双引号里可以是方法条用，可以是js代码（无需加<script>标签）
12、JavaScript内置 对象、属性和方法（您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名）：
Array Date eval function hasOwnProperty
Infinity isFinite isNaN isPrototypeOf length
Math NaN name Number Object
prototype String toString undefined valueOf
13、Windows 保留关键字：（在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：）
alert all anchor anchors area
assign blur button checkbox clearInterval
clearTimeout clientInformation close closed confirm
constructor crypto decodeURI decodeURIComponent defaultStatus
document element elements embed embeds
encodeURI encodeURIComponent escape event fileUpload
focus form forms frame innerHeight
innerWidth layer layers link location
mimeTypes navigate navigator frames frameRate
hidden history image images offscreenBuffering
open opener option outerHeight outerWidth
packages pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin prompt
propertyIsEnum radio reset screenX screenY
scroll secure select self setInterval
setTimeout status submit taint text
textarea top unescape untaint window
14、HTML 事件句柄（除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。）：
onblur onclick onerror onfocus
onkeydown onkeypress onkeyup onmouseover
onload onmouseup onmousedown onsubmit
15、自定义对象：
通过 JavaScript，您能够定义并创建自己的对象。
创建新对象有两种不同的方法：
定义并创建对象的实例
使用函数来定义对象，然后创建新的对象实例
1）、创建对象，并赋值
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
相当于：var person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
2）、本例使用函数来构造对象：注意调用构造函数时需要加new关键字调用
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
3）把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
16.avaScript for...in 语句循环遍历对象的属性。（for...in 循环中的代码块将针对每个属性执行一次。）
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
{
txt=txt + person[x];
}
//txt=BillGates56
17、日期对象：
创建日期：
var d=new Date() // 当前日期和时间
var d=new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
var d=new Date(dateString)
var d=new Date(year, month, day, hours, minutes, seconds, milliseconds)
设置日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
日期对象的一些常用方法
var x1=d.getDay(); //回去当前日期为第几天 从星期日到星期六 分别为 0~6
var x2=d.getFullYear(); //获取年份 2014
var x3=d.getTime(); // 返回从 1970 年 1 月 1 日至今的毫秒数。
var h=today.getHours(); //获取小时
var m=today.getMinutes(); //获取分钟
var s=today.getSeconds();// 获取秒数
在页面显示时间：
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
在 onl oad中调用 startTime()
18、JavaScript Array（数组） 对象：
创建一个数组，有三种方法。
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
访问数组
var name=myCars[0];
在一个数组中你可以有不同的对象
所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
因此，你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
数组方法和属性
使用数组对象预定义属性和方法：
var x=myCars.length // the number of elements in myCars
var y=myCars.indexOf("Volvo") // the index position of "Volvo"
常用数组方法：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
1、合并数组
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
2、用数组的元素组成字符串
x.innerHTML=fruits.join();
3、删除数组的最后一个元素 - pop()
fruits.pop();
4、数组的末尾添加新的元素 - push()
fruits.push("Kiwi")
5、将一个数组中的元素的顺序反转排序 - reverse()
fruits.reverse();
6、删除数组的第一个元素 - shift()
fruits.shift();
7、数组排序（按首字母顺序升序）- sort()
fruits.sort();
8、数字排序（按数字顺序升序）- sort()
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
9、数字排序（按数字顺序降序）
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
20、js中 Boolean 对象
Boolean 对象代表两个值:"true" 或者 "false"
下面的代码定义了一个名为 myBoolean 的布尔对象：
var myBoolean=new Boolean();
如果布尔对象无初始值或者其值为:
0
-0
null
""
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）
21、JavaScript Math（算数） 对象
1、四舍五入
Math.round(2.5); // 3
2、
如何使用 random() 来返回 0 到 1 之间的随机数。
var x= Math.random(); //0.5183624960362349
3、取两个数中的较大值
Math.max(5,10); //10
4、Math.min(5,10); //5
22、JavaScript RegExp 对象
语法：
var patt=new RegExp(pattern,modifiers);
or more simply:
var patt=/pattern/modifiers;
模式描述了一个表达式模型。
修饰符用于执行不区分大小写和全文的搜索。
i - 修饰符是用来执行不区分大小写的匹配。
g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。
test()
The test()方法搜索字符串指定的值，根据结果并返回真或假。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //返回true
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); //返回e
浏览器对象模型 (BOM)
23、Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
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() - 调整当前窗口的尺寸
24、window.screen 对象包含有关用户屏幕的信息。
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
25、window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的整个 URL。
location.pathname 属性返回 URL 的路径名。
location.assign(“url”) 方法加载新的文档。
26、window.history 对象包含浏览器的历史。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
27、window.navigator 对象包含有关访问者浏览器的信息。
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
28、JavaScript 弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法
window.alert("sometext");
window.alert() 方法可以不带上window对象，直接使用alert()方法。
确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。语法
window.confirm("sometext");
window.confirm() 方法可以不带上window对象，直接使用confirm()方法。
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法
window.prompt("sometext","defaultvalue");
window.prompt() 方法可以不带上window对象，直接使用prompt()方法。
换行
弹窗使用 反斜杠 + "n"(\n) 来设置换行。
实例
alert("Hellon\nHow are you?");
29、JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码
setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
第一个参数是函数（function）
第二个参数间隔的毫秒数
停止执行：
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
30、JavaScript Cookies
Cookies 用于存储 web 页面的用户信息。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。
javaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript 读取 Cookie
var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookies 类似于创建 cookies，如下所示：
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; //旧的 cookie 将被覆盖。
使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //注意，当您删除时不必指定 cookie 的值。
Cookie 字符串
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：
cookie1=value; cookie2=value;
demo:
<!DOCTYPE html>
<html>
<head>
<script>
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;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(‘;‘);
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Welcome again " + user);
}
else
{
user = prompt("Please enter your name:","");
if (user!="" && user!=null)
{
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onl oad="checkCookie()">
</body>
</html>
js常用内置对象、Dom对象、BOM对象