javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式

- 事件

- 表单提交(掌握)

"onsubmit"

- 单击事件(掌握)

"onclick"

- 页面加载成功事件(掌握)

"onload"

- 焦点事件:(掌握)

- 获取焦点

"onfocus"

- 失去焦点

"onblur"

- 表单事件(了解)

- ondblclick 双击事件

- onreset; 重置

- onchange; 改变(熟练使用)

- 鼠标事件:(了解)

- onmouseover 悬停

- onmouseout 移出

- onmousedown 按下

- onmouseup 弹起

- onmousemove 移动

- 键盘事件:(了解)

- onkeydown 按下

- onkeyup 弹起

- onkeypress 按下并弹起

- DOM(文档对象模型):操作html文档

"html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点"

- html文档与dom树的关系：理解

- html里所有的标签、标签的属性、文本都会转换成dom树里的节点

- a.整个html文档抽象成的对象,叫作document 文档节点

- b.标签转换成的节点对象，叫作Element 元素节点

- c.标签属性转换成的节点对象，叫作Attribute 属性节点

- d.文本转换成的节点对象，叫作Text 文本节点

- 查询(获取元素对象)★★

- document.getElementById("id"); 获取一个元素对象

- document.getElementsByTagName("标签名"); 获取一种元素对象数组接收

- document.getElementsByClassName("class属性值"); 获取一类元素对象数组接收

- document.getElementsByName("name属性值"); 获取多个元素对象数组接收

- 元素(element)

- 方式1简单方法操作:★★

- 元素.innerHTML = "<h1>文本内容</h1>"; 添加

- 元素.innerHTML = ""; 删除

- 方式2扩展:了解

- 添加

- var ele = document.createElement("标签名"); 创建元素节点(创建一个标签)

"var ele = document.createElement("h1"); <h1></h1>"

- var text = document.createTextNode("值"); 创建文本节点(创建一个值)

"var text = document.createTextNode(""); "客""

- 元素节点.appendChild(文本节点); 给元素节点添加文本信息

"ele.appendChild(text); <h1>客</h1>"

- 元素.appendChild(子元素对象); 将元素节点追加到指定标签中

"将创建好的h1标签添加到页面的指定标签中"

- 删除

- 元素.remove(); 自杀

- 属性:(attribute)

- 方式1简单方法操作:★★

- 元素.属性名称; 获取指定属性的值

- 元素.属性名称 = "属性值"; 设置指定属性的值

- 方式2扩展:了解

- 查(获取):

- 元素.getAttribute("属性名称");

- 增:

- 元素.setAttribute("属性名称","属性值");

- 删:

- 元素.removeAttribute("属性名称");

- 引用数据类型(对象)

- 注意:string,number,boolen称为伪对象,可以直接使用相应的方法或属性

- Array:数组

- 语法:

- new Array(); 创建空数组

- new Array(3); 创建包含指定个数的数组

- new Array(ele1,ele2...); 创建包含指定元素的数组

- 特征:

- 数组长度可变

- 数组中可以存放任何类型的值

- 常用属性

- length 长度

- 常用方法

- join("分隔符"); 按指定的分隔符分割

- shift(); 删除并返回数组中的第一个元素

- unshift(); 向数组的开头添加一个或多个元素,并返回新数组的长度

- pop(); 删除并返回数组中的最后一个元素

- push(); 向数组的末尾添加一个或多个元素,返回新数组的长度

- sort(); 操作数组结构对数组进行排序

"//初始化设置元素的时候,排序不起作用的"

- reverse(); 颠倒数组中元素的顺序

- String

- 语法

- new String(); 返回一个object对象

- 常用属性

- length

- 常用方法

- substring(startindex,endindex);

- slice(startindex,endindex);

- charAt();

- split();

- Number

- 语法:

- new Number(); 返回一个object对象

- Boolean

- new Boolean(); 返回一个object对象

- Boolean(值); 将给定值转为Boolean类型

- Math

- 常用操作

- Math.round();

- Math.PI;

- Math.random();

- Date

- 语法

- new Date();

- 常用方法

- toLocaleString(); 转为字符串

- reg(正则)

- 1.编写正则表达式

- 格式: /^正则表达式$/

- 2.校验

- 正则表达式.test(); 返回boolean类型的值

- 全局函数

- parseInt(); 尝试转换为Int类型

