javascript学习手册免费(JavaScript精通到深入)

前几天教大家从入门到精通,当然仅靠那一篇文章是不足以带领大家精通JavaScript的,今天给大家带来第二讲!

BOM和DOM简介

BOM,Browser Object Model ,浏览器对象模型。

BOM主要提供了访问和操作浏览器各组件的方式。

浏览器组件:

window(浏览器窗口)

location(地址栏)

history(浏览历史)

screen(显示器屏幕)

navigator(浏览器软件)

document(网页)

DOM,Document Object Model,文档对象模型。

DOM主要提供了访问和操作HTML标记的方式。

HTML标记:

图片标记

表格标记

表单标记

body、html标记

……

BOM和DOM不是JS的内容。它们是W3C制定的规范。但是,BOM和DOM在浏览器中以对象的形式得以实现。

各对象之间是有层级关系的,那么各对象之间如何访问呢?

window.document.write(“OK”)

window.document.body.bgColor = “#FF0000”;

window对象是所有其它对象的最顶层对象,因此,可以省略。

document.write(“OK”);

document.body.bgColor = “#FF0000”;

window.alert(“OK”); ——> alert(“OK”);

window.prompt(“请输入一个分数”); ——> prompt(“请输入一个分数”);

Window对象属性

javascript学习手册免费(JavaScript精通到深入)(1)

name:指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来用的。

设置窗口的名字:window.name = “newWin”

获取窗口的名字:document.write(name);

top:代表最顶层窗口。如:window.top

parent:代表父级窗口,主要用于框架。

self:代表当前窗口,主要用于框架中。

innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。

在IE下,使用 document.documentElement.clientWidth 来代替 window.innerWidth

innerHeight:指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。

在IE下,使用 document.documentElement.clientHeight 来代替 window.innerHeight

document.documentElement就是<html>标记对象

document.body 就是 <body>标记对象

javascript学习手册免费(JavaScript精通到深入)(2)

window对象方法

alert():弹出一个警告对话框。

prompt():弹出一个输入对话框。

confirm():弹出一个确认对话框。如果单击“确定按钮”返回true,如果单击“取消”返回false。

close():关闭窗口

print():打印窗口

javascript学习手册免费(JavaScript精通到深入)(3)

open()方法

功能:打开一个新的浏览器窗口。

语法:var winObj = window.open([url][,name][,options]);

说明:参数可有可无。如果没有指定参数,则打开一个选项卡式的窗口(大小是最大大化)。

参数:

url:准备在新窗口中显示哪个文件。url可以为空字符串,表示显示一个空的页面。

name:新窗口的名字,该名字给<a>标记的target属性来用。

options:窗口的规格。

width:新窗口的宽度

height:新窗口的高度

left:新窗口距离屏幕左边的距离

top:新窗口距离屏幕上边的距离

menubar:是否显示菜单栏,取值:yes、no

toolbar:是否显示工具栏。

location:是否显示地址栏。

status:是否显示状态栏。

scrollbars:是否显示滚动条,不能省略s字母。

返回值:返回一个window对象的变量,可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

onload事件:当网页加载完成,指<body>标记的所有内容全部加载完成,才触发该事件(条件)。通过onload事件属性,去调用JS的函数。onload属性只有<body>标记才有。

onclick事件:当单击时,去调用JS代码。所有HTML标记都具有该事件属性。

javascript学习手册免费(JavaScript精通到深入)(4)

javascript学习手册免费(JavaScript精通到深入)(5)

javascript学习手册免费(JavaScript精通到深入)(6)

延时器方法——setTimeout()

setTimeout()

功能:设置一个延时器,换句话说:时间一到,就执行JS代码一次

语法:var timer = window.setTimeout(code,millisec)

参数:

code:是任何合法的JS代码,一般情况下是JS函数。该函数要放在引号中。

举例:window.setTimeout(“close()” , 2000)

举例:window.setTimeout(init, 2000); //传函数地址,因此不需要加括号。如果加括号,是将函数的执行结果传到方法中。

millisec:毫秒值。1秒=1000毫秒

返回值:返回一个延时器的id变量,这个id变量给clearTimeout()用来清除。

clearTimeout()

功能:清除延时器id变量

语法:window.clearTimeout(timer)

参数:timer就是由setTimeout()设置的延时器的id变量。

实例:计数器

javascript学习手册免费(JavaScript精通到深入)(7)

定时器方法

setInterval()

功能:设置一个定时器。定时器,重复不断的执行JS代码(周期性)。

语法: var timer = window.setInterval(code , millisec)

参数:

code:是任何合法的JS代码,一般情况下是JS函数。该函数要放在引号中。

