终于要完成这最后一部分了，距离第二部分已经过去五天了，一直想早点写的，但还是拖到今天了…………

34、position属性的和法制：static是position属性的默认值，意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。relative的含义与static相似，区别是relative的元素还可以（通过float属性）从文档的正常显示顺序里脱离出来。

若为absolute，就可以把它摆放到容纳它的“容器”的任何位置。这个容器要么是文档本神，要么是一个有着fixed或absolute属性的父元素。它的显示位置由top、left、right和bottom等属性决定，可用像素或百分比作单位来设置。

35、

Math.ceil(number)

将把浮点数number向“大于”方向舍入最近的证书。还有一个floor方法，可向“小于”方向舍入整数。round属性把任意浮点数舍入最近的整数。

36、使用Modernizr脚本一定要放在<head>元素中。把它放在文档开头，可在加载其他标记之前先加载它，以便在文档呈现之前能够创建好新的HTML5元素。

37、为了应对不兼容的浏览器，必须使用特性检测来准备另一个方案。

使用前面提到的Modernizr库，就可以进行兼容性检查。比如，要检查浏览器是否支持某个输入类型的控件：

if(!Modernizr.inputtypes.date){

    //生成日期选择器的脚本
}

而要检查某个属性：

if(!Modernizr.input.placeholder){

    //生成占位符提示信息的脚本

}

要是没有Modernizr，可以使用下面这个函数来检查是否支持某种类型的输入控件：

function inputSupportsType(type){

    if(!document.createElement) return false;

    var input = document.createElement('input');

    input.setAttribute('type',type);

    if(input.type == 'text' && type != 'text'){

        return false;

    }else{

        return true;

    }

}

使用此函数的方式与使用Modernizr一样。

要检查特定的属性，可使用下列函数：

function elementSA(elementName,attribute){

    if(!document.createElement) return false;

    var temp = document.createElement(elementName);

    return(attribute in test);

}

38、HTML JS API：

使用localStorage和sessionStorage在客户端存储大型和复杂数据集的更有效方案：

使用WebSocket与服务器端脚本进行开房的双向通信；

使用Web Worker在后台执行JS；

标准化的拖放实现；

在浏览器中实现地理位置服务。

39、要取得当前页面的URL，可使用window.location.href。

40、JS为比较字符串提供了很多方法。其中indexOf方法用于在字符串中寻找子字符串的位置

string.indexOf(substring)

这个方法返回子字符串第一次出现的位置。

如果没有匹配到，indexOf方法将返回-1。如果返回其他值，则表示有匹配。

41、作为可增进访问性的元素，label非常有用。它通过for属性把一小段文本关联到表单的一个字段。

很多浏览器都会为label元素添加默认行为，如果label的文本被点击，关联的表单字段就会获得焦点。

但可能上述默认行为不存在。用JS添加代码。

（1）取得文档中的label元素。

（2）如果label中有for属性，添加一个事件处理函数。

（3）在label被点击时，提取for属性。

（4）让相应的表单字段获得焦点。

function focusLabels() {

    var labels = document.getElementsByTagName("label");

    for(var i = 0; i < labels.length; i++) {

        labels[i].onclick = function() {

            var id = this.getAttribute("for");

            var element = document.getElementById(id);

            element.focus();

        }

    }

}

addLoadEvent(focusLabels);

42、form对象

HTML中的每个元素都是一个对象。每个元素都有nodeName、nodeType之类的DOM属性。

而有些元素具有的属性比DOM核心中定义的还要多。文档中的每个表单元素都是一个form对象，每个form对象都有一个element.length属性。这个属性返回表单中的包含的表单元素的个数：

form.element.length

这个返回值与childsNodes.length不一样，后者返回的是元素中包含的所有节点的个数。而form对象的element.length属性只关注那些属于表单元素的元素。如input、textarea等。

相应地，表单中的所有字段都保存在form对象的elements属性中。也就是说，下面是一个包含所有表单元素的数组：

form.elements

同样，这个属性与childNodes属性也不一样，后者也是一个数组。childNodes数组返回的是所有节点，而elements数组只返回input、select、textarea以及其他表单字段。

elements数组中的每个表单元素都有自己的一组属性。比如，value属性中保存的就是表单元素的当前值：

element.value

//等价于

element.getAttribute("value")

43、在使用JS编写验证表单的脚本时，要记住：