- parseFloat(); 尝试转换为float类型

- String(); 强制转换为String类型

- Number(); 强制转换为number类型

- encodeURI(); 编码

- decodeURI(); 解码

- eval(); 将字符串转换称js可以执行的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<head>

<title>正则表达式,常用的正则表达式,js正则表达式,正则表达式数字,正则表达式空格</title>

table,td,th{

border-collapse:collapse;

font-size:14px;

}

table{

width:778px;

}

.code{

padding:2px;

border:1px #CCC solid;

background-color:#e5e5e5;

font-family:Fixedsys;

}

</style>

</head>

<body>

<h2>常用的正则表达式</h2>

常用正则表达式

正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。

用户名：/^[a-z0-9_-]{3,16}$/

密码：/^[a-z0-9_-]{6,18}$/

十六进制值：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/

电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

URL：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

IP 地址：/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

HTML 标签：/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/

Unicode编码中的汉字范围：/^[u4e00-u9fa5],{0,}$/

匹配中文字符的正则表达式： [\u4e00-\u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^\x00-\xff] 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式：\n\s*\r 评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> 评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^\s*|\s*$ 评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^\s]* 评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 评注：表单验证时很实用

匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7} 评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,} 评注：腾讯QQ号从10000开始

匹配中国大陆邮政编码：[1-9]\d{5}(?!\d) 评注：中国大陆邮政编码为6位数字

匹配身份证：\d{15}|\d{18} 评注：中国大陆的身份证为15位或18位

匹配ip地址：\d+\.\d+\.\d+\.\d+ 评注：提取ip地址时有用

匹配特定数字： ^[1-9]\d*$　　 //匹配正整数 ^-[1-9]\d*$ 　 //匹配负整数 ^-?[1-9]\d*$　　 //匹配整数 ^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0） ^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0） ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0） ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0） 评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串： ^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串 ^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串 ^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串 ^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

<h2>表达式全集</h2>

正则表达式有多种不同的风格。下表是在PCRE中元字符及其在正则表达式上下文中的行为的一个完整列表：

<tr>

</tr>

<tr>

