终于开始接着写我的读书笔记了。

17、DOM有insertBefore方法,但并没有提供insertAfter()方法。不过可利用已有的DOM方法和属性编写此函数:

function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

18、为兼容所有浏览器,getHTTPObject函数应这样写:

function getHTTPObject() {
if(typeof XMLHttpRequest == "undefined") {
XMLHttpRequest = function() {
try{return new ActiveXObject('Msxml2.XMLHTTP.6.0');
}catche(e){}
try{return new ActiveXObject('Msxml2.XMLHTTP.3.0');
}catche(e){}
try{return new ActiveXObject('Msxml2.XMLHTTP');
}catche(e){}
return false;
}
return new XMLHttpRequest();
}

  getHTTPObject通过对象检测技术检测了XMLHttpRequest。若失败,则继续检测其他方法,最终返回false或一个新的XMLHttpRequest(或XMLHTTP)对象。

  XMLHttpRequest对象有许多的方法。其中最有用的是open方法,它用来指定服务器上将要访问的文件,指定请求类型:GET、POST或SEND。SEND参数用于指定请求是否以异步方式发送和处理。

  添加代码:

function getNewContent() {
var request = getHTTPObject();
if(request) {
request.open('GET','example.txt',true);
request.onreadystatechange = function() {
if(request.readyState == 4) {
var para = document.createElement('p');
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);}
};request.send(null);
}else{
alert("抱歉,你的浏览器不支持XMLHtppRequest。");
}
}

当页面加载完成后,以上代码会发起一个GET请求,请求与ajax.htm文件位于同一目录的example文件。

代码中的onreadystatechange是一个事件处理函数,它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。

下面的代码会在onreadystatechange被触发时执行名为doSomething的函数:

(注意:在为onreadystatechange指定函数引用时,不要在函数名后面加括号。因为加括号表示立即调用函数,而此时只想把函数资深的引用(而不是函数结果)赋值给onreadystate-change属性。)

request.onreadystatechange = doSomething;

在指定了请求的目标,也明确了如何处理响应指挥,就可以用send方法来发送请求了:

request.send(null)

19、服务器在向XMLHttpRequest对象发回响应时,该对象有许多属性可用,浏览器会在不同阶段更新readyState属性的值,它有5个可能的值:

  0表示未初始化      1 正在加载      2 加载完毕     3 正在交互      4 完成

只要readyState属性的值变为4,就可以访问服务器发送回来的数据了。

访问服务器发送回来的数据要通过两个属性完成。一是responseText属性,它用于保存文本字符串形式的数据。一是responseXML属性,用于保存Content-Type头部中指定为"text/xml"的数据,其实是一个DocumentFragment对象。这也正事XMLHttpRequest这个名里有XML的原因。

在此例中,onreadystatechange事件处理函数在等到readyState变成4之后就会从responseText属性取得文本数据,然后把数据放到一个段落中,再将其添加到DOM中。

20、异步请求有一个容易被忽略的问题是异步性,就是脚本在发送XMLHttpRequest请求之后,仍然会继续执行,不会等待响应返回。

21、AJAX之挑战

总的来说,Ajax技术给我们带来了很多好处。利用它可以增强站点可用性,用户无需刷新页面,从而可以很快地得到响应。

Ajax应用的一个特色就是减少重复加载页面的次数。但这种缺少状态记录的技术会与浏览器的一些使用管理产生冲突,导致用户无法使用后退按钮或者无法为特定状态下的页面添加书签。

只更新部分页面区域的特性也会影响到用户的预期。理想情况,用户的每一次操作都一个得到一个清晰明确的结果。为此,Web设计人员必须在向服务器发出请求和服务器返回响应时,给用户明确的提示。

要构建成功的Ajax应用,关键在于将Ajax功能看做一般的JS功能,在平稳退化的基础上求得渐进增强。

22、注意:某些浏览器要根据DOCTYPE来决定使用标准模式还是使用兼容模式来呈现页面。兼容模式意味着浏览器要模仿某些早期浏览器的“怪异行为”,并容许那些不规范的页面在新浏览器也能正常工作。一般来说,应该坚持使用标准模式,避免触发兼容模式。

23、编写一个循环,对创建的defs数组进行遍历。

for(variable in array)

第一次循环时,变量variable将被赋值为数组array的第一个元素的下标志。第二次循环时,变量variable被赋值为数组array的第二个元素的下标值。

24、为了日后能够方便地把多个事件添加到window.onload处理函数上,最好使用addLoadEvent函数来完成这一项工作。

function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload!='function') {
windows.onload = func;
}else{
window.onload = function() {
oldonload();
func();
}
}
}

25、注意:在编写DOM脚本时,会想当然地认为某个节点肯定是一个元素节点,这是一种相当常见的错误。如果没有百分百的把握,就一定要去检查nodeType属性值。有很多DOM方法只能用于元素节点,如果用在了文本节点身上就会出错。

26、得到最后一个元素节点语句:

var qElement = quotes[i].getElementsByTagName('*');
var elem = qElements[qElements.length - 1];

27、隔行设置样式:

(1)把文档里所有table元素找出来。

(2)对每个table元素,创建变量odd并把它初始化为false。

(3)遍历这个表格里的所有数据行。

(4)如果odd值为true,设置样式并把其改为false。

(5)如果odd值是false就改为true。

var tables = document.getElementsByTagName('table');
var odd,rows;
for(var i =0; i < tables.length; i++) {
odd = false;
rows = tables[i].getElementsByTagName('tr');
for(var j = 0; j < rows.length; j++) {
if(odd == true) {
rows[j].style.backgroundColor = red;
odd = false;
}
}
}

28、鼠标指针悬停:

