js主要知识轮廓笔记

一、js中的基础类型和引用类型：

基础类型：
1、Number
2、String
3、Boolean
4、Undefined
5、Null

引用类型（内置对象）：
1、Object类型
2、Array类型
3、Date类型
4、Regexp类型（字面量表示法：/[bc]at/i 构造函数方法：new RegExp("[bc]at","i") 标志有：g/i/m 实例方法：exec("要验证的字符串") 匹配上就返回一个数组，匹配不上就返回个null ）
5、Function类型（内部属性：this、arguments;函数属性:length、prototype；函数方法：call()、apply()）
6、基本包装类型(Boolean类型、Number类型、String类型)
7、单体内置对象（Global、Math）

（备注：创建引用类型实例往往有构造函数方法和字面量表示法两种）

二、BOM
目录：
1、window对象
2、location对象
3、navigator对象
4、screen对象
5、history对象

1、window对象
双重角色：js访问浏览器的窗口的一个接口和Global对象，全局作用域中声明的变量和函数都会变成window对象的属性和方法。页面中涉及框架的<frameset>/<frame>的，每个框架都对应一个window(详见js高级编程)
浏览器窗口的位置： window.screenLeft/window.screenTop 或 window.screenX/window.screenY

超时调用：

var timeoutID=setTimeout(function(){alert("123");}, 1000);

//取消超时调用
clearTimeout(timeoutID);

 

间歇调用：

var intervalID=setInterval(function(){alert("44");}, 2000);

//停止
clearInterval(intervalID);

 

系统对话框：浏览器通过这些方法可以调用系统对话框，与网页无关，不包含html，且是同步的，显示对话框的时候代码会停止执行，关闭时又会开始执行。

alert("1243"); 弹出消息 用户只能选择关闭。

var r=confirm("确定干什么吗?"); //返回bool值，  确定返回true   取消返回false

var t=var b=prompt("你是谁？", "龍四");  //确定返回值     取消返回 null

 

2.location对象(window.location):（概述）是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能（将url解析为独立的片段，可以通过不同的属性访问这些片段），并且该对象就是window的属性也是document对象的属性（即二者引用的都是同一个对象）。

 

{

ancestorOrigins: DOMStringList
assign: function () { [native code] }
hash: ""
host: "10.1.56.197:2014"    //返回服务器名称和端口号（如果有的话）
hostname: "10.1.56.197"　 //返回不带端口号的服务器名称
href: "http://10.1.56.197:2014/Test/21.html"　　//返回当前加载页面的完整url，（location对象的tostring方法也返回此值）
origin: "http://10.1.56.197:2014"
pathname: "/Test/21.html"　　//返回url中的目录和文件名
port: "2014"　　//端口号
protocol: "http:"　　//协议
reload: function reload() { [native code] }
replace: function () { [native code] }
search: ""　　//返回查询字符串 以?开头 ，如 ?name=lxf&age=25
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
__proto__: Location

}

 

从location.search中获取查询字符串对象：

function getQueryStringArgs () {
// 获取查询字符串参数，去除该字符串问号开关符号
var qs=location.search.length>0?location.search.substring(1):"",
args={},//存放所有查询字符串参数对
items=qs.split("&"),
len=items.length,
name=null,
value=null;
if(qs.length==0) {
alert("没有查询字符串,提前退行！");
return;
};
for(var i=0;i<len;i++){
item=items[i].split("=");
name=decodeURIComponent(item[0]);
value=decodeURIComponent(item[1]);
args[name]=value;
}
return args;
}

 

location这些属性可读可写的，并且每次修改locaton的属性（除了hash外），页面都会以新url重新加载。

改变url的几种方法

location.assign("http://www.baidu.com")  //下面两个方法也是调用此方法的
location="http://www.baidu.com";
location.href="http://www.baidu.com";

//下面这种不会在浏览器中产生历史记录，所以后退按钮无用

location.replace("http://www.baidu.com");

 

最后一个与位置有关的操作：

重写加载，即刷新：

location.reload() //有可能从浏览器缓存中加载
location.reload(true) //从服务器中重新加载

 

其它几个不常用的DOM对象navigator 、 screen 、history在这里就不一一介绍了  ，用到时 可以参考下JS高级编程。

 

 

 

 

 

 

三、DOM

处理可扩展标志语言（xml、html）的标准编程接口。（以一种独立于平台和语言的方式访问和修改一个文档的内容和结构）

（

什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

）

 

HTML DOM 是：

• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

 

根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点（document）

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

 

Node层次

节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档（document）节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

 

Html Dom常用方法：

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

 

Html Dom常用属性：

innerHtml属性  返回元素的内容（包括html元素和文本）

innerText属性  返回元素包含的文本（不包括html，包括后代元素的文本和自身的文本）

上面两个属性只有元素节点有，文本节点这两个属性没有，即为 undefined

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

nodeType 属性返回节点的类型。nodeType 是只读的。元素1  属性2  文本3 注释8  文档9

想知道Dom元素的全部属性和方法，可参考，http://www.w3cschool.cc/jsref/dom-obj-all.html

 

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

Html Dom事件大全：http://www.w3cschool.cc/jsref/dom-obj-event.html

 

 

 

Dom对象也是支持链式编程的。

Dom导航：通过一个已知的Dom元素以及和目标元素的关系找到目标元素：

通常需要使用的3个属性：parentNode（父节点）、firstChild（第一个子节点，备注：也可能是文本节点） 以及 lastChild（最后一个子节点）

previousElementSibling(同一级的上一个元素，没有返回null)

nextElementSibling(同一级的下一个元素，没有返回null)

 

修改 HTML DOM 意味着许多不同的方面：

• 改变 HTML 内容
• 改变 CSS 样式
• 改变 HTML 属性
• 创建新的 HTML 元素
• 删除已有的 HTML 元素
• 改变事件（处理程序）

 

四、js中的this
全局环境中：this；//指window对象；
函数调用:foo(); //this指的也是window对象；
作为对象方法调用时：test.foo(); //this指向对象本身 test
当使用 Function.prototype 上的 call 或者 apply 方法时，函数内的 this 将会被 显式设置为函数调用的第一个参数。
在构造函数中，this指向新创建的对象本身。