<td>将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“<code>n</code>”匹配字符“<code>n</code>”。“<code>\n</code>”匹配一个换行符。序列“<code>\\</code>”匹配“<code>\</code>”而“<code>\(</code>”则匹配“<code>(</code>”。</td>

</tr>

<tr>

<td>匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“<code>\n</code>”或“<code>\r</code>”之后的位置。</td>

</tr>

<tr>

<td>匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“<code>\n</code>”或“<code>\r</code>”之前的位置。</td>

</tr>

<tr>

<td>匹配前面的子表达式零次或多次。例如，zo*能匹配“<code>z</code>”以及“<code>zoo</code>”。*等价于{0,}。</td>

</tr>

<tr>

<td>匹配前面的子表达式一次或多次。例如，“<code>zo+</code>”能匹配“<code>zo</code>”以及“<code>zoo</code>”，但不能匹配“<code>z</code>”。+等价于{1,}。</td>

</tr>

<tr>

<td>匹配前面的子表达式零次或一次。例如，“<code>do(es)?</code>”可以匹配“<code>do</code>”或“<code>does</code>”中的“<code>do</code>”。?等价于{0,1}。</td>

</tr>

<tr>

<td>n是一个非负整数。匹配确定的n次。例如，“<code>o{2}</code>”不能匹配“<code>Bob</code>”中的“<code>o</code>”，但是能匹配“<code>food</code>”中的两个o。</td>

</tr>

<tr>

<td>n是一个非负整数。至少匹配n次。例如，“<code>o{2,}</code>”不能匹配“<code>Bob</code>”中的“<code>o</code>”，但能匹配“<code>foooood</code>”中的所有o。“<code>o{1,}</code>”等价于“<code>o+</code>”。“<code>o{0,}</code>”则等价于“<code>o*</code>”。</td>

</tr>

<tr>

<td>m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“<code>o{1,3}</code>”将匹配“<code>fooooood</code>”中的前三个o。“<code>o{0,1}</code>”等价于“<code>o?</code>”。请注意在逗号和两个数之间不能有空格。</td>

</tr>

<tr>

<td>当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“<code>oooo</code>”，“<code>o+?</code>”将匹配单个“<code>o</code>”，而“<code>o+</code>”将匹配所有“<code>o</code>”。</td>

</tr>

<tr>

<td>匹配除“<code>\</code><code>n</code>”之外的任何单个字符。要匹配包括“<code>\</code><code>n</code>”在内的任何字符，请使用像“<code>[.\</code><code>n</code><code>]</code>”的模式。</td>

</tr>

<tr>

<th style="text-align:center;">(pattern)</th>

<td>匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“<code>$</code>”或“<code>$</code>”。</td>

</tr>

<tr>

<th style="text-align:center;">(?:pattern)</th>

<td>匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“<code>(|)</code>”来组合一个模式的各个部分是很有用。例如“<code>industr(?:y|ies)</code>”就是一个比“<code>industry|industries</code>”更简略的表达式。</td>

</tr>

<tr>

<th style="text-align:center;">(?=pattern)</th>

<td>正向预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“<code>Windows(?=95|98|NT|2000)</code>”能匹配“<code>Windows2000</code>”中的“<code>Windows</code>”，但不能匹配“<code>Windows3.1</code>”中的“<code>Windows</code>”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。</td>

</tr>

<tr>

<th style="text-align:center;">(?!pattern)</th>

<td>负向预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“<code>Windows(?!95|98|NT|2000)</code>”能匹配“<code>Windows3.1</code>”中的“<code>Windows</code>”，但不能匹配“<code>Windows2000</code>”中的“<code>Windows</code>”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始</td>

</tr>

<tr>

<td>匹配x或y。例如，“<code>z|food</code>”能匹配“<code>z</code>”或“<code>food</code>”。“<code>(z|f)ood</code>”则匹配“<code>zood</code>”或“<code>food</code>”。</td>

</tr>

<tr>

<td>字符集合。匹配所包含的任意一个字符。例如，“<code>[abc]</code>”可以匹配“<code>plain</code>”中的“<code>a</code>”。</td>

</tr>

<tr>

<td>负值字符集合。匹配未包含的任意字符。例如，“<code>[^abc]</code>”可以匹配“<code>plain</code>”中的“<code>p</code>”。</td>

</tr>

<tr>

<td>字符范围。匹配指定范围内的任意字符。例如，“<code>[a-z]</code>”可以匹配“<code>a</code>”到“<code>z</code>”范围内的任意小写字母字符。</td>

</tr>

<tr>

<td>负值字符范围。匹配任何不在指定范围内的任意字符。例如，“<code>[^a-z]</code>”可以匹配任何不在“<code>a</code>”到“<code>z</code>”范围内的任意字符。</td>

</tr>

<tr>

<td>匹配一个单词边界，也就是指单词和空格间的位置。例如，“<code>er\b</code>”可以匹配“<code>never</code>”中的“<code>er</code>”，但不能匹配“<code>verb</code>”中的“<code>er</code>”。</td>

</tr>

<tr>

<td>匹配非单词边界。“<code>er\B</code>”能匹配“<code>verb</code>”中的“<code>er</code>”，但不能匹配“<code>never</code>”中的“<code>er</code>”。</td>

</tr>

<tr>

<td>匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“<code>c</code>”字符。</td>

</tr>

<tr>

<td>匹配一个数字字符。等价于[0-9]。</td>

</tr>

<tr>

<td>匹配一个非数字字符。等价于[^0-9]。</td>

</tr>

<tr>

<td>匹配一个换页符。等价于\x0c和\cL。</td>

</tr>

<tr>

<td>匹配一个换行符。等价于\x0a和\cJ。</td>

</tr>

<tr>

<td>匹配一个回车符。等价于\x0d和\cM。</td>

</tr>

<tr>

<td>匹配任何空白字符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。</td>

</tr>

<tr>

<td>匹配任何非空白字符。等价于[^\f\n\r\t\v]。</td>

</tr>

<tr>

<td>匹配一个制表符。等价于\x09和\cI。</td>

</tr>

<tr>

<td>匹配一个垂直制表符。等价于\x0b和\cK。</td>

</tr>

<tr>

<td>匹配包括下划线的任何单词字符。等价于“<code>[A-Za-z0-9_]</code>”。</td>

</tr>

<tr>

<td>匹配任何非单词字符。等价于“<code>[^A-Za-z0-9_]</code>”。</td>

</tr>

<tr>

<td>匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“<code>\x41</code>”匹配“<code>A</code>”。“<code>\x041</code>”则等价于“<code>\x04&1</code>”。正则表达式中可以使用ASCII编码。.</td>

</tr>

<tr>

<td>匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“<code>(.)\1</code>”匹配两个连续的相同字符。</td>

</tr>

<tr>

<td>标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。</td>

</tr>

<tr>

<td>标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。</td>

</tr>

<tr>

<td>如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。</td>

</tr>

<tr>

<td>匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（?）。</td>

</tr>

</table>

以下是以PHP的语法所写的示例

验证字符串是否只含数字与英文，字符串长度并在4~16个字符之间

<DIV style="FONT-FAMILY: monospace"><PRE class=de1><?php

$str = 'a1234';

if (preg_match("^[a-zA-Z0-9]{4,16}$", $str)) {

echo "驗證成功";

} else {

echo "驗證失敗";

}

?>

</PRE></DIV></DIV>

简易的台湾身份证字号验证

<DIV class="php source-php" style="FONT-FAMILY: monospace"><PRE class=de1><?php

if (preg_match("/^\w[12]\d{8}$/", $str)) {

echo "驗證成功";

} else {

echo "驗證失敗";

}

?>

</PRE></DIV></DIV>

以下示例是用 Perl 语言写的，与上面的示例功能相同

<DIV class="perl source-perl" style="FONT-FAMILY: monospace"><PRE class=de1>print $str = "a1234" =~ m:^[a-zA-Z0-9]{4,16}$: ? "COMFIRM" : "FAILED";

</PRE></DIV></DIV>

<DIV class="perl source-perl" style="FONT-FAMILY: monospace"><PRE class=de1>print $str = "a1234" =~ m"^\w[12]\d{8}$" ? "COMFIRM" : "INVAILD";

</PRE></DIV></DIV>

<h2>如何写出高效率的正则表达式</h2>

如果纯粹是为了挑战自己的正则水平，用来实现一些特效（例如使用正则表达式计算质数、解线性方程），效率不是问题；如果所写的正则表达式只是为了满足一两次、几十次的运行，优化与否区别也不太大。但是，如果所写的正则表达式会百万次、千万次地运行，效率就是很大的问题了。我这里总结了几条提升正则表达式运行效率的经验（工作中学到的，看书学来的，自己的体会），贴在这里。如果您有其它的经验而这里没有提及，欢迎赐教。

为行文方便，先定义两个概念。

误匹配：指正则表达式所匹配的内容范围超出了所需要范围，有些文本明明不符合要求，但是被所写的正则式“击中了”。例如，如果使用\d{11}来匹配11位的手机号，\d{11}不单能匹配正确的手机号，它还会匹配98765432100这样的明显不是手机号的字符串。我们把这样的匹配称之为误匹配。

漏匹配：指正则表达式所匹配的内容所规定的范围太狭窄，有些文本确实是所需要的，但是所写的正则没有将这种情况囊括在内。例如，使用\d{18}来匹配18位的身份证号码，就会漏掉结尾是字母X的情况。 </LI></UL>

写出一条正则表达式，既可能只出现误匹配（条件写得极宽松，其范围大于目标文本），也可能只出现漏匹配（只描述了目标文本中多种情况种的一种），还可能既有误匹配又有漏匹配。例如，使用\w+\.com来匹配.com结尾的域名，既会误匹配abc_.com这样的字串（合法的域名中不含下划线，\w包含了下划线这种情况），又会漏掉ab-c.com这样的域名（合法域名中可以含中划线，但是\w不匹配中划线）。

精准的正则表达式意味着既无误匹配且无漏匹配。当然，现实中存在这样的情况：只能看到有限数量的文本，根据这些文本写规则，但是这些规则将会用到海量的文本中。这种情况下，尽可能地（如果不是完全地）消除误匹配以及漏匹配，并提升运行效率，就是我们的目标。本文所提出的经验，主要是针对这种情况。

掌握语法细节。正则表达式在各种语言中，其语法大致相同，细节各有千秋。明确所使用语言的正则的语法的细节，是写出正确、高效正则表达式的基础。例如，perl中与\w等效的匹配范围是[a-zA-Z0-9_]；perl正则式不支持肯定逆序环视中使用可变的重复（variable repetition inside lookbehind，例如(?<=.*)abc），但是.Net语法是支持这一特性的；又如，JavaScript连逆序环视（Lookbehind,如(?<=ab)c）都不支持，而perl和python是支持的。《精通正则表达式》第3章《正则表达式的特性和流派概览》明确地列出了各大派系正则的异同，这篇文章也简要地列出了几种常用语言、工具中正则的比较。对于具体使用者而言，至少应该详细了解正在使用的那种工作语言里正则的语法细节。

先粗后精，先加后减。使用正则表达式语法对于目标文本进行描述和界定，可以像画素描一样，先大致勾勒出框架，再逐步在局步实现细节。仍举刚才的手机号的例子，先界定\d{11}，总不会错；再细化为1[358]\d{9}，就向前迈了一大步（至于第二位是不是3、5、8，这里无意深究，只举这样一个例子，说明逐步细化的过程）。这样做的目的是先消除漏匹配（刚开始先尽可能多地匹配，做加法），然后再一点一点地消除误匹配（做减法）。这样有先有后，在考虑时才不易出错，从而向“不误不漏”这个目标迈进。

留有余地。所能看到的文本sample是有限的，而待匹配检验的文本是海量的，暂时不可见的。对于这样的情况，在写正则表达式时要跳出所能见到的文本的圈子，开拓思路，作出“战略性前瞻”。例如，经常收到这样的垃圾短信：“发*票”、“发#漂”。如果要写规则屏蔽这样烦人的垃圾短信，不但要能写出可以匹配当前文本的正则表达式 发[*#](?:票|漂)，还要能够想到 发.(?:票|漂|飘)之类可能出现的“变种”。这在具体的领域或许会有针对性的规则，不多言。这样做的目的是消除漏匹配，延长正则表达式的生命周期。

明确。具体说来，就是谨慎用点号这样的元字符，尽可能不用星号和加号这样的任意量词。只要能确定范围的，例如\w，就不要用点号；只要能够预测重复次数的，就不要用任意量词。例如，写析取twitter消息的脚本，假设一条消息的xml正文部分结构是…且正文中无尖括号，那么[^<]{1,480}这种写法的思路要好于.*，原因有二：一是使用[^<]，它保证了文本的范围不会超出下一个小于号所在的位置；二是明确长度范围，{1,480}，其依据是一条twitter消息大致能的字符长度范围。当然，480这个长度是否正确还可推敲，但是这种思路是值得借鉴的。说得狠一点，“滥用点号、星号和加号是不环保、不负责任的做法”。

不要让稻草压死骆驼。每使用一个普通括号()而不是非捕获型括号(?:…)，就会保留一部分内存等着你再次访问。这样的正则表达式、无限次地运行次数，无异于一根根稻草的堆加，终于能将骆驼压死。养成合理使用(?:…)括号的习惯。

宁简勿繁。将一条复杂的正则表达式拆分为两条或多条简单的正则表达式，编程难度会降低，运行效率会提升。例如用来消除行首和行尾空白字符的正则表达式s/^\s+|\s+$//g;，其运行效率理论上要低于s/^\s+//g; s/\s+$//g; 。这个例子出自《精通正则表达式》第五章，书中对它的评论是“它几乎总是最快的，而且显然最容易理解”。既快又容易理解，何乐而不为？工作中我们还有其它的理由要将C==(A|B)这样的正则表达式拆为A和B两条表达式分别执行。例如，虽然A和B这两种情况只要有一种能够击中所需要的文本模式就会成功匹配，但是如果只要有一条子表达式（例如A）会产生误匹配，那么不论其它的子表达式（例如B）效率如何之高，范围如何精准，C的总体精准度也会因A而受到影响。

巧妙定位。有时候，我们需要匹配的the，是作为单词的the（两边有空格），而不是作为单词一部分的t-h-e的有序排列（例如together中的the）。在适当的时候用上^，$，\b等等定位锚点，能有效提升找到成功匹配、淘汰不成功匹配的效率。 </LI></OL>

正则表达式： <A href="http://114.xixik.com/regex/">http://114.xixik.com/regex/</A>

HTML转义字符： <A href="http://114.xixik.com/character/">http://114.xixik.com/character/</A>

</div>

</body>

</html>

回顾:

css:

层叠样式表

作用:

渲染页面

提供工作效率,将html和样式分离

和html的整合

方式1:内联样式表

通过标签的style属性 <xxx style="..."/>

方式2:内部样式表

通过head的子标签Style子标签

选择器{

属性:值;

属性1:值1;

}

</style>

方式3:外部样式表

有一个独立css文件.后缀名:.css

在html中通过link标签导入

选择器:

id选择器

html元素有id属性且有值 <xx id="d1">

css中通过 # 导入 #d1{...}

类选择器

html元素有class属性且有值 <xx class="c1">

css中通过 . 导入 .c1{...}

元素选择器

css中通过标签名即可 xx{...}

属性选择器

html元素有一个属性且有值 <xx att="val1">

css中通过元素名[属性="值"]使用 xx[att="val1"]{...}

后代选择器

选择器后代选择器

锚伪类(了解)

//////////////////

字体文本背景列表分类(clear display:none block inline)

框模型:

一个元素外边有内边距边框外边距

顺序:上右下左

//////////////////////////////////////

javascript 脚本语言解释性基于对象事件驱动函数

js的组成:

ECMAScript(语法)

BOM(浏览器对象模型)

DOM(文档对象模型)

html和js的整合

方式1:内部编写js

方式2:

外部有一个独立的js文件后缀名:.js

在html中通过script的src属性导入

注意:

一旦使用了src属性,那么script标签体中的js代码将不再执行了.

变量:

var 变量名=初始化值;

数据类型:

原始类型(5种)

Undefined

Null

String 用引号引起来的内容

Number

Boolean

通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.

typeof 变量|值

引用类型

运算符:

关系运算符:

两边值都是字符串,比较ascii码

两边都是数字,和java一样

一边是数字,一遍是字符串形式的数字, 可以比较

一边是数字,一遍是普通字符串可以比较值永远是false

等性运算符

"66"==66 true

"666"===666 false

js的语句

if while for 和java一样

//////////////////

获取元素:

var obj=document.getElementById("id值");

获取元素的value属性

var val=document.getElementById("id值").value;

设置元素的value属性

document.getElementById("id值").value="sdfsdf";

获取元素的标签体

var ht=document.getElementById("id值").innerHTML;

设置元素的标签体

document.getElementById("id值").innerHTML="ssss";

定义函数:

方式1:function 函数名(参数列表){函数体}

方式2:

var 函数名=function(参数列表){函数体}

注意:

函数声明的时候不用声明返回值类型

参数列表上不要写参数类型

通过return结束方法和将值返回

事件:

onclick 单击

onsubmit 表单提交

onload 页面加载成功或者元素加载成功

事件和函数绑定

方式1:通过元素的事件属性

方式2:派发事件

document.getElementById("id值").onxxx=function(){...};

document.getElementById("id值").onxxx=函数名;

/////////////////////////////////

案例1-定时弹出广告

需求:

打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示.

技术分析:

定时器

定时器(BOM-window对象)

setInterval(code,毫秒数):周期执行

setTimeout(code,毫秒数):延迟多长事件后只执行一次.

清除定时器

clearInterval(id):

clearTimeout(id):

步骤分析:

1.确定事件

2.编写函数

a.获取元素

b.操作元素

////////////////////////

1.html页面,先把广告隐藏

2.页面加载成功事件 onload

3.编写函数

定时器:

操作元素:

document.getElementById("")

操作css属性

document.getElementById("id").style.属性="值"

属性:就是css中属性 css属性有"-" 例如:backgroud-color

若有"-" 只需要将"-"删除,后面第一个字母变大写即可

注意:

只要是window对象的属性和方法,可以把window省略

window.onload 等价于 onload

window.setInterval() 等价于 setInterval()

////////////////////

bom(浏览器对象模型)总结

所有的浏览器都有5个对象

window:窗口

location:定位信息 (地址栏)

history:历史

window对象详解:

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，

并为每个框架创建一个额外的 window 对象。

常用的属性:

通过window可以获取其他的四个对象

window.location 等价域 location

window.history 等价于 history

...

常用的方法

消息框

alert("...."):警告框

confirm("你确定要删除吗?"):确定框返回值:boolean

prompt("请输入您的姓名"):输入框返回值:你输入的内容

定时器

设置定时器

setInterval(code,毫秒数):周期执行

setTimeout(code,毫秒数):延迟多长事件后只执行一次.

例如:

setInterval(showAd,4000);

serInterval("showAd()",4000);

清除定时器

clearInterval(id):

clearTimeout(id):

打开和关闭

open(url):打开

close():关闭

/////////////////////////

location:定位信息

常用属性:

href:获取或者设置当前页面的url(定位信息)

location.href; 获取url

location.href="...";设置url 相当于 a标签

//////////////////////

history:历史

back();后退

forward():向前

★go(int)

go(-1) 相当于 back()

go(1) 相当于 forward()

//////////////////////////////////////

案例2-表单校验plus

需求:

提示信息不用弹出框,将信息追加在文本框后面

技术分析:

确定事件表单提交的时候 onsubmit

文本框失去焦点的时候 onblur

编写函数

获取元素

document.getElementById("id值");

操作元素(获取元素的值,操作标签体,操作标签value属性)

/////////////////

步骤分析:

1.表单

2.表单提交的时候确定事件 onsubmit()

3.校验用户名和密码

4.获取用户名和密码的对象及值

5.判断内容,当为空的时候,获取响应的span元素

往span元素中显示错误信息

////////////////////////

注意:

在方法中(function()) this指代的是当前的元素(当前dom对象)

例如:

方法:

function loseFocus(obj){

alert(obj);

}

/////////////////////////////

事件总结:

常见的事件:

焦点事件:★

onfocus

onblur

表单事件:★

onsubmit

onchange 改变

页面加载事件:★

onload

鼠标事件(掌握)

onclick

鼠标事件(了解)

ondblclick:双击

onmousedown:按下

onmouserup:弹起

onmousemove:移动

onmouserover:悬停

onmouserout:移出

键盘事件(理解)

onkeydown:按下

onkeyup:弹起

onkeypress:按住

////////////

绑定事件:

方式1:

元素的事件属性

方式2:

派发事件

///////////////////

了解

阻止默认事件的发生

阻止事件传播

/////////////////

案例3-隔行换色

需求:

一个表格,隔一行换一个色

技术分析:

事件:onload

获取元素:dom操作

///////////////

获取元素:

document.getElementById("id"):通过id获取一个元素

document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组

Array:

常用属性:

length:数组的长度

////////////////////////

步骤分析:

1.html表格一加载的时候确定事件 onload

2.编写函数

a.获取元素(所有的tr元素)

b.操作(若当前行是偶数的话加一个样式,若是奇数的话,加另一个样式)

////////

//页面加载成功

onload=function(){

//1.获取所有的tr

var arr=document.getElementsByTagName("tr");

//alert(arr);

//alert(arr.length);

//2.判断奇偶数添加不同的样式遍历数组

for(var i=1;i<arr.length;i++){

if(i%2==0){

arr[i].style.backgroundColor="#FFFFCC";

}else{

arr[i].style.backgroundColor="#BCD68D";

}

//////////////////////////

案例4:全选或者全不选

步骤分析:

1.确定事件最上面那个复选框的单击事件 onclick

2.编写函数:让所有的复选框和最上面的复选框状态保持一致

a.获取最上面这个复选框选中状态通过checkbox的checked属性即可

b.获取其他的复选框,设置他们的checked属性即可

可以通过以下两种方案获取元素

document.getElementsByClassName():需要给下面所有的复选框添加class属性

document.getElementsByName():需要给下面所有的复选框添加name属性

//////////////////////////////////

dom(文档对象模型)

当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)

节点(Node)

文档节点 document

元素节点 element

属性节点 attribute

文本节点 text

获取节点:

通过document可以获取其他节点:

常用方法:

document.getElementById("id值"):获取一个特定的元素

document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)

document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)

document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)