不要完全依赖JS。客户端验证并不能取代服务器端的验证。几十有了JS验证，服务器端还应对接收到的数据再次验证。

客户端验证的目的在于帮主用户填好表单，避免他们提交未完成的表单，从而节省他们的时间。服务器端验证的目的在于保护数据库和后台系统的安全。

44、

function isF(field) {

    if(field.value.replace(' ','').length == 0) return false;

    var placeH = field.placeholder || field.getAttribute('placeholder');

    return(field.value!= placeholder);

}

通过检查去掉空格只会的value属性的length属性，就可以知道value中是否没有任何字符（不都是空格）。若确定不包含任何字符，返回false。

比较value属性与placeholder属性就可知用户是否对占位符文本一字未动。若二者相同，返回false。

function isE(field) {

    return(field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1;

}

这个函数使用indexOf方法执行了两方面测试。

45、给页面添加Ajax。

先添加getHTTPObject函数。

下面这个函数接受一个DOM元素作为参数，然后把它的所有子元素都删除掉。删除之后，再把GIF图像添加到该元素中。

function displayAjaxLoading(element) {

    while(element.hasChildNodes()) {

        element.removeChild(element.lastChild);

    }

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

    content.setAttribute("src","...gif");

    content.setAttribute("alt","……");

    element.appendChild(content);

}

编写submitFormWithAjax函数。此函数第一个参数是个form对象，第二个是一个目标对象，并执行如下操作。

（1）调用displayAjaxLoading函数。

（2）把ibaodan的值组织成URL编码的字符串，以通过Ajax发送请求。

（3）创建方法为POST的Ajax请求，把表单的值发送给submit.htm。

（4）如果请求成功，解析响应并在目标元素中显示结果。

（5）若请求失败，显示错误信息。

submitFormWA函数在修改DOM和显示图像之前，首先要检查是否存在有效的XMLHttpRequest对象。

function submitFormWithAjax(whichpic, thetarget) {

    var request = getHTTPObject();

    if(!request) return false;

    displayAjaxLoading(thetarget);

}

46、创建一个URL编码的表单数据字符串，以便通过POST请求发送到服务器。这个URL字符串的格式与URL参数相同：

name = value & name2 = value2 & name = value3

表单中每个字段的值都会被编码为这种数据字符串。比如信息“Why does 2+2=4?”，为避免歧义，应使用JS的encodeURIComponent（Uniform Resource Identifier，统一资源标识符）函数把这些值编码成URL安全的字符串。这个函数会把现有歧义的字符转换成相应的ASCII编码：

message = Why%20does%202%2B2%3D4%3F%26 & name = Me& email = me% 40example.com

接下来，循环遍历表的每个字段，是手机它们的名字和编码后的值，把结果保存在一个数组中：

var dataParts = [];

var element;

for(var i = 0; i<whichform.elements.length; i++) {

    element = whichform.elements[i];

    dataParts[i] = element.name + '=' + encodeURIComponent(element.value);

}

收集到所有数据，把数组中的项用&联结起来：

var data = dataParts.join('&');

然后，向原始表单的action属性指定的处理函数发送POST请求：

request.open('POST', whichform.getAttribute("action"), true);

并在请求中添加application/x-www-form-urlencoded头部：

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

47、为了从响应中提取出<article>元素，得考虑使用正则表达式。简单地说，正则表达式就是一种模式，可以用来匹配字符串中的不同部分。

/<article>([\s\S]+)<\/article>/

正则表达式中的每个模式都以/开头和结尾。如果模式本神包含/，必须使用\对其转义。

在article之间，是一个捕获组，捕获组中的方括号包含了要匹配的字符。而圆括号定义的捕获组是为了便于后面提取其中匹配的内容。

方括号后面，+表示前面的模式重复一次或多次。*表示前面的模式重复零或多次。

《JavaScript DOM编程艺术》学习笔记（三）的更多相关文章

  1. Java学习笔记三十一:Java 包(package)

    Java 包(package) 一:包的作用: 如果我们在使用eclipse等工具创建Java工程的时候,经常会创建包,那么,这个包是什么呢. 为了更好地组织类,Java 提供了包机制,用于区别类名的 ...

  2. Java学习笔记三十:Java小项目之租车系统

    Java小项目之租车系统 一:项目背景介绍: 根据所学知识,编写一个控制台版的“呱呱租车系统” 功能: 1.展示所有可租车辆: 2.选择车型.租车量: 3.展示租车清单,包含:总金额.总载货量以及其车 ...

  3. Java学习笔记三:Java的变量、常量、变量的类型及使用规则

    Java的变量.常量.变量的类型及使用规则 每一种语言都有一些具有特殊用途的词,Java也不例外,它们被称为关键字.关键字对 Java 的编译器有着特殊的意义. 一:Java中的关键字: 注:Java ...

  4. Java学习笔记三.2

    5.继承 //Java中所有对象都显式/隐式的继承子Object类 class fu{ fu(){ System.out.println("fu..."+getNum()); sh ...

  5. Java学习笔记三——数据类型

    前言 Java是强类型(strongly typed)语言,强类型包含两方面的含义: 所有的变量必须先声明后使用: 指定类型的变量只能接受预支匹配的值. 这意味着每一个变量和表达式都有一个在编译时就确 ...

  6. Java学习笔记三---unable to launch

    环境配置好后,在eclipse下编写HelloWorld程序: ①创建新工程 ②创建.java文件,命名为HelloWorld ③在源文件中添加main方法,代码如下: public void mai ...

  7. Java 学习笔记 (三) Java 日期类型

    以下内容摘自:  https://www.cnblogs.com/crazylqy/p/4172324.html import java.sql.Timestamp; import java.text ...

  8. Java学习笔记三：运算符

    1.算术运算符: GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/OperPrac01.java +  -  *  /  ...

  9. Java学习笔记三.3

    9.异常处理:Java中的异常处理对象就是将以前的if语句进行的判断进行抽象化,并形成的一套错误处理体系.最顶端是Throwable,接着是Error,Exception,其中Exception又明显 ...

  10. Java学习笔记三

    1.面向过程思想,强调的是过程(即动作,函数):面向对象思想,强调的是对象. 2.类与对象关系:类是对事物的描述(属性和行为-方法),对象是类的实例.对象通过new生成.属性也称成员变量;方法也称成员 ...

随机推荐

  1. java--序列化和反序列化

    一.序列化 java序列化的过程是把对象转换为字节序列的过程 序列化的两种用途: 1)把对象的字节序列永久保存大搜硬盘上,通常存放到一个文件中 2)在网络上传送对象的字节序列 jdk中的序列化API: ...

  2. Mac本地搭建kubernetes环境

    前言:之前在windows上面的虚拟机上面手工搭建了kubernetes集群,但是环境被破坏了,最近想要继续学习k8s,手工搭建太费事,所以选择了minikube,完全能够满足个人的需求,其实在Win ...

  3. Light OJ 1266 - Points in Rectangle

    题目 Link 就是查询矩形内有多少个点. 分析 二维树状数组维护就好了,. Code #include <bits/stdc++.h> const int maxn = 1000 + 1 ...

  4. Java版InfluxDB工具类

    InfluxDB工具类 package com.influxdb.test; import java.util.Map; import org.influxdb.InfluxDB; import or ...

  5. Hadoop第一式：配置Linux环境之免密配置及SSH原理

    一.配置SSH免密登录 进入/.ssh目录,执行密钥生成指令 ssh-keygen -t rsa (rsa为默认加密格式) 然后会出现四个提示,让你选择密钥保存路径.指纹.拍照啥的,不用管它直接回车过 ...

  6. Bootstrap-datepicker3官方文档中文翻译---Methods/方法（原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）

    Methods/方法 方法是由 datepicker 函数调用的,第一个参数为字符串,随后是方法所需的任何参数. $('.datepicker').datepicker('method', arg1, ...

  7. Keep-Alive 是什么？

    Keep-Alive 是什么? 概观 默认情况下,HTTP链接通常在请求完成之后关闭.这意味着服务端在完成响应的交付之后便关闭了TCP链接.为了让链接保持打开,来满足多请求,可以使用keep-aliv ...

  8. Scrapy 扩展中间件: 同步/异步提交批量 item 到 MySQL

    0.参考 https://doc.scrapy.org/en/latest/topics/item-pipeline.html?highlight=mongo#write-items-to-mongo ...

  9. Web系统中Mic设备的应用实例

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  10. python基础day3

    一.文件管理 文件管理是很多应用程序的基本功能和重要组成部分.Python可以使文件管理极其简单,特别是和其它语言相对比. 1.    读操作 1.1r模式 1.1.1读取其他路径下文件 首先在D盘创 ...