JavaScript总结

JavaScript总结

在我认为JavaScript最常用的的主要是表单验证、网页特效和数据传输。

表单验证	网页上，用户输入的信息需要进行验证，在客户端验证，可以减少对服务器端的压力。所以，应该把握正则表达式方面的知识。
网页特效	页面上很多特效是非常好的，能产生很好的用户体验，所以需要把握好dom方面的知识。
数据传输	客户端与服务器端的数据交互，这个就是Ajax技术。

一、正则表达式

正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）。模式描述在搜索文本时要匹配的一个或多个字符串。RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。正则表达式是一种查找以及字符串替换操作。

1、新建正则表达式

方式一：直接量语法

var regs = /pattern/attributes 

方式二：创建 RegExp 对象的语法

 var regs = new RegExp(pattern, attributes );

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

2、使用

正则对象的方法是指这样使用的： RegExp对象.方法(字符串)
字符串对象的方法是这样使用：字符串.方法(RegExp对象)
正则对象的属性和方法

3、正则对象的属性和方法

属性

ignoreCase 返回布尔值，表示RegExp 对象是否具有标志 i
global 返回布尔值，表示RegExp对象是否具有标志g
multiline 返回布尔值，表示RegExp 对象是否具有标志 m。
lastIndex 一个整数，标识开始下一次匹配的字符位置
source 返回正则表达式的源文本（不包括反斜杠）

i 执行对大小写不敏感的匹配

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配
正则表达式作用

字符类匹配

[…] 查找方括号之间的任何字符
[^…] 查找任何不在方括号之间的字符
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
. 查找单个字符，除了换行和行结束符
\w 查找单词字符，等价于[a-zA-Z0-9]
\W 查找非单词字符，等价于[^a-zA-Z0-9]
\s 查找空白字符
\S 查找非空白字符
\d 查找数字，等价于[0-9]
\D 查找非数字字符，等价于[^0-9]
\b 匹配单词边界
\r 查找回车符
\t 查找制表符
\0 查找 NULL 字符
\n 查找换行符

重复字符匹配

{n,m} 匹配前一项至少n次，但不能超过m次
{n,} 匹配前一项n次或更多次
{n} 匹配前一项n次
n？ 匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0，1}
n+ 匹配前一项1次或多次，等价于{1，}
n* 匹配前一项0次或多次，等价于{0，}
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
?=n 匹配任何其后紧接指定字符串 n 的字符串
?!n 匹配任何其后没有紧接指定字符串 n 的字符串

方法
共有六种方法，分别是exec、test、match、search、replace和split。

注意！exec和test的语法都是regexObj调用，match、search、replace和split的语法都是string调用

使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

1、exec

方法为指定的一段字符串执行搜索匹配操作。它的返回值是一个数组或者 null。语法如下：regexObj.exec(str)

示例代码：

<script>
	var patt=new RegExp("e");
	document.write(patt.exec("The best things in life are free"));
</script>
//输出结果：e

2、test

一个在字符串中测试是否匹配的RegExp方法，它返回true或false。语法如下：regexObj.exec(str)

<script>
	var patt=new RegExp("e");
	document.write(patt.test("The best things in life are free"));
</script>
//输出结果：true

search() 方法使用正则表达式

检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

<script>
  var str = "abcdcef";
  console.log(str.search(/c/g));//2
</script>

search() 方法使用字符串

<script>
	function myFunction() {
   	 	var str = "Visit Runoob!"; 
   		var n = str.search("Runoob");
   		document.getElementById("demo").innerHTML = n;
}
</script>

match（）方法
一个在字符串中执行查找匹配的RegExp方法，它返回一个数组或者在未匹配到时返回null。

与exec略有不同，首先是调用方式，math是由字符串调用，而exec是由RegexObj调用。

其次，如果表达式中有“g”标记，那么返回一个匹配的字符串数组，如果没有就会和exec返回的一样。下面这个demo就是有“g”。语法如下：str.match(regexp)

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
//结果： Quick Brown Fox Jumps

