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

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. Python爬虫实战三之爬取嗅事百科段子

    一.前言 俗话说,上班时间是公司的,下班了时间才是自己的.搞点事情,写个爬虫程序,每天定期爬取点段子,看着自己爬的段子,也是一种乐趣. 二.Python爬取嗅事百科段子 1.确定爬取的目标网页 首先我 ...

  2. 网络流24题——数字梯形问题 luogu 4013

    题目描述:这里 极其裸的一道费用流问题 首先分析第一问,由于要求一个点只能经过一次,所以我们将梯形中的每一个点拆成两个点(记为入点和出点,顾名思义,入点用来承接上一行向这一行的边,出点用来向下一行连边 ...

  3. Vuejs自定义select2指令

    在做select2插件的时候遇到一些坑,最终解决如下: Vue.directive('select2', { inserted: function (el, binding, vnode) { var ...

  4. kafka单节点的安装，部署，使用

    1.kafka官网:http://kafka.apache.org/downloads jdk:https://www.oracle.com/technetwork/java/javase/downl ...

  5. GCJ-02火星坐标系和WGS-84坐标系转换关系

    GCJ-02火星坐标系和WGS-84坐标系转换关系 WGS-84:GPS坐标系 GCJ-02:火星坐标系,国测局02年发布的坐标体系,高德,腾讯等使用. BD-09:百度坐标系,百度自研,百度地图使用 ...

  6. 大数据学习之Linux基础01

    大数据学习之Linux基础 01:Linux简介 linux是一种自由和开放源代码的类UNIX操作系统.该操作系统的内核由林纳斯·托瓦兹 在1991年10月5日首次发布.,在加上用户空间的应用程序之后 ...

  7. 在同一个Apache服务器软件上部署多个站点的基础方法

    这篇文章主要介绍了Apache中Virtual Host虚拟主机配置及rewrite模块中的重要参数说明,是在同一个Apache服务器软件上部署多个站点的基础方法,需要的朋友可以参考下(http:// ...

  8. SQL增删改语句

    一,插入数据 1.使用  insert ...values 语句插入单行或多行元组数据 insert  into 表名 (列名,列名,...,列名) values 值 表名:指被插入数据的表名 列名: ...

  9. 2018-2019 20165220 网络对抗 Exp5 MSF基础

    实验任务 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器的攻击,如ms11_050:(1分) 1.3 一个针对客户端的攻击,如Adobe:(1分) 1.4 成功应用任何 ...

  10. Nginx status详解

    1. 启用nginx status配置 server {        listen *:80 default_server;        server_name _;        locatio ...