设置获取获取节点的value属性

dom对象.value;获取

dom对象.value="";设置

设置或者获取节点的标签体

dom对象.innerHTML;获取

dom对象.innerHTML="";设置

获取或者设置style属性

dom对象.style.属性;获取

dom对象.style.属性="";设置

获取或者设置属性

dom对象.属性

/////////////////////////

对于htmldom的操作若在js或者htmldom 查找不到去查找xml dom

关于文档的操作在 xml dom 的document中

关于元素的操作在 xml dom 的element中

appendChild(dom对象):在一个元素下添加孩子

//////////////////////////////////////

案例5-左右选中.

需求:

技术分析:

1.确定事件,按钮的单击事件

2.编写函数:

点击移动单|多个的:

a.获取左边选中的选项 select对象.options--数组

遍历数组判断是否选中 option对象.selected

b.将其追加到右边的下拉选中

rightSelect对象.appendChild(option);

点击移动所有的

a.获取左边的所有的选项

b.一个个的追加过去

///////////////////////

案例6-省市联动

需求:

选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中

技术分析:

数组:

////////////////////////

数组:

语法:

new Array();//长度为0

new Array(size);//指定长度的

new Array(e1,e2..);//指定元素

非官方

var arr4=["aa","bb"];

常用属性:

length