replace() 方法
一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。语法如下：

str.replace(regexp|substr,newSubStr|function[,flags])

var re = /(\w+)\s(\w+)/;
var str = "xiao  fan";
var result = str.replace(re, "$2, $1");
//结果：：“xiao, fan”

split（）方法

split(‘字符串的分割正则’,‘返回数组的最大成员数’)；返回分割后各部分组成的数组

 <script type="text/javascript">
	 var str = 'a,b , c,d';
	 var res = str.split(",");//以逗号来分割字符串
	 console.log(res);//["a", "b ", " c", "d"]
	 
	 var str1 = 'a,b , c,,d';
	 var res1 = str1.split(/,*/);//以0或多个逗号来分割字符串
	 console.log(res1);//["a", "b", " ", " ", "c", "d"]
	 
	 var str2 = 'a, b,c, d';
	 var res2 = str2.split(/, */);//以0或对个逗号空格来分割字符串
	 console.log(res2);//["a", "b", "c", "d"]
	 
	 var str3 = 'a, b,c, d';
	 var res3 = str3.split(/, */,2);//以0或对个逗号空格来分割字符串，同时限制返回数组中最多有两项
	 console.log(res3);//["a", "b"]
 </script>

DOM

什么是DOM
DOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型。也就是说，将整个文档看作是一个对象。而一个文档又是由很多节点组成的， 那么这些节点也可以被看作是一个个的对象。DOM里面的对象属于宿主对象，需要浏览器来作 为宿主。一旦离开了浏览器这个环境，那么该对象将不复存在。同样，上一章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是一个宿主对象。

DOM的作用如下：
1.浏览器提供的操纵HTML文档内容的应用程序接口
2.用于对文档进行动态操作，如增加文档内容，删除文档内容，修改文档内容等等

把文档表示为树

节点

—个文档是由大量的节点所构成的。而每一个节点都有一个叫做nodeType的属性，用于表明节 点的类型。不同的节点类型对应了不同的数值

节点类型与节点名称

节点名称	对应数值
兀素P点	Node.ELEMENT_NODE(1)
属性节点	Node.ATTRIBUTE_NODE ⑵
文本节点	Node.TEXT_NODE ⑶
CDATA节点	Node.CDATA_SECTION_NODE ⑷
实体引用名称节点	Node.ENTRY_REFERENCE_NODE(5)
实体名称节点	Node.ENTITY_NODE(6)
处理指令节点	Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点	Node.COMMENT_NODE(8)
文档节点	Node.DOCUMENT_NODE(9)
文档类型节点	Node.DOCUMENT_TYPE_NODE(10)
文档片段节点	Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点	Node.NOTATION_NODE(12)

不同的节点对应了不同的节点类型，我们可以通过nodeType属性来获取 到该节点的节点类型
nodeType属性可以和if配合使用，确保不会在错误的节点类型上执行错误的操作
除了获取节点类型以外，我们还可以通过nodeName属性来获取节点的名称，可以使用nodeValue来获取一个元素节点的文本值

获取节点

document.getElementById
语法：document.getElementById(元素ID)；
功能：通过元素ID获取节点

document.getElementsByName
语法：document.getElementsByName(元素name属性)
功能：通过元素的name属性获取节点

document.getElementsByTagName()
语法：document.getElementsByTagName(元素标签)
功能：通过元素名获取节点

节点操作

1、创建节点

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
		<p id="p2">我是P2</p>  
	</div>  
	
	window.onload = function () {  
		var textNode = document.createTextNode("<p>我是最新创建的节点</p>");  
		document.getElementById("box").appendChild(textNode);  
	}  
</span>

2、删除节点

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
		<p id="p2">我是P2</p>  
	</div>  

	window.onload = function () {  
		var div1 = document.getElementById("box");  
		div1.removeChild(document.getElementById("p2"));  
	}  
</span>