举例:window.setInterval(“init()” , 2000)

举例:window.setInterval(init, 2000); //传函数地址,因此不需要加括号。如果加括号,是将函数的执行结果传到方法中。

millisec:毫秒值。1秒=1000毫秒

返回值:返回一个定时器的id变量,这个id变量给clearInterval()用来清除。

clearInterval()

功能:清除定时器id变量

语法:window.clearInterval(timer)

参数:timer就是由setInterval()设置的定时器的id变量。

实例:图片自动切换

javascript学习手册免费(JavaScript精通到深入)(8)

javascript学习手册免费(JavaScript精通到深入)(9)

screen屏幕对象

Width:屏幕的宽度,只读属性。

Height:屏幕的高度,只读属性。

availWidth:屏幕的有效宽度,不含任务栏。只读属性。

availHeight:屏幕的有效高度,不含任务栏。只读属性。

javascript学习手册免费(JavaScript精通到深入)(10)

navigator对象

appName:浏览器软件名称,主要用来判断客户使用的是什么核心的浏览器。

如果是IE浏览器的话,返回值为:Microsoft Internet Explorer

如果是Firefox浏览器的话,返回值为:Netscape

appVersion:浏览器软件的核心版本号。

systemLanguage:系统语言

userLanguage:用户语言

platform:平台

javascript学习手册免费(JavaScript精通到深入)(11)

Location地址栏对象

href:获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;

host:主机名

hostname:主机名

pathname:文件路径及文件名

search:查询字符串。

javascript学习手册免费(JavaScript精通到深入)(12)

protocol:协议,如:http://、ftp://

hash:锚点名称。如:#top

reload([true]):刷新网页。true参数表示强制刷新

注意:所有的属性,重新赋值后,网页将自动刷新。

<meta http-equiv = “refresh” content = “5;url=http://www.sina.com.cn” />

javascript学习手册免费(JavaScript精通到深入)(13)

history对象

length:历史记录的个数

go(n):同时可以实现“前进”和“后退。”

i.history.go(0) 刷新网页

ii.history.go(-1) 后退

iii.history.go(1) 前进一步

iv.history.go(3) 前进三步

forward():相当于浏览器的“前进”按钮

back():相当于浏览器的“后退”按钮

javascript学习手册免费(JavaScript精通到深入)(14)

下面我们来讲DOM

DOM的官方定义

DOM , Document Object Model ,文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。

DOM是W3C制定的网页标准或规则,而这个标准,在浏览器中,以“对象”的形式得以实现。

DOM的官方定义:DOM可以使脚本动态的访问或操作,网页的内容、网页外观、网页结构。

DOM的分类

核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法

HTML DOM:针对HTML文档提供的专用的属性方法。

XML DOM:针对XML文档提供的专用的属性和方法。(就业班讲)

CSS DOM:提供了操作CSS的属性和方法。

Event DOM:事件对象模型。如:onclick、 onload等。

HTML节点树

javascript学习手册免费(JavaScript精通到深入)(15)

节点关系

根节点,一个HTML文档只有一个根,它就是HTML节点。

子节点:某一个节点的下级节点。

父节点:某一个节点的上级节点。

兄弟节点:两个子节点同属于一个父节点。

DOM中节点类型

document文档节点,代表整个网页,不代表任何HTML标记。但它是html节点的父节点。

element元素节点,指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。

attribute属性节点。指HTML标记的属性。

text节点。是节点树的最底节点。

核心DOM中的公共的属性和方法

提示:核心DOM中查找节点(标记),都是从根节点开始的(html节点)。

1、节点访问

nodeName:节点名称。

nodeValue:节点的值。只有文本节点才有值,元素节点没有值。nodeValue的值只能是“纯文本”,不能含有任何的HTML标记或CSS属性。

firstChild:第1个子节点。

lastChild:最后1个子节点。

childNodes:子节点列表,是一个数组。

parentNode:父节点。

javascript学习手册免费(JavaScript精通到深入)(16)

查找<html>标记的方法

document.firstChild

document.documentElement

查找<body>标记的方法

document.firstChild.lastChild

document.body

为什么,document.body.firstChild找不到<table>节点?

核心DOM的属性和方法,主要是针对HTML4.0开发的。

在Firefox下,会把空格或换行,当成文本节点。

HTML4.0是有没有DTD类型定义的。

2、对节点的属性操作

setAttribute(name,value):给某个节点添加一个属性。

getAttribute(name):获取某个节点属性的值。

removeAttribute(name):删除某个节点的属性。

javascript学习手册免费(JavaScript精通到深入)(17)

3、节点的创建

document.createElement(tagName):创建一个指定的HTML标记,一个节点

