《JavaScript DOM编程艺术》学习笔记（三）

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

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>([sS]+)</article>/

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

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

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/undezhi/p/9222692.html