3、替换节点：

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
		<p id="p2">我是P2</p>  
	</div>  

	window.onload = function () {  
		var div1 = document.getElementById("box");  
		var span1 = document.createElement("span");  
		span1.textContent = "我是一个新建的span";  
		div1.replaceChild(span1,document.getElementById("p2"));  
	}  
</span>

4、插入节点：

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
	</div>  
	window.onload = function () {  
		var pNode1 = document.createElement("p");  
		pNode1.textContent = "insertBefore插入的节点";  
		var pNode2 = document.createElement("p");  
		pNode2.textContent = "appendChild插入的节点";  
		document.getElementById("box").appendChild(pNode2);  
		document.getElementById("box").insertBefore(pNode1,document.getEleme	ntById("p1"));  
	}
</span>

5、操作属性

获取属性getAttribute
语法：元素节点.getAttribute(元素属性名)
功能：获取元素节点中指定属性的属性值

设置属性setAttribute
语法：元素节点.setAttribute(属性名,属性值)
功能：创建或改变元素节点的属性

删除属性
语法：元素节点.removeAttribute(属性名)
功能：删除元素中指定属性

6、文本操作

insertData(offset,String)从offset指定的位置插入string
appendData(string)将string插入到文本节点的末尾处
deleteData(offset,count)从offset起删除count个字符
replaceData(off,count,string)从off将cuont个字符用string替换
splitData(offset)从offset起将文本节点分成两个节点
substring(offset,count)返回由offset起的count个节点

数据交换

Ajax

Ajax不是一种新的编程语言，而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。

XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

//在浏览器中创建对象
var xhr = new XMLHttpRequest();

XHR的用法

1、open()方法。
它接收3个参数：
（1）要发送的请求的类型(POST、GET等)
（2）请求的URL
（3）表示是否异步发送请求的布尔值

调用open()示例：

xhr.open("get", "index.jsp", false);

针对index.jsp的GET请求。URL相对于执行代码的当前页面；调用open()方法并不会真正发送请求，只是启动一个请求以备发送。

2、调用send()发送请求：

xhr.send(null);

send()接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。

通过检测readyState属性，可以确定请求/响应过程的当前活动阶段。

（1）0：未初始化。未调用open()方法
（2）1：启动。已经调用open()方法，未调用send()方法
（3）2：发送。已经调用send()方法，未接收到响应
（4）3：接收。已经接收到部分数据
（5）4：完成。已经接收到全部数据，可以在客户端使用
readyState属性的值发生变化时，都会触发一次readystatechange事件。在调用open()之前指定onreadystatechange事件处理程序才能确保浏览器兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) {
	if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
	alert(xhr.responseText);
	} else {
	alert("请求成功：" + xhr.status);
	}
	}
};
xhr.open("get", "index.jsp", true);
xhr.send(null);

在接收响应之前，可以取消异步请求：
xhr.abort();

HTTP头部信息
XHR对象提供了操作请求头部和响应头部信息的方法。
一般默认情况下，在发送XHR请求的同时，还会发送下列头部信息。
（1）Accept:浏览器能够处理的内容类型
（2）Accept-Charset:浏览器能够显示的字符集
（3）Accept-Encoding:浏览器能够处理的压缩编码
（4）Accept-Language:浏览器当前设置的语言
（5）Connection:浏览器与服务器之间连接的类型
（6）Cookie:当前页面设置的任何Cookie
（7）Host:发出请求的页面所在的域
（8）Referer:发出请求的页面的URL
（9）User-Aent:浏览器的用户代理字符串

使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用setRequestHeader()：

xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();

GET请求

get用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。
var url = "login.jsp";
// 添加参数
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化请求
xhr.open("get", url, false);

POST请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。
初始化请求：

xhr.open("post", "login.jsp", true); 
使用serialize()函数来创建一个字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var forms = document.getElementById("user-info");
xhr.send(serialize(forms));

JavaScript目前总体大概了解了这些，以后遇到的新内容还会陆续补充