7.30
- 看网课 递归,预编译(下)
- 看网课 作用域,作用域链
- 红宝书第八章BOM
1.window对象
(1)全局作用域
a. 在全局作用域中声明的变量,函数都会变成window的属性,方法。
b.注意:全局变量不能通过delete删除,但是Window对象上定义的属性可以.
c.尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个未声明的变量是否存在。
(2)窗口关系及框架
a.top对象
b.parent对象
c.self对象
(3)窗口位置
a.方法一:screenLeft与screenRight属性,在不同的浏览器下效果不同,
b.moveTo()与moveBy()属性:可以将窗口精确的移动到一个新位置,接收两个参数,moveTo()接收的是新位置的x,y坐标;
moveby()接收的是在水平和垂直方向上移动的像素数。
(4)窗口大小(在chorm中四个属性都返回视口大小而非浏览器窗口大小)
a.
属性*innerWidth
*innerHeight
*outerWidth
*outerHeight
b.
*标准模式下:document.documentElement.clientWidth/.clientHeight中保存了页面视口的信息
*混杂模式下:document.body.clientWidth/.clientHeight
c.使用resizeTo()与resizeBy()调整浏览器窗口大小,接收两个参数;
resizeTo()接收的是新宽度与新高度,resizeBy()接收的是新窗口与原窗口的宽度与高度之差,不适用与框架。
这是一个关于[移动设备](http://t.cn/zOzs0Tz)视口的研究
(5)导航和打开窗口(window.open的用法)
a.弹出窗口
7.31
- 看网课,闭包
- 看网课,对象与包装类上下
8.1
- 看JS红宝书
(5)导航和打开窗口
a.window.open()方法(导航到一个特定的URL,也可以打开一个新的浏览器窗口
参数:要加载的URL
窗口目标
一个特性字符串
一个新页面是佛取代浏览器历史记录中当前加载页面的布尔值(通常只有第一个参数)
b.弹出窗口
*若第二个参数并不是一个已经存在的窗口或者框架,那就会根据第三个参数创建一个新窗口或者标签页,
若没有上传第三个参数,则会打开一个带有全部默认设置的新浏览器窗口,在不打开新窗口的情况下,就回忽略第三个参数。
*第三个参数是逗号分隔的设置字符串,表示在新窗口中都显示哪些特性。详见200页。
c.安全限制
d.弹出窗口屏蔽程序
*如果是浏览器内置的屏蔽程序组阻止的弹出窗口,那么Window。open()就回返回null
*如果是浏览器扩展或者其他程序阻止的弹出窗口,那么window。open()通常会抛出一个错误。
(6)间歇调用与超时调用
a.设置超时值来调度代码在特定的时间执行(在指定时间过后执行代码)
*需要使用window的setTimeout()方法,两个参数,返回一个数值ID,表示超时调用,
*可以使用clearTimeout()来取消尚未执行的超时调用计划,将超时调用ID作为参数。
b.设置间歇时间值来调度(每隔指定时间就执行一次代码)
*setInterval()方法接收的参数与setTimeout()相同,返回一个间歇调用ID。
*可以使用clearInterval()来取消尚未执行的间歇调用
(7)系统对话框
a.alert(),接收一个字符串并显示给用户,显示一个系统对话框,加一个确定按钮。(警告对话框)
b.confirm(),类似警告框,出了确认键还有取消键,可以检查该方法的布尔值来确定用户点了确定还是取消,true表示确定,false表示关闭或者取消。
c.prompt(),提示框,,确定,取消,输入框,两个参数,要显示给用户的文本提示和文本输入域的默认值。
如果点击了OK,则返回文本输入域的值,其他返回null。
2.location对象(具体属性值见207页)
(1)查询字符串参数
(2)位置操作
a.assign()为其传递一个URL来改变位置
b.location.href()属性来改变了,浏览器位置,每次修改location()属性除hash外,页面都会以新的URL加载。
c.为了不实现后退就返回上一页,可以使用replace()方法,接收一个参数,要导航到的URL。
d.reload(),作用是重新加载当前显示的页面
3.navigator对象(属性见210页)
(1)检测插件
a.非IE时,可以用plugins数组实现,包含四个属性,name,description,filename,length;参数一个为要检测的插件名;注意refresh()方法。
b.在IE中检测的唯一方法使ActiveXObject类型,并尝试创建一个特定的插插件实例。
c.典型的做法:针对每个插件分别创建检测函数。
(2)注册处理程序
4.screen对象
5.history对象
(1)go()方法:在用户的历史记录中任意跳转,接收一个参数,可正可负,正向前,负后退;
也可以传递一个字符串参数,浏览器会跳转到历史记录中包含该字符串的第一个位置
(2)back()和forward()方法
(3)length属性,保存着历史记录的数量。
- 看网课:原型链、原型与call/apply
8.2-8.3
- 看JS的第十章DOM(文档对象模型)
1.节点层次(注意文档元素)
(1)Node类型(在IE中无效)
a.每个节点都有一个nodeType属性,表明节点类型。
b.nodeName和nodeValue属性
c.节点关系
*每个节点都有一个childNodes属性,其中保存着一个NodeList对象
(该对象为类数组对象用于保存一组有序的节点,可以通过位置来访问,是基于DOM结果动态执行查询的结果。
*每个节点都有parentNode属性,指向文档树中的父节点,并且childNodes列表中所以节点都具有相同的父节点。
*childNodes中的节点相互之间都是同胞节点,可以使用previousSibing与nextSibling可以访问其他节点。第一个与第二个的值都为null。
*父节点的firstChild与lastChild分别对应列表的第一项与最后一项。。
*hasChildNodes()方法:在节点包含一或多个子节点时返回true。
*ownerDocument属性指向表示整个文档的文档节点。
d.操作节点
*appendChild():用于向childNodes列表末尾添加一个节点,返回新增的节点,若加入的节点已存在,则会移动到最后一位。
*insertBefore():把节点放在特定的位置上,两个参数(要插入的节点与作为参照的节点,变为前一个同胞节点)
*第一个元素是创建的变量名,第二个元素是盒子的id名或是之前创建的变量名。
*replaceChild():替换节点,两个参数:要插入的节点与要替换的节点
*removeChild():移除节点,返回被移除的节点。移除的节点仍未文档所有只不过没有了位置。
e.其他方法
*cloneNode():用于创建调用这个方法的节点的一个完全相同的副本,接收一个布尔值参数,表示是否执行深复制,true时就复制节点与整个子节点点数,false只复制节点。
*normalize()方法
(2)document 类型(表示文档特征见253页)
a.文档的子节点
*子节点可以是DocumentType,Element,Comment,ProcessingInstruction。注意另一个节点DocumentType。
*访问节点的快捷方式(documentElement属性与childNodes列表访问文档元素,都指向<html>
*body属性直接指向<body>元素
b.文档信息
*title取得当前页的标题并且可以修改反应在浏览器标题栏上
*URL属性包含页面完整的URL(不可修改)
*domain属性中只包含页面的域名(可修改,并且、要设置为URL中包含的域,并且不能从松散变为紧绷)
*referrer属性要取得的元素的ID,若多个ID值相同则返回第一次出现的
c.查找元素
*getElementByID()接收一个参数,即,要取得的元素的ID
*getElementsByTagName(),一个参数,取得元素的标签名。,返回的是包含零或多个元素的NodeList,其中包含一个HTMLCollection对象,注意其用法而且“*”可以输出所有的元素,除了IE中输出的是所有注释节点。
*getElementsByName():只有HTMLDocument类型才有用,返回一个NodeList
d.特殊集合
都是针对HTMLCollection对象的
详见258页
e.DOM一致性检测
*document.implementation属性就是为此提供相应信息与功能的对象,于浏览器对DOM的实现直接对应。
*DOM1级为属性规定了一个方法hasFeature,两个参数,要检测的DOM的功能名称与版本号返回true。
f.文档写入
*write()与writeln():将输出流写入到网页中,1会直接写入二会在字符串末尾添加一个换行符
*write()与writeln():还可以动态的包含外部资源,但要注意转义字符使用,避免出错,例如<\/script>
*open(),close():打开关闭网页的输出流
(3)Element类型(用于表现XML或HTML元素,提供了对元素标签名子节点及特性的访问,特征见261页)
a.HTML元素(所有的HTML元素都由HTMLElement类型表示)
id:元素在文档中的唯一标识符
title:有关元素的附加说明信息
lang:元素内容的语言代码
dir:语言方向
className:元素指定的css类
其他详见263页
b.取得特性
*三个方法:
getAttribute()、
*两类特殊的特性,style与onclick
c.设置特性
*setAttribute(),两个参数,要设置的特性名与值
removeAttribute():删除特性
d.attributes()属性(包含一个NameNodeMap对象,是一个动态的集合)
*getNamedItem(name):返回nodeName属性等于name的点;
*removeNamedItem(name):从列表移除nodeName属性等于name的点;
*setNamedItem(node):向列表中添加节点,一节点的nodeName属性为索引
*item(pos):返回位于数字pos位置处的节点
e.创建元素
*document。createElement():可以创建新元素,一个参数,要创建的元素的标签名
*要把新元素添加到文档树,可以使用appendChild(),insertBefore()。
f.元素的子节点
(4)Text类型(文本节点,特征详见270页)
可以通过nodeValue、data属性访问
text节点中包含的文本,使用下列方法可以操作节点中的文本,删除,插入,替换,取出指定字符串等等,详见270页)
a.创建文本节点
*document。createTextNode()创建新文本节点,接收一个参数,要插入的节点中的文本,创建同时也会设置ownerDocument
(5)Comment类型(注释,继承自Text详见273页)
(6)CDATASection类型(只针对基于XML的文档,表示的是CDATA区域,继承自Text类型)
(7)DocumentType类型(DocumentType对象不可以动态创建,而只能通过解析文档代码的方法来创建)
*吧该对象保存在document。doctype中
(8)DocumentFragment类型(在文档中没有对应的标记)
*创建文档片段方法:document。createDocumentFragment(),继承Node所有方法
(9)Attr类型(元素的特性在DOM中以该类型表示)
*三个属性:name,value,specified
*document.createAttribute()创建新的特性节点。
- 看网课:继承模式,命名空间,对象枚举
- 继续看网课:this以及讲解题
- 没错,又继续看网课:数组,类数组,数组去重,try-catch,es5标准模式
8.4
-看红宝书第十章DOM操作技术后半章
2.DOM操作技术
(1)动态脚本(一般方法IE用不了)
a.两种方法:
*创建外部文件
*直接插入JS代码
(2)动态样式(在页面刚加载时不存在的样式,是在页面加载完成后动态添加到页面中的)(一般方法IE用不了)
(3)操作表格
a.为了方便构建表格,HTML DOM还为<table><tbody><tr>添加了一些属性与方法,详见282页。
(4)使用NodeList
a.所有NOdeList对象都是在访问DOM文档时实时运行的查询
- 看网课 :DOM操作初探(选项,小方块的移动,扫雷的小格子)