第一章 未入江湖，先定三分
2016-10-31 本文已影响16人
不系流年系乾坤
1. JavaScript是基于对象的、事件驱动的脚本程序设计语言。所谓对象是指任何事物都可以封装成类，而一个类中具体的某个事物就是这个类的对象；所谓事件是指为这些事件定义一些动作，当处理这些事件后就执行相关代码，进行一些操作。
2. 截取字符串www.qdjhu.com中的qdjhu
var siteurl = 'www.qdjhu.com';
var result = siteurl.substr(4,5);
stringObject.substr(start,length);
sub 英[sʌb]美[sʌb]
n. 潜水艇; 代用品，代替者，替补队员; 地铁; 审校员;
vi. 做替身，做替补队员; 做替身，审校（文稿）;
3. 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线、总长度为5~20;
[a-z]是匹配小写的26个字母，[A-Z]是匹配大写的26个字母，{n}表示匹配几位，\w表示任意的字母、数字、下划线
var c = /^[a-zA-Z]{1}\w{4,19}/
4. indexOf(string)返回字符串中string在父串首次出现的位置，从0开始！没有返回-1。
var stringValue = "hello world";
console.log(stringValue.slice(3,7)); //"lo w"
console.log(stringValue.substring(3,7)); //"lo w"
console.log(stringValue.substr(3,7)); // "lo worl"
console.log(stringValue.indexOf("o")); // 4
console.log(stringValue.lastIndexOf("o")); // 7
5. 如何获取浏览器URL中查询字符串的参数？
Location对象包含了当前页面与位置(url)相关的信息
URL示例：http://www.baidu.com:80/news/index.aspx?id=1&name=location#top
Location对象共定义了8个属性：
href:声明了当前显示文档的完整的URL
protocol:声明URL的协议部分，包括后缀的冒号，例如http:
host:声明当前URL的主机名和端口号(是hostname和port的合集)，例如www.baidu.com:80
hostname:声明当前URL的主机名，例如www.baidu.com
port:声明当前URL的端口部分，例如80
pathname:声明当前URL的路径部分，例如news/index.aspx
search:声明当前URL的查询部分，例如?id=1&name=localhost
hash:声明当前URL的锚的部分，例如#top，指定在文档中的锚记的名称
Location对象的这些属性都是可读可写的，如果改变了文档的location.href，则浏览器会载入新的页面。同样如果改变了location.hash，则页面会跳转到新的锚点，但此时页面不会重载。
想必大家会想，这个与link对象的url属性类似啊，不过link对象表示的是文档中的超链接，而Location对象表示的是浏览器当前显示文档的url。
当然，Location对象还有两个方法：reload()和replace()
reload():可以重新装载当前文档
replace():可以装载一个新文档而无须为它创建一个新的历史记录。也就是说，在浏览器的历史列表中，新文档将替换当前文档。这样就不能通过【返回】按钮返回当前文档了。
通过将url字符串信息赋值给窗口的location属性来装载新文档，可以实现返回浏览。
对那些使用了框架而且显示多个临时也的网站来说，replace()方法比较有用，这样临时页面都不被存储在历史列表中。
注意：
不要混淆Window对象的location属性和Document对象的location对象。前者引用一个Location对象，后者只是一个只读字符串，并不具有Location对象的任何特性。Document.location与document.URL是同义的。但是，当存在服务器重定向时，document.location包含的是已经装载的URL,而location.href包含的则是原始请求的文档的URL。
什么是查询字符串？就是Location对象的search属性的值，在这里指?id=1&name=location
那么用Locaton对象结合String对象的方法怎么获取呢?可以用下面这个函数获取：
function getQuery(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null)
return unescape(r[2]);
return null;
}
6. 实现一个删除字符串左边空白字符串的方法
function leftTrim(str){
return str.replace(/^\s*/g,""); //^符号表示从开头进行匹配 g表示全局模式，即模式将被应用于所有字符串，而并非发现第一个匹配项时立即停止
}
7.
typeof(null); //object
typeof(NaN);//number
8. js实现反转字符串
function revStr(str){
var tmpStr = "";
for(var l = str.length-1;l>=0;l--){
tmpStr+=str.charAt(l);
}
return tmpStr;
}
9.
var a = (Math.PI++);
console.log(a); //3.141592653589793
10.
var str = 'abcd-ef-ghi';
var arr1 = str.split('-');
var result = arr1.reverse().join('&');
console.log(result); //ghi&ef&abcd
11. undeclared是一种语法错误，访问undeclared的变量并非会中断浏览器执行。在浏览器运行上下文中，undeclared出来的变量简单可以认为没有var a这样定义变量。JS引擎执行的时候，由于无法找到其对应的上下文(scope)，所有会简单地认为该变量是全局变量，就会把该变量定义到window中去。
12. 5种基本数据类型：Undefined Null Boolean Number String。复合数据类型：function函数类型[*]object对象类型，object本质是由一组无序的名值对组成的。array数组类型（它是一种特殊的object对象类型）检查一个变量的数据类型。
13. 实现alert中的换行
alert("hello\nworld");
14. alert()、confirm()和prompt()的区别与用法
1.警告消息框alert
alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。
window.alert("欢迎！请按“确定”继续。");
2.确认消息框confirm
使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
window.alert("欢迎访问我们的 Web 页！");
} else window.alert("再见啦！");
3.提示消息框prompt
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 "<undefined>"。
与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框
var theResponse = window.prompt("欢迎？","请在此输入您的姓名。");
15. 鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）
<script type="text/javascript">
function elementName(evt){
evt = evt|| window.event;
var selected = evt.target || evt.srcElement;
alert(selected.tagName);
}
window.onload = function(){
var el = document.getElementsByTagName('body');
el[0].onclick = elementName;
}
</script>
gg IE：有window.event对象
FF：没有window.event对象，可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
ie用e.srcElement，ff用e.target chrome浏览器同时具有这两个属性
16.
var a = 1;
function f(){
alert(a);
var a = 2;
}
f(); //undefined
17. js中outerHTML与innerHTML的区别
使用innerHTML的时候将找着元素的内容（不包含元素本身）
使用outerHTML的时候将找着元素的内容（包含元素本身）
18. window.opener是Javascript中window的一个属性，它返回的是打开当前窗口的窗口对象。如果窗口A弹出一个窗口B，那么在B中window.opener就是窗口对象A；window.location.reload()方法是用来刷新当前整个页面的。
19. js 页面刷新location.reload和location.replace的区别小结
reload 方法，该方法强迫浏览器刷新当前页面。
语法： location.reload([bForceGet])
参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")
replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
语法： location.replace(URL)
在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面，所以页面的method="post"的时候，会出现“网页过期”的提示。那是因为Session的安全保护机制。可以想到： 当调用 location.reload() 方法的时候， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。如果有这种应用： 我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建， 我们期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写： location.replace(location.href)
replace函数在设置URL方面与location的href属性或assign函数完全一样，但是它会删除history对象的地址列表中的URL，从而使go或back等函数无法导航。
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: http://www.jb51.net:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
URL 的协议部分
本例返回值:http:
3,window.location.host
URL 的主机部分
本例返回值:www.jb51.net
4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:""
5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html
6,window.location.search
查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6
7,window.location.hash
锚点
本例返回值:#imhere
20.
document.myForm.xxx按照层级结构来获取
创建var odiv = document.createElement('div');
删除document.body.remove(oP)
添加节点appendChild
复制节点cloneNode
appendTo用来追加到指定元素的末尾
createTextNode()用指定的文本创建新的文本节点对象
createAttibute()用指定名字创建新的Attr节点对象
nodeType用来判断节点类型
cloneNode
var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node);
克隆之前：
Coffee
Tea
Water
Milk
克隆之后：
Coffee
Tea
Milk
Water
Milk
可选。默认是 false。
设置为 true，如果您需要克隆节点及其属性，以及后代
设置为 false，如果您只需要克隆节点及其后代
21. JS nodeName、nodeValue、nodeType返回类型
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 --> 节点类型
元素element --> 1
属性attr --> 2
文本text --> 3
注释comments --> 8
文档document --> 9
nodeValue就是用来得到“文本元素的值”的，即只适用于“文本节点”；
例子：
<html>
<head>
<script type="text/javascript">
function getNodeValue()
{
var nv=document.getElementByIdx_x("td1").firstChild.nodeValue;
var nn=document.getElementByIdx_x("tr1").firstChild.nodeName;
var nv1=document.getElementByIdx_x("tr1").firstChild.nodeValue;
alert("nv="+nv);
alert("nn="+nn);
alert("nv1="+nv1);
}
</script>
</head>
<body>
<table>
<tr id="tr1">
<td id="td1" >John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
<input type="button" value="button1" onclick="getNodeValue()"/>
</body>
</html>
以上得到的结果：
nv=John;
nn=td;
nv1=null;
要分清元素的value属性和nodeValue 不一样，nodeValue适用于“文本节点”和“属性节点”；对应“文档节点”和“标签节点”不起作用
接口 nodeType常量 nodeType值 备注
Element Node.ELEMENT_NODE 1 元素节点
Text Node.TEXT_NODE 3 文本节点
Document Node.DOCUMENT_NODE 9 document
Comment Node.COMMENT_NODE 8 注释的文本
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断
Attr Node.ATTRIBUTE_NODE 2 节点属性
22. 实现输出document对象中的所有成员的名称和类型
<script language="javascript">
for(key in document){
document.write(key +'==='+ document[key]+'<br />');
}
</script>
找到所有className包含text的标签<li>,并将它们的背景颜色设置为黄色
var list = document.getElementByTagname('li');
for(i=0;i<list.length;i++){
if(list[i].getAttribute('class')=='test'){
//把背景设置成黄色
}
}
保留字在某种意义上是将来的关键词而保留的单词，不能被用再来作为变量名和函数名，不属于js的保留字with parent void arguments 属于的class
ECMA-262 描述了一组具有特定用途的关键字。这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。以下就是ECMAScript的全部关键字（带*号上标的是第5 版新增的关键字）：
break do instanceof typeof
case else new var
catch finally return void
continue for switch while
debugger* function this with
default if throw delete
in try
ECMA-262 还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途。但它们有可能在将来被用作关键字。以下是ECMA-262 第3 版定义的全部保留字：
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public
第5 版把在非严格模式下运行时的保留字缩减为下列这些：
class enum extends super
const export import
在严格模式下，第5 版还对以下保留字施加了限制：
implements package public interface
private static let protected
yield
注意， let 和yield 是第5 版新增的保留字；其他保留字都是第3 版定义的。为了最大程度地保证兼容性，建议大家将第3 版定义的保留字外加let 和yield 作为编程时的参考。
在实现ECMAScript 3 的JavaScript 引擎中使用关键字作标识符，会导致"Identifier Expected" 错误。而使用保留字作标识符可能会也可能不会导致相同的错误，具体取决于特定的引擎。
第5 版对使用关键字和保留字的规则进行了少许修改。关键字和保留字虽然仍然不能作为标识符使用，但现在可以用作对象的属性名。一般来说，最好都不要使用关键字和保留字作为标识符和属性名，以便与将来的ECMAScript 版本兼容。
除了上面列出的保留字和关键字，ECMA-262 第5 版对eval 和arguments 还施加了限制。在严格模式下，这两个名字也不能作为标识符或属性名，否则会抛出错误。
23.
js的几种循环语句
for
for-in
while
do-while