注意:

数组是可变的

数组可以存放任意值

常用方法:(了解)

存放值:对内容的操作

pop():弹最后一个

push():插入到最后

shift():删除第一个

unshift():插入到首位

打印数组:

join(分隔符):将数组里的元素按照指定的分隔符打印

拼接数组:

concat():连接两个或更多的数组，并返回结果。

对结构的操作:

sort();排序

reverse();反转

////////////////////////

步骤分析:

1.省的下拉选的选项中添加value属性当成数组的索引

2.初始化市

3.选择省的时候,onchange事件

4.编写函数,

通过获取的索引获取对象的市的数组 this.value

遍历数组,将数组里面的每个值组装option 添加到select中即可

//////////////////////////////

引用类型总结:

原始类型中的String Number Boolean都是伪对象,可以调用相应的方法

Array:数组

String:

语法:

new String(值|变量);//返回一个对象

String(值|变量);//返回原始类型

常用方法:

substring(start,end):[start,end)

substr(start,size):从索引为指定的值开始向后截取几个

charAt(index):返回在指定位置的字符。

indexOf(""):返回字符串所在索引

replace():替换

split():切割

常用属性:length

Boolean:

语法:

new Boolean(值|变量);

Boolean(值|变量);

非0数字非空字符串非空对象转成true