tagName:是指不带尖括号的HTML标记名称。

举例:var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下。

parentNode代表父节点,父节点必须存在。

childNode代表子节点。

举例:document.body.appendChild(imgObj)

parentNode.removeChild(childNode):删除某个父节点下的子节点。

parentNode代表父节点。

childNode代表要删除的子节点。

举例:document.body.removeChild(imgObj)

javascript学习手册免费(JavaScript精通到深入)(18)

综合实例:随机显示小星星

<script type="text/javascript">

//实例:随机显示小星星

/*

(1)网页背景色为黑色

(2)创建图片节点,追加到<body>父节点

(3)图片随机大小

(4)图片随机定位坐标(x,y)

(5)定时器

(6)网页加载完成,开始星星

(7)星星显示的范围,跟窗口的宽高一样。(0,window.innerWidth)

(8)点击星星,星星消失

*/

//网页加载完成

window.onload = function(){

//更改网页背景色

document.body.bgColor = "#000";

//定时器:1秒钟,显示一个星星

window.setInterval("star()",1000);

}

//动画主函数

function star()

{

//创建图片节点

var imgObj = document.createElement("img");

//添加src属性

imgObj.setAttribute("src","images/xingxing.gif");

//添加width属性。getRandom()随机数函数

var width = getRandom(15,85);

imgObj.setAttribute("width",width);

//添加style属性(行内样式)。

var x = getRandom(0,window.innerWidth);

var y = getRandom(0,window.innerHeight);

imgObj.setAttribute("style","position:absolute;left:" x "px;top:" y "px;");

//添加onclick事件属性

//this代表当前对象,this是一个对象。

//this是系统关键字。this只能在函数内使用。

imgObj.setAttribute("onclick","removeImg(this)");

//将图片节点,挂载到<body>父节点下

document.body.appendChild(imgObj);

}

//函数:求随机数函数

function getRandom(min,max)

{

//随机数

var random = Math.random()*(max-min) min;

//向下取整

random = Math.floor(random);

//返回结果

return random;

}

//函数:删除节点

function removeImg(obj)

{

document.body.removeChild(obj);

}

</script>

</head>

<body>

</body>

HTML DOM简介和新特性

1、简介

核心DOM中,提供的属性和方法,已经可以操作网页了。为什么还要有HTMLDOM呢?

如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分麻烦。

那么,HTMLDOM中就提供了通过id直接找节点的方法,而不用再HTML根节点开始。

2HTMLDOM的新特性

每一个HTML标记,都对应一个元素对象。如:<img>对应一个图片对象

每一个HTML标记的属性,与对应的元素对象的属性,一一对应。

javascript学习手册免费(JavaScript精通到深入)(19)

HTML DOM访问HTML元素的方法(最常用)

1getElementById()

功能:查找网页中指定id的元素对象。

语法:var obj = document.getElementById(id)

参数:id是指网页中标记的id属性的值。

返回值:返回一个元素对象。

举例:var imgObj = document.getElementById(“img01”)

2getElementsByTagName(tagName)

功能:查找指定的HTML标记,返回一个数组。

语法:var arrObj = parentNode.getElementsByTagName(tagName)

参数:tagName是要查找的标记名称,不带尖括号。

返回值:返回一个数组。如果只有一个节点,也返回一个数组。

举例:var arrObj = ulObj.getElementsByTagName(“li”)

javascript学习手册免费(JavaScript精通到深入)(20)

元素对象的属性

javascript学习手册免费(JavaScript精通到深入)(21)

tagName:标签名称,与核心DOM中nodeName一样。

className:CSS类的样式。

id:同HTML标记id属性一样。

title:同HTML标记的title属性一样。

style:同HTML标记的style属性一样。

innerHTML:包含HTML标记中的所有的内容,包括HTML标记等。

以上元素对象属性的应用,详细看文件。

javascript学习手册免费(JavaScript精通到深入)(22)

offsetWidth:元素对象的可见宽度,不带px单位。

offsetHeight:元素对象的可见高度,不带px单位。

scrollWidth:元素对象的总宽度,包括滚动条中的内容,不带px单位。

scrollHeight:元素对象的总高度,包括滚动条中的内容,不带px单位。

scrollTop:指内容向上滚动上去了多少距离(有滚动条时才有效),默认值为0

scrollLeft:指内容向左滚动过去了多少距离(有滚动条时才有效)。

onscroll:当拖动滚动条时,调用JS函数。

javascript学习手册免费(JavaScript精通到深入)(23)

综合案例:书讯快递

javascript学习手册免费(JavaScript精通到深入)(24)

javascript学习手册免费(JavaScript精通到深入)(25)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页