【JavaScript权威指南(第五版)】笔记之第二部分 客户端JavaScript 第13章~第23章
第十三章 Web浏览器中的javascript
①
eg:下面两行代码实际上执行的是相同的功能
var answer = 42;
window.answer = 42;
③每个window对象都定义了一个document属性,该属性引用与这个窗口关联在一起的Document对象,location属性引用与该窗口关联在一起的Location对象.当一个web浏览器显示一个带帧的文档,顶层的windows对象的frames[]数组包含了对代表帧的windows对象的引用.因此,在客户端javascript中,表达式document代表的是当前窗口的document对象,而表达式frames[1].document引用的是当前窗口的第二个子帧的document对象.
eg:要引用这些表单,可以编写如下的代码:
window.document.forms[0]
④每个document对象都有一个forms[]数组,它包含的是代表该文档中出现的所有HTML表单的Form对象.
每个Form对象都有一个elements[]数组,该数组包含了出现在表单中的各种HTML表单元素的对象.
eg:
parent.frames[0].document.forms[0].elements[3].options[2].text
⑤defer属性
使用<script>标记中的defer属性来提示浏览器这样做事安全的:继续解析HTML文档并延迟脚本的执行,直到遇到一个无法延迟的脚本.
<script></script>
⑥ <noscript>标记
HTML定义了<noscript>标记,用来保存只有浏览器中的javascript被关闭的时候才提交的内容.
⑦HTML中的事件句柄
⑧URL中的javascript
eg:
第十四章 脚本化浏览器窗口
①计数器
使用setTimeout()还有一个有用的技巧,就是注册一个函数在延迟0微妙后调用.这段代码没有立刻调用但是会"尽可能快地"运行.实际上.setTimeout()告诉浏览器,当它为当前任何挂起的事件运行完事件句柄并且完成了文档的当前状态的更新之后,就调用该函数.
②replace()和reload()方法
③获取有关窗口大小和位置的信息:
//获取大小
var windowWidth = window.outerWidth;
var windowHeight= window.outerHeight;
//获取位置
var windowX = window.screenX;
var windowY = window.screenY;
④Screen对象和Navigator对象
Screen对象提供有关用户显示器的大小和可用的颜色数量的信息.
Navigator对象的navigator属性的引用的是包含Web浏览器总体信息
⑤打开和操作窗口
关闭窗口用close()方法
moveTo()方法可以将窗口的左上角移动到指定坐标.
moveBy()方法可以将窗口上移,下移,左移,右移指定数量的像素.
resizeTo()方法和resizeBy()方法可以按照相对数量和绝对数量调整窗口的大小.
focus()方法可以请求系统将键盘焦点赋予窗口,还可以把窗口移动到堆栈顺序的顶部,使窗口可见.
blur()方法则会放弃键盘焦点.
scrollBy()方法可以将窗口中显示的文档向左右上下滚动指定数量的像素.
scrollTo()可以将文档滚动到一个绝对位置.它将移动文档以便在窗口文档区的左上角显示指定的文档坐标.
⑥对话框
confirm()方法要求用户点击一个OK或Cancel按钮来确认或取消操作.
Prompt()方法请求用户输入一个字符串.
这两个方法都会产生阻塞,也就是说,在用户关掉它们所显示的对话框之前,它们不会返回.这就意味着在弹出一个对话框时,代码就会停止运行.
eg:
⑦
多窗口和多帧没看
第十五章 脚本化文档
①
②遗留DOM:文档对象集合
anchors[]:
Anchor对象的一个数组,该对象代表文档中的锚(锚是文档中的一个命名的位置,它使用一个具有的name属性的<a>标记来创建,而不是使用一个href属性来创建).一个Anchor对象的name属性保存了name属性的值.
applets[]:
Applet对象的一个数组,该对象代表文档中Java applet
forms[]:
Form对象的一个数组,该对象代表文档中的<form>元素.每个Form对象都有自己的一个名为elelments[]的集合属性,其中包含了代表表单中所包含的表单元素的对象.
images[]:
Image对象的一个数组,该对象代表文档中的<img>元素.
links[]:
Link对象的一个数组,该对象时代表文档中超文本链接的Link对象.超文本链接是在HTML中用<a>标记创建的,并且偶尔会用客户端图像地图的<area>标记来创建.
③命名Document对象
eg:
<form name="shipping">
<input type="text" name="zipcode" />
</form>
document.shipping.zipcode
如果两个元素的name属性同名,则用document对象引用这个name时就变成了保存了这两个元素的引用的一个数组.
④节点
Node接口定义了遍历和操作树的属性和方法.Node对象的childNodes属性返回节点的孩子的一个列表,并且firstChild,lastChild,nextSibling,previousSibling和parentNode属性提供了遍历节点的树的一种方法.像appendChild(),removeChild(),replaceChild()和insertBefore()这样的方法能够向一个文档树中添加节点或者从一个文档树中移除节点.
节点的类型
每个Node对象都有一个nodeType属性,它指定了节点是什么类型的.
DOM树根部的Node是一个Document对象.这个对象的documentElement属性引用了一个Element对象,它代表了文档的根元素.
⑤在文档中查找元素
document.documentElement属性引用了作为文档根元素的<html>标记
document.body属性引用了<body>标记.通常后者比前者更加有用.
Document对象的方法
getElementsByTagName()方法:获取任何类型的HTML元素的列表.如果将特殊字符串"*"传递给getElementsByTagName()方法,它将返回文档中所有元素的列表,排列顺序为它们在文档中出现的顺序(IE5 和IE5.5不支持这种特殊额用法.).也可以用HTMLDocument.all()数组获取所有元素.
getElementById()方法:该方法只返回一个元素,该元素具有匹配的id属性.
getElementsByName()方法:根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。说说name属性，name属性是input标签的内建属性，早期浏览器的getElementsByName方法是为了方便的获取用户的输入。由于name只是input的内建属性，其它标签没有，所以getElementsByName方法不能在别的标签中识别这一属性，因此getElementsByName方法只能用于input标签
Element对象方法
getElementsByTagName()方法:返回一个元素,该元素师调用它的那个元素的后代,该方法不会检索整个文档来查找特定类型的元素,而是只检索给定的元素.
⑥修改属性
一种方法是调用element.setAttribute().
eg:
<script type="text/javascript">
var headline = document.getElementById("headline");
headline.setAttribute("align", "center");
</script>
也可以直接使用它的属性(即使是被废弃使用的属性)
<script type="text/javascript">
var headline = document.getElementById("headline");
headline.align = "center";
</script>
⑦给文档添加内容
Document.createElement()方法和Document.createTextNode()方法创建新的Element节点和Text节点,而方法Node.appendChild(),Node.insertBefore()和Node.replaceChild()可以用来将它们添加到一个文档.
⑧innerHTML属性
当查询一个html元素的这一属性值的时候,所得到的是该元素的孩子的一个HTML文本字符串
第十六章 层叠样式表和动态HTML
①关联延时表和文档
eg:合并在html文档中
<style type="text/css">
body { margin-left:30px; margin-right:15px; background-color:#ffffff }
p { font-size:24px;}
</style>
eg:利用<link>标记引用css样式
<link rel="Stylesheet" href="mystyles.css" type="text/css" />
eg:如果web页面包含一个特定于页面的带有一个<style>标记的样式表,可以使用css的@import指示符来在该特定于页面的样式表中包含一个共享的css文件:
<style type="text/css">
@import "mystyles.css";
body { margin-left:30px; margin-right:15px; background-color:#ffffff }
p { font-size:24px;}
</style>
②绝对定位
css的position属性:
static:这是默认值,指定根据文档内容的正常流动对元素定位.
absolute:用这个值可以设置元素相对于它的包含元素的位置.
fixed:用这个值可以设置元素在浏览器窗口中的位置.
relative:用这个值将根据常规流布置元素,然后相对于它在常规流中的位置进行调整.
margin和padding属性都指定了一个元素周围的空白区域.不同之处在于,margin指定了边框外部的空间,即边框和相邻的元素之间的部分;而padding属性指定了边框内部的空间,即边框和元素内容之间的部分.
eg:一下代码等价
第三维:z-index
该属性定义了元素的第三维,它可以设置元素的堆叠顺序.该属性是个整数,默认值为0,可以为正或负(第四代浏览器不支持负的),它们的绘制顺序是从最低的z-index到最高的z-index,最大值的元素出现在所有元素的最上边.
③元素的显示和可见性
visibility和display这两个属性都可以显示和隐藏元素,不过也有区别:
visibility属性设为hidden,使元素不可见,但会在文档布局中保留它的空间.
display属性设为none,是元素隐藏且文档布局不会为其保留空间.
部分可见性
使用overflow和clip属性则可以显示元素的一部分.
overflow属性指定了在元素内容超过指定大小时会发生什么.
该属性可设置的值说明如下:
visible:内容可以溢出,如果必要可以绘制在元素框之外,这是默认值.
hidden:剪切并隐藏溢出的内容,以免在大小和定位属性定义的区域外绘制任何内容.
scroll:元素框永久具有水平滚动条和垂直滚动条.
auto:只在内容超出元素大小时才显示滚动条,而不是永久显示.
③激活和关闭样式表
<link>和<script>元素都定义了一个disabled属性.若该属性设置为true,则<link>和<script>元素相关的样式表就会被关闭,并且会被浏览器忽略.
第十七章 事件和事件处理
①
②
③
通常,如果浏览器执行某种默认动作来响应一个事件,那么可以返回false阻止浏览器执行那个动作.
关于返回false的规则有一个例外,即当用户把鼠标移动一个超链接(或图像)上时,浏览器的默认动作是在状态栏中显示链接的URL.要阻止这种情况发生,可以让onmouseover事件句柄返回true.
④事件传播(冒泡)
在事件传播过程中,任何事件句柄都可以调用表示那个事件的Event对象的stopPropagation()方法,停止事件进一步传播.
⑤事件句柄的注册
调用对象的addEventListener()方法为特定元素注册事件句柄,包含三个参数
第一个参数是要注册句柄的事件类型,事件类型应该是含有小写HTML句柄属性名的字符串,没有前缀"on".因此,如果用HTML属性onmousedowm,或在0级模型中用onmousedowm属性,那么在2级事件模型中就应该使用字符串"mousedown"
第二个参数是句柄(或叫监听器)的函数,在指定类型的事件发生时调用该函数.在调用这个函数时,传递给它的唯一参数是Event对象.
第三个参数是布尔值,若为true,则指定的事件句柄将在事件传播的捕捉阶段用于捕捉事件.否则,事件句柄就是常规的,当事件直接发生在对象上,或发生在元素的子女上,又向上起泡到该元素时,该句柄将被触发.
eg:
与addEventListener()方法匹配的是removeEventListener()方法,它的三个参数与前者相同,不过是从对象中删除事件处理函数,而不是添加它.
⑥■■■■■■■■■■
⑦把对象出租为事件句柄
⑧按键事件的类型
有三种按键事件类型,分别是keydown,keypress,keyup,它们分别对应onkeydown,onkeypress,onkeyup这几个事件句柄.
如果一个按键被按下并自动重复,可能在keydown和keyup之间有多个keypress事件,但是这和操作系统及浏览器相关,而不能想当然.
⑨
⑩onload事件
当文档完全载入之后,Web浏览器启动一个Windows对象上的onload事件,这个事件通常用来触发那些需要访问整个文档的代码.
第十八章 表单和表单元素
①Form对象
Form对象代表了一个表单,通常该对象可以作为forms[]数组的一个元素来使用,而这个数组是Document对象的一个属性.
Form对象的一个属性是elements[]数组,它包含表示各种表单输入元素的javascript对象(各种类型),按元素在文档中出现的顺序排放.
Form对象的submit()方法可以提交表单,调用reset()方法可以重置表单元素.为了配合submit()和reset()方法,Form对象还提供了事件句柄onsubmint和onreset,前者用来探测表单的提交,后者用来探测表单的重置.
注意,只有真正点击提交按钮才会触发onsubmit事件句柄,调用表单的submit()方法则不会触发它.
②HTML表单元素
submit元素和reset元素与button元素相似,只是它们有相关的默认动作(提交和重置表单)
第二十二章 脚本化客户端图形.
①传统的图像翻滚
②屏幕外图像和缓存
③无干扰的图像翻滚
