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

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. zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控

    zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控 前端nginx虚拟主机引用后端多个php接口,为了方便监控,将后端服务器集中配置在nginx中,具体配置如下: [roo ...

  2. Jenkins构建自动化脚本执行无界面解决方法

    场景: jenkins构建selenium自动化用例的时候,会有jenkins自带服务后台运行自动化脚本,可无界面运行IE.Chrome.Firefox. 然而运行IE浏览器时候(IE比较特殊),Je ...

  3. SQL语句case when then的用法

    case具有两种格式.简单case函数和case搜索函数. //简单case函数 case sex when '1' then '男' when '2' then '女’ else '其他' end ...

  4. python介绍及下载

    python介绍 Python是一种计算机程序设计语言.是一种面向 对象的动态类型语言,支出被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多的被用于独立的.大型醒 ...

  5. iOS开发之获取时间戳方法

    // 得到当前本地时间,13位,整形 + (long long)gs_getCurrentTimeToMilliSecond { double currentTime = [[NSDate date] ...

  6. STM32的定时器定时时间计算（计数时间和中断定时时间）

    时基单元 可编程高级控制定时器的主要部分是一个16位计数器和与其相关的自动装载寄存器.这个计数器可以向上计数.向下计数或者向上向下双向计数.此计数器时钟由预分频器分频得到. 计数器.自动装载寄存器和预 ...

  7. Ionic2中腾讯Bugly异常捕获以及上报

    Ionic2混合开发,入坑系列:Ionic2中腾讯Bugly异常捕获以及上报 1.Ionic2中处理全局异常,直接继承IonicErrorHandler即可,代码如下 import { IonicEr ...

  8. Semantic difference between object expressions and declarations

    object expressions are executed (and initialized) immediately, where they are used; object declarati ...

  9. html_之css

    css 有三种形式的写法: 直接在标签里写入style样式 在<head></head>里写入<style></style>样式 直接创建.css 文件 ...

  10. lombok @EqualsAndHashCode 注解讲解

    官方文档:@EqualsAndHashCode 原文中提到的大致有以下几点: 1. 此注解会生成equals(Object other) 和 hashCode()方法. 2. 它默认使用非静态,非瞬态 ...