JavaScript入门学习笔记--(2)

BOM是browser object model的缩写，简称浏览器对象模型

Document对象常见属性和方法:

每个载入浏览器的 HTML 文档都会成为 Document 对象

//在文档被加载完毕之后,就触发window.onload=function(){  TODO};

消息框/输入框/确认框

alert(‘信息’)：消息框
//alert(“你好1”);

prompt(‘提示信息’,默认值)： 标准输入框

//var inputText = prompt("请输入你的名字","孙悟空");

confirm( ) ： 确认框

//var ret = confirm("亲,你确定删除吗?");

打开新窗口/关闭窗口

window.open()方法：打开一个新窗口

调用示例：window.open("http://www.520it.com/", "_blank","")第一个参数：要打开的网页url，可以是相对路径;第二个参数：打开窗口的目标；除了自定义名称以外，还包括_self, _parent, _top及_blank几个特殊值;第三个参数：是一个使用,组成的字符串，用于描述打开窗口的特性，比如大小、是否有工具栏等。function openWin() {    open("newWin.html");}close( )：关闭窗口function closeWin() {    close();}//在非IE浏览器中,close方法,不能关闭非js代码打开的窗口.在W3C规范的浏览器中(非IE):close方法只能关闭open方法打开的窗口.

浏览器相关信息

navigator对象用于获得浏览器相关信息;使用console.dir(navigator)查看成员信息。

属性名称           说明appCodeName        产品名称appName            应用名称appVersion         版本号cookieEnabled      是否允许使用cookielanguage           语言oscpu              操作系统名称platform          操作系统平台product            产品代号或名称，比如GeckoproductSub         产品发布日期20100701userAgent         客户端详细信息,比如：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.1

判断操作系统:

var isWin = (navigator.platform == “Win32”) || (navigator.platform == “Windows”);var isMac = (navigator.platform == “Mac68K”) || (navigator.platform == “MacPPC”)|| (navigator.platform == “Macintosh”);var isUnix = (navigator.platform == “X11”) && !isWin && !isMac;

访问历史

History对象: window.historyhistory.go(index)函数，在浏览器历史记录中跳转，正数为前跳，负数为后跳history.back()函数，后跳;history.forward()函数，前跳;history.length属性，获得历史记录的长度；

访问页面的url

window对象的location属性,保护了该窗口所装载文档的地址:location包含的常用属性:

1.hostname:文档所在地址的主机名2.href:文档所在地址的URL地址3.host:wend所在地址的主机地址4.port:文档所在地址的服务端端口5.pathname:文档所在地址的文件地址6.protocol:装载该文档使用的协议

Location对象方法 reload()重新加载当前文档

定时器:

 1):多少时间之后,执行什么操作. 2):间隔多少时间,周期性执行什么操作.setTimeout(fn,time)函数，返回timer，用于指定一段时间后执行某函数setInterval(fn,time)函数，返回timer，用于周期性执行某函数;参数fn可以是字符串组成的jascript代码，也可以是一个函数名称；参数time表示时间，毫秒为单位；clearTimeout(timer)函数，清除由setTimeout创建的定时器；clearInterval(timer)函数，清除由setInterval指定的定时器；

DOM和获取元素的三种方式

DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件

D：文档  –  html 文档 或 xml 文档O：对象 – document 对象的属性和方法M：模型  DOM 是针对xml(html)的基于树的API。 DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟） DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

在DOM在获取元素的三种方式:

getElementById() 返回对拥有指定 id 的第一个对象的引用。

var div = document.getElementById("divId");print(div);print(div.innerHTML);

getElementsByName() 返回带有指定名称的对象集合。

var favs =document.getElementsByName("favs");print(favs);

getElementsByTagName() 返回带有指定标签名的对象集合。

var divs = document.getElementsByTagName("div");print(divs);

DOM操作:

获取当前文档对象中的元素,属性,文本内容.

插入一个子元素,删除元素,修改元素

Node对象的属性和方法

DOM编程中:在XML/HTML中一切都是节点.

         Node对象:                   文档对象:  Document                   元素对象:  Element                   属性对象:  Attribute                   文本对象:  Text

属性操作

1.元素上的原始属性和自定义属性的获取值和设置值

操作元素的原始属性:    获取属性值:        元素对象.属性名;        元素对象["属性名"];    设置属性值:        元素对象.属性名=值;        元素对象["属性名"]=值;操作元素自定义属性:    获取属性值:        元素对象.getAttribute("属性名");    设置属性值:        元素对象.setAttribute("属性名",值);

特殊的属性操作

2.操作属性名和默认属性值相同的属性. 如:checked,selected得到的属性值是true或者false

3.操作class属性.–>属性名为:className

4.操作style的属性.如:background-color使用backgroundColor

5.操作readonly属性:readonly—>readOnly

DOM事件编程

事件驱动编程

所谓事件驱动,简单地说就是你点什么按钮(即产生什么事件),电脑执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时，可以发出一个消息通知，然后对这个消息感兴趣的程序就可以执行。

事件驱动编程中的几个核心对象

事件源：谁发出事件通知(操作了谁)，发出消息；也就是事件主体（通常指元素/标签）；事件名称：发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；事件响应函数：谁对这个这个事件感兴趣，当这个事件发生时要执行什么样的操作；事件对象：一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。

示例

<p style="color: red" id="p1">Hello world!</p>//事件源function shout(e){//响应函数，监听函数 alert(e.clientX);//e事件对象}document.getElementById("p1").onclick=shout;//在事件源上绑定事件响应函数

JavaScript处理事件的基本机制：

对DOM元素绑定事件处理函数；
监听用户的操作；

当用户在相应的DOM元素上进行与绑定事件对应的操作时，事件处理函数做出响应；将处理结果更新到 HTML 文档。

事件监听，也就是指对指定对象的指定事件指定响应处理处理函数；

事件源(元素标签),什么类型的事件,响应函数.

给元素添加事件的三种方式:

第一种:在标签上使用onclick属性配置

第二种:在js代码中,使用 “元素.onclick=响应函数”进行事件监听

第三种:使用方法来完成对元素的监听

IE

[Object].attachEvent(“name_of_event_handler”, fnHandler);  name_of_event_handler>>事件操作前,必须加"on"!!!  多次添加监听后,触发顺序: 先添加,后执行[Object].detachEvent(“name_of_event_handler”, fnHandler);    fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)    匿名函数,每次创建的都不同   

W3C

[Object].addEventListener(“name_of_event”, fnHandler);     name_of_event>>直接使用事件(操作)名称     多次添加监听后,触发顺序: 先添加,先执行               从IE9开始,也支持addEventListener.[Object].removeEventListener(“name_of_event”, fnHandler);    fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)    匿名函数,每次创建的都不同

事件对象:

事件对象中包括了事件源及事件的具体描述信息，一般包括事件源，鼠标事件或键盘事件的相关信息；在监听函数中有时候需要通过事件对象来获取更详细的事件信息，然后再进行处理

oDiv.onclick = function (oEvent) {//参数oEvent即为事件对象}