JS学习笔记讲解学习.docx
《JS学习笔记讲解学习.docx》由会员分享，可在线阅读，更多相关《JS学习笔记讲解学习.docx（20页珍藏版）》请在冰点文库上搜索。
JS学习笔记讲解学习
JavaScript学习
一．Label标签配合break，continue实现循环退出
例子：
varnum=0;
outermost:
for（vari=0;i<10;i++）{
for（varj=0;j<10;j++）{
if（i==5&&j==5）{
continueoutermost;
}
num++;
}
}
alert（num）;//95
内部循环中
的break语句带了一个参数：
要返回到的标签。
添加这个标签的结果将导致break语句不仅会退出内
部的for语句（即使用变量j的循环），而且也会退出外部的for语句（即使用变量i的循环）
二．判断对象的引用类型
alert（personinstanceofObject）;//变量person是Object吗？
三．数组toString（）可实现逗号（,）拼接字符串
varpeople=[1,"dsd"];
console.log（people）;//[1,"dsd"]
console.log（people.toString（））;//1,dsd
Join（）方法也可实现，同时支持其他字符；
varcolors=["red","green","blue"];
alert（colors.join（","））;//red,green,blue
alert（colors.join（"||"））;//red||green||blue
四．队列方法
结合使用shift（）和push（）方法，可以像使
用队列一样使用数组。
varcolors=newArray（）;//创建一个数组
varcount=colors.push（"red","green"）;//推入两项
alert（count）;//2
count=colors.push（"black"）;//推入另一项
alert（count）;//3
varitem=colors.shift（）;//取得第一项
alert（item）;//"red"
alert（colors.length）;//2
五．splice（）方法（数组任意位置删除、插入、替换）
varcolors=["red","green","blue"];
varremoved=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+、Firefox3+、Safari3+、Opera10.5和Chrome。
在不支
持它的浏览器中，使用+操作符把Data对象转换成字符串，也可以达到同样的目的。
//取得开始时间
varstart=+newDate（）;
//调用函数
doSomething（）;
//取得停止时间
varstop=+newDate（）,
result=stop-start;
toDateString（）——以特定于实现的格式显示星期几、月、日和年；
"TueJul122016"
❑toTimeString（）——以特定于实现的格式显示时、分、秒和时区；
"14:
55:
10GMT+0800"
❑toLocaleDateString（）——以特定于地区的格式显示星期几、月、日和年；
"2016/7/12"
❑toLocaleTimeString（）——以特定于实现的格式显示时、分、秒；
"下午2:
52:
57"
❑toUTCString（）——以特定于实现的格式完整的UTC日期。
"Tue,12Jul201606:
52:
43GMT"
与toLocaleString（）和toString（）方法一样，以上这些字符串格式方法的输出也是因浏览器
而异的，因此没有哪一个方法能够用来在用户界面中显示一致的日期信息。
UTC日期指的是在没有时区偏差的情况下（将日期转换为GMT时间）
的日期值。
直接获取和设定日期特定部分的方法介绍见120页
八．函数内部属性
有两个特殊的对象：
arguments和this。
虽然arguments的主要用途是保存函数参数，
但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。
为
了消除这种紧密耦合的现象，可以像下面这样使用arguments.callee。
functionfactorial（num）{
if（num<=1）{
return1;
}else{
returnnum*arguments.callee（num-1）}}
九．每个函数都包含两个非继承而来的方法：
apply（）和call（）
apply（）方法接收两个参数：
一个
是在其中运行函数的作用域，另一个是参数数组。
其中，第二个参数可以是Array的实例，也可以是
arguments对象。
例如：
functionsum（num1,num2）{
returnnum1+num2;
}
functioncallSum1（num1,num2）{
returnsum.apply（this,arguments）;//传入arguments对象
}
functioncallSum2（num1,num2）{
returnsum.apply（this,[num1,num2]）;//传入数组
}
alert（callSum1（10,10））;//20
alert（callSum2（10,10））;//20
call（）方法与apply（）方法的作用相同，它们的区别仅在于接收参数的方式不同。
对于call（）
方法而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。
换句话说，在使用
call（）方法时，传递给函数的参数必须逐个列举出来，如下面的例子所示。
functionsum（num1,num2）{
returnnum1+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";
varresult=stringValue.concat（"world","!
"）;
alert（result）;//"helloworld!
"
alert（stringValue）;//"hello"
1.有两个可以从字符串中查找子字符串的方法：
indexOf（）和lastIndexOf（）
indexOf（）方法从字符串的开头向后搜索子字符串，而lastIndexOf（）方法是从字符串的末尾向前搜索子字符串。
还是来看一个例子吧。
varstringValue="helloworld";
alert（stringValue.indexOf（"o"））;//4
alert（stringValue.lastIndexOf（"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（person1instanceofObject）;//true
alert（person1instanceofPerson）;//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（"Helloworld!
"）;
},10000）;
setInterval（function（）{//没个10s执行该方法
alert（"Helloworld!
"）;
},10000）;
要取消尚未执行的间歇调用，可以使用clearInterval（）方法并传入相应的间歇调用ID；
4）location对象
window.location和document.location引用的是同一个对象。
location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。
下表列出了location对象的所有属性（注：
省略了每个属性前面的location前缀）。
location.replace（）:
修改url（不开新页面跳转），用户不能回到前一个页面；
location.reload（true）;//重新加载（从服务器重新加载）
位于reload（）调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。
为此，最好将reload（）放在代码的最后一行。
5）navigator对象（识别浏览器的事实标准）
navigator.userAgent：
获取完整的浏览器内核信息（浏览器的用户代理字符串）（在高级程序设计228页）
5.1检测插件
plugins数组来达到这个目的。
该数组中的每一项都包含下列属性。
❑name：
插件的名字。
❑description：
插件的描述。
❑filename：
插件的文件名。
❑length：
插件所处理的MIME类型数量。
//检测插件（在IE中无效）
functionhasPlugin（name）{
name=name.toLowerCase（）;
for（vari=0;iif（navigator.plugins[i].name.toLowerCase（）.indexOf（name）>-1）{
returntrue;
}
}
returnfalse;
}
//检测Flash
alert（hasPlugin（"Flash"））;
//检测QuickTime
alert（hasPlugin（"QuickTime"））;
在Firefox、Safari、Opera和Chrome中可以使用这种方法来检测插件。
//检测IE中的插件
functionhasIEPlugin（name）{
try{
newActiveXObject（name）;
returntrue;
}catch（ex）{
returnfalse;
}
}
//检测所有浏览器中的QuickTime
functionhasQuickTime（）{
varresult=hasPlugin（"QuickTime"）;
if（!
result）{
result=hasIEPlugin（"QuickTime.QuickTime"）;
}
returnresult;
}
十五.客户端检测
检测属于哪种浏览器，完整代码（260页）
1）浏览器识别
varengine={
//呈现引擎
ie:
0,
gecko:
0,
webkit:
0,
khtml:
0,
opera:
0,
//具体的版本号
ver:
null
};
varbrowser={
//浏览器
ie:
0,
firefox:
0,
safari:
0,
konq:
0,
opera:
0,
chrome:
0,
//具体的版本
ver:
null
};
varua=navigator.userAgent;
if（window.opera）{
engine.ver=browser.ver=window.opera.version（）;
engine.opera=browser.opera=parseFloat（engine.ver）;
}elseif（/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）;
}elseif（/Version\/（\S+）/.test（ua））{
browser.ver=RegExp["$1"];
browser.safari=parseFloat（browser.ver）;
}else{
//近似地确定版本号
varsafariVersion=1;
if（engine.webkit<100）{
safariVersion=1;
}elseif（engine.webkit<312）{
safariVersion=1.2;
}elseif（engine.webkit<412）{
safariVersion=1.3;
}else{
safariVersion=2;
}
browser.safari=browser.ver=safariVersion;
}
}elseif（/KHTML\/（\S+）/.test（ua）||/Konqueror\/（[^;]+）/.test（ua））{
engine.ver=browser.ver=RegExp["$1"];
engine.khtml=browser.konq=parseFloat（engine.ver）;
}elseif（/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）;
}
}elseif（/MSIE（[^;]+）/.test（ua）||（"ActiveXObject"inwindow））{
engine.ver=browser.ver=RegExp["$1"];
engine.ie=browser.ie=isNaN（parseFloat（engine.ver））?
11:
parseFloat（engine.ver）;
}
if（client.engine.webkit）{//ifit’sWebKit
if（client.browser.chrome）{
//执行针对Chrome的代码
}elseif（client.browser.safari）{
//执行针对Safari的代码
}
}elseif（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,someNode.lastChild）;
alert（newNode==someNode.childNodes[someNode.childNodes.length-2]）;//true
前面介绍的appendChild（）和insertBefore（）方法都只插入节点，不会移除节点。
如果只想移除而非替换节点，可以使用removeChild（）方法。
这个方法接受一个参数，即要移除的节点。
被移除的节点将成为方法的返回值，如下面的例子所示。
//移除第一个子节点
varformerFirstChild=someNode.removeChild（someNode.firstChild）;
//移除最后一个子节点
varformerLastChild=someNode.removeChild（someNode.lastChild）;
3.节点复制
cloneNode（），用于创建调用这个方法的节点的一个完全相同的副本。
cloneNode（）方法接受一个布尔值参数，表示是否执行深复制。
True为深
升级会员 