JavaScript学习
一．Label标签配合break，continue实现循环退出
例子：
varnum = 0;
outermost:
for (vari=0; i< 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
num++;
}
}
alert(num); //95
内部循环中
的break 语句带了一个参数：要返回到的标签。添加这个标签的结果将导致break 语句不仅会退出内
部的for 语句（即使用变量j 的循环），而且也会退出外部的for 语句（即使用变量i的循环）
二．判断对象的引用类型
alert(person instanceof Object); // 变量person 是Object 吗？
三．数组toString()可实现逗号（,）拼接字符串
var people = [1, "dsd"];
console.log(people); //[1, "dsd"]
console.log(people.toString());//1,dsd
Join()方法也可实现，同时支持其他字符；
var colors = ["red", "green", "blue"];
alert(colors.join(",")); //red,green,blue
alert(colors.join("||")); //red||green||blue
四．队列方法
结合使用shift()和push()方法，可以像使
用队列一样使用数组。
var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2
count = colors.push("black"); //推入另一项
alert(count); //3
var item = colors.shift(); //取得第一项
alert(item); //"red"
alert(colors.length); //2
五．splice()方法（数组任意位置删除、插入、替换）
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow，返回的数组中只包含一项
六．迭代方法
every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
以上方法都不会修改数组中的包含的值。
七．Date()兼容说明
支持Data.now()方法的浏览器包括IE9+、Firefox 3+、Safari 3+、Opera 10.5 和Chrome。在不支
持它的浏览器中，使用+操作符把Data 对象转换成字符串，也可以达到同样的目的。
//取得开始时间
var start = +new Date();
//调用函数
doSomething();
//取得停止时间
var stop = +new Date(),
result = stop - start;
toDateString()——以特定于实现的格式显示星期几、月、日和年；
"Tue Jul 12 2016"
toTimeString()——以特定于实现的格式显示时、分、秒和时区；
"14:55:10 GMT+0800"
toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年；"2016/7/12"
toLocaleTimeString()——以特定于实现的格式显示时、分、秒；
"下午2:52:57"
toUTCString()——以特定于实现的格式完整的UTC 日期。
"Tue, 12 Jul 2016 06:52:43 GMT"
与toLocaleString()和toString()方法一样，以上这些字符串格式方法的输出也是因浏览器
而异的，因此没有哪一个方法能够用来在用户界面中显示一致的日期信息。UTC 日期指的是在没有时区偏差的情况下（将日期转换为GMT 时间）
的日期值。
直接获取和设定日期特定部分的方法介绍见120页
八．函数内部属性
有两个特殊的对象：arguments 和this。虽然arguments 的主要用途是保存函数参数，
但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments 对象的函数。为
了消除这种紧密耦合的现象，可以像下面这样使用arguments.callee。function factorial(num){
if (num<=1) {
return 1;
} else {
return num * arguments.callee(num-1)}}
九．每个函数都包含两个非继承而来的方法：apply()和call()
apply()方法接收两个参数：一个
是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array 的实例，也可以是
arguments 对象。例如：
function sum(num1, num2){
return num1 + num2;
}
function callSum1(num1, num2){
return sum.apply(this, arguments); // 传入arguments 对象
}
function callSum2(num1, num2){
return sum.apply(this, [num1, num2]); // 传入数组
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20
call()方法与apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。对于call()
方法而言，第一个参数是this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用
call()方法时，传递给函数的参数必须逐个列举出来，如下面的例子所示。function sum(num1, num2){
return num1 + num2;
}
functioncallSum(num1, num2){
returnsum.call(this, num1, num2);
}
alert(callSum(10,10)); //20
使用call()（或apply()）来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。
bind()方法：这个方法会创建一个函数的实例，其this 值会被绑
定到传给bind()函数的值。
十．Number引用类型
toFixed()：，IE8 及之前版本不能正确舍入范围在{( 0.94, 0.5],[0.5,0.94)}之间的值，之后的版本已修复。
toPrecision()方法可以表现1 到21 位小数；
十一. 字符串拼接：concat（）
varstringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!"
alert(stringValue); //"hello"
1.有两个可以从字符串中查找子字符串的方法：indexOf()和lastIndexOf()
indexOf()方法从字符串的开头向后搜索子字符串，而lastIndexOf()方法是从字符串的末尾向前搜索子字符串。还是来看一个例子吧。
varstringValue = "hello world";
alert(stringValue.indexOf("o")); //4
alert(https://www.doczj.com/doc/d38652141.html,stIndexOf("o")); //7
2.字符串比较localeCompare()方法
如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多数情况下是-1，具体
的值要视实现而定）；
如果字符串等于字符串参数，则返回0；
如果字符串在字母表中应该排在字符串参数之后，则返回一个正数（大多数情况下是1，具体的
值同样要视实现而定）。下面是几个例子。
varstringValue = "yellow";
alert(stringValue.localeCompare("brick")); //1
alert(stringValue.localeCompare("yellow")); //0
alert(stringValue.localeCompare("zoo")); //-1
十二. Math()
1）舍入方法
Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数（这也是我们在数学课上学到的舍入规则）。下面是使用这些方法的示例：alert(Math.ceil(25.9)); //26
alert(Math.ceil(25.5)); //26
alert(Math.ceil(25.1)); //26
alert(Math.round(25.9)); //26
alert(Math.round(25.5)); //26
alert(Math.round(25.1)); //25
alert(Math.floor(25.9)); //25
alert(Math.floor(25.5)); //25
alert(Math.floor(25.1)); //25
2）random()方法
Math.random()方法返回大于等于0 小于1 的一个随机数。套用下面的公式，就可以利用Math.random()从某个整数范围内随机选择一个值。
值= Math.floor(Math.random() * 可能值的总数+ 第一个可能的值)
如果你想选择一个1到10 之间的数值，可以像下面这样编写代码：
varnum = Math.floor(Math.random() * 10 + 1);
而如果想要选择一个介于2 到10 之间的值，就应该将上面的代码改成这样：varnum = Math.floor(Math.random() * 9 + 2);
从2 数到10 要数9 个数，因此可能值的总数就是9，而第一个可能的值就是2。3）其他方法
十三.检测对象类型
1)instanceof操作符
alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
十四BOM
1）window对象
top 对象始终指向最高（最外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为对于在一个框架中编写的任何代码来说，其中的window对象指向的都是那个框架的特定实例，而非最高层的框架。
self，它始终指向window；实际上，self 和window 对象可以互换使用。2）窗口位置
IE、Safari、Opera 和Chrome 都提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。Opera虽然也支持screenX和screenY属性，但与screenLeft和screenTop属性并不对应，因此建议大家不要在Opera 中使用它们。使用下列代码可以跨浏览器取得窗口左边和上边的位置。
varleftPos = (typeofwindow.screenLeft == "number") ?
window.screenLeft :window.screenX;
vartopPos = (typeofwindow.screenTop == "number") ?
window.screenTop :window.screenY;
3）setInterval()与setTimeout()
setTimeout()：用在超时调用方法时使用；
setInterval()：用在间歇调用方法时使用；
setTimeout (function() { //10s后会执行该方法
alert("Hello world!");
}, 10000);
setInterval (function() { //没个10s执行该方法
alert("Hello world!");
}, 10000);
要取消尚未执行的间歇调用，可以使用clearInterval()方法并传入相应的间歇调用ID；
4）location 对象
window.location和document.location引用的是同一个对象。location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下表列出了location 对
象的所有属性（注：省略了每个属性前面的location 前缀）。
location.replace():修改url（不开新页面跳转），用户不能回到前一个页面；location.reload(true); //重新加载（从服务器重新加载）
位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。为此，最好将reload()放在代码的最后一行。
5）navigator 对象（识别浏览器的事实标准）
https://www.doczj.com/doc/d38652141.html,erAgent：获取完整的浏览器内核信息（浏览器的用户代理字符串）（在高级程序设计228页）
5.1 检测插件
plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
name：插件的名字。
description：插件的描述。
filename：插件的文件名。
length：插件所处理的MIME 类型数量。
//检测插件（在IE 中无效）
functionhasPlugin(name){
name = name.toLowerCase();
for (vari=0; i if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){ return true; } } return false; } //检测Flash alert(hasPlugin("Flash")); //检测QuickTime alert(hasPlugin("QuickTime")); 在Firefox、Safari、Opera 和Chrome 中可以使用这种方法来检测插件。 //检测IE 中的插件 functionhasIEPlugin(name){ try { newActiveXObject(name); return true; } catch (ex){ return false; } } //检测所有浏览器中的QuickTime functionhasQuickTime(){ var result = hasPlugin("QuickTime"); if (!result){ result = hasIEPlugin("QuickTime.QuickTime"); } return result; } 十五. 客户端检测 检测属于哪种浏览器，完整代码（260页） 1）浏览器识别 var engine = { //呈现引擎 ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //具体的版本号 ver: null }; var browser = { //浏览器 ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0, chrome: 0, //具体的版本 ver: null }; varua = https://www.doczj.com/doc/d38652141.html,erAgent; if (window.opera){ engine.ver = browser.ver = window.opera.version(); engine.opera = browser.opera = parseFloat(engine.ver); } else if (/AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); //确定是Chrome 还是Safari if (/Chrome\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.chrome = parseFloat(browser.ver); } else if (/Version\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.safari = parseFloat(browser.ver); } else { //近似地确定版本号 varsafariVersion = 1; if (engine.webkit< 100){ safariVersion = 1; } else if (engine.webkit< 312){ safariVersion = 1.2; } else if (engine.webkit< 412){ safariVersion = 1.3; } else { safariVersion = 2; } browser.safari = browser.ver = safariVersion; } } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver = browser.ver = RegExp["$1"]; engine.khtml = browser.konq = parseFloat(engine.ver); } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver = RegExp["$1"]; engine.gecko = parseFloat(engine.ver); //确定是不是Firefox if (/Firefox\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.firefox = parseFloat(browser.ver); } } else if (/MSIE ([^;]+)/.test(ua) || ("ActiveXObject" in window)){ engine.ver = browser.ver = RegExp["$1"]; engine.ie = browser.ie = isNaN(parseFloat(engine.ver))?11:parseFloat(engine.ver); } if (client.engine.webkit) { //if it’s WebKit if (client.browser.chrome){ //执行针对Chrome 的代码 } else if (client.browser.safari){ //执行针对Safari 的代码 } } else if (client.engine.gecko){ if (client.browser.firefox){ //执行针对Firefox 的代码 } else { //执行针对其他Gecko 浏览器的代码 } } 十六. DOM 1）节点层次 1.1）Node类型 1.hasChildNodes()也是一个非常有用的方法，这个方法在节点包含一或多个子 节点的情况下返回true；应该说，这是比查询childNodesZ列表的length 属性更简单的方法。 2.操作节点： //插入到最后一个子节点前面 returnedNode = someNode.insertBefore(newNode, https://www.doczj.com/doc/d38652141.html,stChild); alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true 前面介绍的appendChild()和insertBefore()方法都只插入节点，不会移除节点。如果只想移除而非替换节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值，如下面的例子所示。//移除第一个子节点 varformerFirstChild = someNode.removeChild(someNode.firstChild); //移除最后一个子节点 varformerLastChild = someNode.removeChild(https://www.doczj.com/doc/d38652141.html,stChild); 3.节点复制 cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode() 方法接受一个布尔值参数，表示是否执行深复制。True为深复制，false为浅复制；
vardeepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他浏览器）varshallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0
1.2）Document类型
1Url获取
//取得完整的URL
varurl = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的URL
var referrer = document.referrer;
同一个页面，name跟id最好不要出现相同的情况
严格型XHTML 文档不支持文档写入。对于那些按照application/xml+xhtml 内容类型提供的页面，这两个方法也同样无效。（write()或writeln()方法）
1.3）动态添加脚本
1.动态js
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);
3.动态样式表
functionloadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
如果专门针对IE 编写代码，务必小心使用styleSheet.cssText属性。在重用同
一个