function highlight() {
var rows = document.getElementsByTagName('tr');
for(var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.style.backgroundColor = green;
}
rows[i].onmouseover = function() {
this.style.backgroundColor = white;
}
}
}

29、把一个非常具体的东西改进为一个较为通用的东西的过程成为抽象(abstraction)。

30、JS函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行。它带有两个参数:第一个参数通常是一个字符串,其内容是将要执行的那个函数的名字;第二个参数是一个数值,以ms为单位设定需经过多长时间才执行。

若想取消正在排队等待执行的函数,就必须实现把setTimeout函数的返回值赋给一个变量。可以用clearTimeout函数来取消“等待执行”队列里的某个函数。

31、parseInt可以把字符串里的数值信息提取出来。如果把一个以数字开头的字符串传递给这函数,它将返回一个数值:

parseInt(string)

parseInt函数的返回值通常是整数。若要提取浮点数,就应该使用parseFloat函数。

32、CSS的overflow属性用来处理一个元素的尺寸超出其容器尺寸的情况。

visible:不裁剪溢出的内容。浏览器将把溢出的内容显示在容器的区域以外,全部内容可见。

hidden:隐藏。内容只显示在元素的显示区域里,意味着只有一部分可见。

scroll:类似于hidden,对溢出的内容进行隐藏,但显示一个滚动条以便能滚动看内容的其他部分。

auto:类似于scroll,但浏览器只在发生溢出时才显示滚动条。

33、每当用户把鼠标悬停在某个链接上,不管上一次调用是否已将图片移动到位,moveElement函数都会被再次调用并师徒把这个图片移动到另一个地方去。于是当用户在链接之间快速移动鼠标时,movement变量就会像一条拔河绳哪有来回变化,而moveElement函数就会试图把图片同时移动到两个不同的地方去。

如果用户移动鼠标的速度够快,积累在setTimeout队列里的事件就会导致动画效果产生滞后。为了消除动画滞后的现象。可用下列函数清除积累在setTimeout队列里的事件

clearTimeout(movement);

可是,如果在还没有设置movement变量时就执行这条语句,会有个错误。

但不能使用局部变量:

var movement = setTimeout(repeat,interval);

如果这样做,clearTimeout函数调用语句将无法工作,因为局部变量movement和clearTimeout函数在上下文里不存在。

也就是说,既不能用全局变量,也不能用局部变量。需要一种介于二者直接的东西,需要一个只与正在被移动的那个元素有关的变量。

只与某个特定元素有关的变量是存在的。事实上,我们一直在使用,就是“属性”。

到目前为止,我们一直在使用由DOM提供的属性,如element.firstChild、element.style,等等。JS允许我们为元素创建属性:

element.property = value

只要愿意,完全可以创建一个名为foo的属性并把它设置为"bar":

element.foo = "bar";

这很像是在创建一个变量,但区别是这个变量专属于某个特地的元素。

我们把变量movement从一个全局变量改变为正在被移动的那个元素(elem元素)的属性。这样以来,就可以测试它是否已经存在,并在存在的情况下使用clearTimeout函数。

《JavaScript DOM编程艺术》学习笔记(二)的更多相关文章

  1. Stealth视频教程学习笔记(第二章)

    Stealth视频教程学习笔记(第二章) 本文是对Unity官方视频教程Stealth的学习笔记.在此之前,本人整理了Stealth视频的英文字幕,并放到了优酷上.本文将分别对各个视频进行学习总结,提 ...

  2. Stealth视频教程学习笔记(第一章)

    Stealth视频教程学习笔记(第一章) 本文是对Unity官方视频教程Stealth的学习笔记.在此之前,本人整理了Stealth视频的英文字幕,并放到了优酷上.本文将分别对各个视频进行学习总结,提 ...

  3. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  4. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  5. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  6. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  7. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  8. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  9. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  10. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

随机推荐

  1. 关于npm镜像,发布,内网搭建等

    npm config set registry http://registry.npmjs.org npm config set registry https://registry.npm.taoba ...

  2. 如何使用npm构建一个react demo项目

    方法一: 1) 安装node.js环境  点我进入nodejs官网 1.1) 下载LTS(Long term support)版本,安装 1.2) 在cmd中使用以下命令查看node是否安装成功 no ...

  3. starting Tomcat v8.5 at localhost has encountered a problem

    好像有很多初学者会遇到这个问题 我也遇到这个问题了, 我的问题在于:

  4. js变量传递

    基本类型.引用类型 基本类型: undefined.Null.Boolean.Number.String五种 (简单的数据段);引用类型: object (由多个值构成). 两种类型在使用上的区别: ...

  5. requests基本应用

    requests基本功能详解 import requests response = requests.get('https://www.baidu.com') print('type属性:',type ...

  6. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  7. python+selenium自动测试之WebDriver的常用API(基础篇二)

    本篇介绍一下python+selenium复杂操作的处理,基于python3.6,selenium3.141,详细资料介绍查看官方API文档,点击这里 一.常见特殊情况处理如iframe/弹窗处理 有 ...

  8. IE下get方式传中文参数乱码解决方法

    乱码原因:浏览器在传递url的时候,会使用自己的编码格式对地址进行编码,如果浏览器所使用编码与服务器采用编码不一致,服务器接收到的参数就会出现乱码.在firefox,chrome下正常,ie下会出现乱 ...

  9. 浅析布隆过滤器及实现demo

    布隆过滤器 布隆过滤器(Bloom Filter)是一种概率空间高效的数据结构.它与hashmap非常相似,用于检索一个元素是否在一个集合中.它在检索元素是否存在时,能很好地取舍空间使用率与误报比例. ...

  10. IE外挂

    //引用 Windows/system32/Shell32.dll //引用COM组件 shdocvw.dll (Microsoft Internet Controls) //引用COM组件 msht ...