《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>([\s\S]+)<\/article>/
正则表达式中的每个模式都以/开头和结尾。如果模式本神包含/，必须使用\对其转义。
在article之间，是一个捕获组，捕获组中的方括号包含了要匹配的字符。而圆括号定义的捕获组是为了便于后面提取其中匹配的内容。
方括号后面，+表示前面的模式重复一次或多次。*表示前面的模式重复零或多次。
《JavaScript DOM编程艺术》学习笔记（三）的更多相关文章
- Java学习笔记三十一:Java 包(package)
Java 包(package) 一:包的作用: 如果我们在使用eclipse等工具创建Java工程的时候,经常会创建包,那么,这个包是什么呢. 为了更好地组织类,Java 提供了包机制,用于区别类名的 ...
- Java学习笔记三十:Java小项目之租车系统
Java小项目之租车系统 一:项目背景介绍: 根据所学知识,编写一个控制台版的“呱呱租车系统” 功能: 1.展示所有可租车辆: 2.选择车型.租车量: 3.展示租车清单,包含:总金额.总载货量以及其车 ...
- Java学习笔记三:Java的变量、常量、变量的类型及使用规则
Java的变量.常量.变量的类型及使用规则 每一种语言都有一些具有特殊用途的词,Java也不例外,它们被称为关键字.关键字对 Java 的编译器有着特殊的意义. 一:Java中的关键字: 注:Java ...
- Java学习笔记三.2
5.继承 //Java中所有对象都显式/隐式的继承子Object类 class fu{ fu(){ System.out.println("fu..."+getNum()); sh ...
- Java学习笔记三——数据类型
前言 Java是强类型(strongly typed)语言,强类型包含两方面的含义: 所有的变量必须先声明后使用: 指定类型的变量只能接受预支匹配的值. 这意味着每一个变量和表达式都有一个在编译时就确 ...
- Java学习笔记三---unable to launch
环境配置好后,在eclipse下编写HelloWorld程序: ①创建新工程 ②创建.java文件,命名为HelloWorld ③在源文件中添加main方法,代码如下: public void mai ...
- Java 学习笔记 (三) Java 日期类型
以下内容摘自: https://www.cnblogs.com/crazylqy/p/4172324.html import java.sql.Timestamp; import java.text ...
- Java学习笔记三：运算符
1.算术运算符: GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/OperPrac01.java + - * / ...
- Java学习笔记三.3
9.异常处理:Java中的异常处理对象就是将以前的if语句进行的判断进行抽象化,并形成的一套错误处理体系.最顶端是Throwable,接着是Error,Exception,其中Exception又明显 ...
- Java学习笔记三
1.面向过程思想,强调的是过程(即动作,函数):面向对象思想,强调的是对象. 2.类与对象关系:类是对事物的描述(属性和行为-方法),对象是类的实例.对象通过new生成.属性也称成员变量;方法也称成员 ...
随机推荐
- qml layout
一.使用总结 1.锚点:锚点锚在父控件左边anchors.left: parent.left ,才可以设置anchors.leftMargin:20 才有作用,设置anchors.topMargin: ...
- 爬虫 selenium+Xpath 爬取动态js页面元素内容
介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如 ...
- 手把手详解持续集成之GitLab CI/CD
一.环境准备 首先需要有一台 GitLab 服务器,然后需要有个项目:这里示例项目以 Spring Boot 项目为例,然后最好有一台专门用来 Build 的机器,实际生产中如果 Build 任务不频 ...
- ELK搭建<二>：安装ES插件head
1.去github下载head,针对ES版本不同,安装方式也不一样, =>在2.x以前版本可以通过插件安装 for Elasticsearch 2.x: sudo elasticsearch/b ...
- iOS开发之获取时间戳方法
// 得到当前本地时间,13位,整形 + (long long)gs_getCurrentTimeToMilliSecond { double currentTime = [[NSDate date] ...
- chrome启动参数之
--remote-debugging-port Chrome 启动的时候,默认是关闭了调试端口的,如果要对一个目标 Chrome PC 浏览器进行调试,那么启动的时候,可以通过传递参数来开启 Chro ...
- mysql 服务器负载过高的解决分析之路
最近我们有台 mysql 服务器一直报负载过高,不停的收到阿里云的报警短信,让我很抓狂,登陆上服务器,看下一下,慢查询日志 发现有60多万的慢查询日志,一看这个就知道是搜索带来的,一直想把搜索的服务给 ...
- flex"
很久以前,有面试官问过我如何实现"
- GLSL ES 中的存储变量修饰符（const/attribute/uniform/varying/in/centroid in/out/centroid out)
GLSL ES 3.00 中支持的存储变量修饰符 变量名称 作用 示例 const 编译过程常量,或者函数的只读参数 const vec3 zAxis = vec3 (0.0, 0.0, 1.0); ...
- linux学习之命令的排列、替换和别名--2019-04-23
1.命令的排列 1)使用“;” 使用“;”命令时,不管命令1是否出错,接下来都执行命令2. 2)使用“&&” 使用“&&”命令时,只有命令1正确运行,接下来才会执行命令 ...