Number

语法:

new Number(值|变量);

Number(值|变量);

注意:

null====>0

fale====>0 true====>1

字符串的数字=====>对应的数字

其他的NaN

Date:

new Date();

常用方法:

toLocalString()

RegExp:正则表达式

语法:

直接量语法 /正则表达式/参数

直接量语法 /正则表达式/

new RegExp("正则表达式")

new RegExp("正则表达式","参数")

参数:

i:忽略大小写

g:全局

常用方法:

test() :返回值为boolean

Math:

Math.常量|方法

Math.PI

Math.random() [0,1)

全局:

★

decodeURI() 解码某个编码的 URI。

encodeURI() 把字符串编码为 URI。

Number():强制转换成数字

String():转成字符串

parseInt():尝试转换成整数

parseFloat():尝试转换成小数

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。

//////////////////////////////////////////////////////////////////////

上午回顾:

BOM(浏览器对象模型)

window对象:窗口

注意:

若是window对象的属性和方法,调用的时候可以省略window

常用属性:

通过window可以获取其他的四个对象

window.location 等价于 location

常用方法:

消息框

alert() 警告框

confirm() 确认框返回值:boolean

prompt() 输入框返回值:输入的内容

定时器

设置

setInterval(code,毫秒数):循环

setTimeout(code,毫秒数):延迟只执行一次

清除

clearInterval(id):

clearTimeout(id):

打开和关闭

open(url)

close()

location对象:定位信息地址栏

常用属性:

href:获取或者设置当前页面的url

location.href:获取

location.href="url":设置相当于超链接

history对象:操作历史

常用方法:

go()

////////////////////////////

事件:

焦点:★

onfocus:获取焦点

onblur:失去焦点

表单事件:★

onsubmit: form表单里的

onchange:改变(下拉选)

页面或者对象加载:★

onload:

鼠标:★

onclick:单击

键盘:

onkeyup:

dom(★)

获取元素的方法(4个) document

操作元素的属性 dom对象.属性;

引用类型:

array

string

substring

全局:

编码2个

强制转化 Number String

尝试 parseXxx

eval() 解析字符串形式的js代码

Math random()

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,937评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,503评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,712评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,668评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,677评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,601评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,975评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,637评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,881评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,621评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,710评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,387评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,971评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,947评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,189评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,805评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,449评论 2赞 342

javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式

推荐阅读更多精彩内容