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

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. FTP、FTPS和SFTP

    FTP 一.两种传输方式 ASCII传输方式 假定用户正在拷贝的文件包含的简单ASCII码文本,如果在远程机器上运行的不是UNIX,当文件传输时ftp通常会自动地调整文件的内容以便于把文件解释成另外那 ...

  2. 如何用java实现一个p2p种子搜索(3)-dht协议实现

    dht协议实现 上一篇完成了路由表的实现,建立了路由表后,我们还要对路由表进行初始化,因为一开始路由表为空,所以我们需要借助一些知名的dht网络中的节点,对这些节点进行find_node,然后一步步初 ...

  3. PowerDesigner15连接Oracle数据库并导出Oracle的表结构

    PowerDesigner连接Oracle数据库,根据建立的数据源进行E-R图生成.详细步骤如下: 1.启动PowerDesigner 2.菜单:File->Reverse Engineer - ...

  4. openstack虚拟机rescue模式

    nova rescue vm_instance es.ops 20190426 linux虚拟机在出现类似kernel panic后,根据panic信息以及故障前的操作,定位问题的发生点,进行修复 n ...

  5. 【转载】OpenSSL 提取 pfx 数字证书公钥与私钥

    转自https://www.cnblogs.com/Irving/p/9551110.html OpenSSL 提取 pfx 数字证书公钥与私钥   由于之前生产环境已经使用了 Identityser ...

  6. Docker 的点点滴滴

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...

  7. Nastya Is Buying Lunch

    At the big break Nastya came to the school dining room. There are nn pupils in the school, numbered ...

  8. Python爬虫技术(从网页获取图片)+HierarchicalClustering层次聚类算法，实现自动从网页获取图片然后根据图片色调自动分类—Jason niu

    网上教程太啰嗦,本人最讨厌一大堆没用的废话,直接上,就是干! 网络爬虫?非监督学习? 只有两步,只有两个步骤? Are you kidding me? Are you ok? 来吧,follow me ...

  9. 深圳同城快跑笔试题目 2 实现json字符串保存到本地硬盘

    //从给定位置读取Json文件 public static String readJson(String path){ //从给定位置获取文件 File file = new File(path); ...

  10. python3安装lxmlpipinstall安装失败解决办法

    最近在学习python爬虫技术,lxml模块拥有很强大的获取元素功能,但是安装时总超时报错,如下解决办法 选择好python版本→注意pip版本→下载对应lxml.whl→键入对应的字符串→bingo ...