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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>正则表达式,常用的正则表达式,js正则表达式,正则表达式数字,正则表达式空格</title>
<meta name="Description" content="正则表达式（英文：Regular Expression）在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Language" content="zh-CN" />
<base target="_blank" />
<link href="http://static.xixik.com/common/css/style.css?t=20091210.css" rel="stylesheet" type="text/css" />
<link href="http://static.xixik.com/common/css/container.css?t=20091210.css" rel="stylesheet" type="text/css" />
<style type="text/css" rel="stylesheet" media="screen" />
/* Copyright (c) 2006-2009 114.xixik.com All rights reserved. */
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> <div class="commonContainer">
<div class="noborder">
<div class="mainContainer">
<h2>常用的正则表达式</h2> <P><STRONG>常用正则表达式</STRONG></P>
<P>正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。</P>
<P>用户名：/^[a-z0-9_-]{3,16}$/</P>
<P>密码：/^[a-z0-9_-]{6,18}$/</P>
<P>十六进制值：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/</P>
<P>电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/</P>
<P>URL：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/</P>
<P>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]?)$/</P>
<P>HTML 标签：/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/</P>
<P>Unicode编码中的汉字范围：/^[u4e00-u9fa5],{0,}$/</P>
<P>匹配中文字符的正则表达式： [\u4e00-\u9fa5]<BR>评注：匹配中文还真是个头疼的事，有了这个表达式就好办了</P>
<P>匹配双字节字符(包括汉字在内)：[^\x00-\xff]<BR>评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）</P>
<P>匹配空白行的正则表达式：\n\s*\r<BR>评注：可以用来删除空白行</P>
<P>匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /><BR>评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力</P>
<P>匹配首尾空白字符的正则表达式：^\s*|\s*$<BR>评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式</P>
<P>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*<BR>评注：表单验证时很实用</P>
<P>匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*<BR>评注：网上流传的版本功能很有限，上面这个基本可以满足需求</P>
<P>匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$<BR>评注：表单验证时很实用</P>
<P>匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}<BR>评注：匹配形式如 0511-4405222 或 021-87888822</P>
<P>匹配腾讯QQ号：[1-9][0-9]{4,}<BR>评注：腾讯QQ号从10000开始</P>
<P>匹配中国大陆邮政编码：[1-9]\d{5}(?!\d)<BR>评注：中国大陆邮政编码为6位数字</P>
<P>匹配身份证：\d{15}|\d{18}<BR>评注：中国大陆的身份证为15位或18位</P>
<P>匹配ip地址：\d+\.\d+\.\d+\.\d+<BR>评注：提取ip地址时有用</P>
<P>匹配特定数字：<BR>^[1-9]\d*$ //匹配正整数<BR>^-[1-9]\d*$ //匹配负整数<BR>^-?[1-9]\d*$ //匹配整数<BR>^[1-9]\d*|0$ //匹配非负整数（正整数 + 0）<BR>^-[1-9]\d*|0$ //匹配非正整数（负整数 + 0）<BR>^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数<BR>^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数<BR>^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮点数<BR>^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非负浮点数（正浮点数 + 0）<BR>^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮点数（负浮点数 + 0）<BR>评注：处理大量数据时有用，具体应用时注意修正</P>
<P>匹配特定字符串：<BR>^[A-Za-z]+$ //匹配由26个英文字母组成的字符串<BR>^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串<BR>^[a-z]+$ //匹配由26个英文字母的小写组成的字符串<BR>^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串<BR>^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串</P> <h2>表达式全集</h2> <P>正则表达式有多种不同的风格。下表是在PCRE中元字符及其在正则表达式上下文中的行为的一个完整列表：</P> <table width="778" borderColor=#cccccc cellSpacing=1 cellPadding=2 border=1>
<tr>
<th>字符</th>
<th>描述</th>
</tr>
<tr>
<th style="text-align:center;">\</th>
<td>将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“<code>n</code>”匹配字符“<code>n</code>”。“<code>\n</code>”匹配一个换行符。序列“<code>\\</code>”匹配“<code>\</code>”而“<code>\(</code>”则匹配“<code>(</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">^</th>
<td>匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“<code>\n</code>”或“<code>\r</code>”之后的位置。</td>
</tr>
<tr>
<th style="text-align:center;">$</th>
<td>匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“<code>\n</code>”或“<code>\r</code>”之前的位置。</td>
</tr>
<tr>
<th style="text-align:center;">*</th>
<td>匹配前面的子表达式零次或多次。例如，zo*能匹配“<code>z</code>”以及“<code>zoo</code>”。*等价于{0,}。</td>
</tr>
<tr>
<th style="text-align:center;">+</th>
<td>匹配前面的子表达式一次或多次。例如，“<code>zo+</code>”能匹配“<code>zo</code>”以及“<code>zoo</code>”，但不能匹配“<code>z</code>”。+等价于{1,}。</td>
</tr>
<tr>
<th style="text-align:center;">?</th>
<td>匹配前面的子表达式零次或一次。例如，“<code>do(es)?</code>”可以匹配“<code>do</code>”或“<code>does</code>”中的“<code>do</code>”。?等价于{0,1}。</td>
</tr>
<tr>
<th style="text-align:center;">{<span style="font-family:Times New Roman; font-style:italic;">n</span>}</th>
<td><span style="font-family:Times New Roman; font-style:italic;">n</span>是一个非负整数。匹配确定的<span style="font-family:Times New Roman; font-style:italic;">n</span>次。例如，“<code>o{2}</code>”不能匹配“<code>Bob</code>”中的“<code>o</code>”，但是能匹配“<code>food</code>”中的两个o。</td>
</tr>
<tr>
<th style="text-align:center;">{<span style="font-family:Times New Roman; font-style:italic;">n</span>,}</th>
<td><span style="font-family:Times New Roman; font-style:italic;">n</span>是一个非负整数。至少匹配<span style="font-family:Times New Roman; font-style:italic;">n</span>次。例如，“<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>
<th style="text-align:center;">{<span style="font-family:Times New Roman; font-style:italic;">n</span>,<span style="font-family:Times New Roman; font-style:italic;">m</span>}</th>
<td><span style="font-family:Times New Roman; font-style:italic;">m</span>和<span style="font-family:Times New Roman; font-style:italic;">n</span>均为非负整数，其中<span style="font-family:Times New Roman; font-style:italic;">n</span><=<span style="font-family:Times New Roman; font-style:italic;">m</span>。最少匹配<span style="font-family:Times New Roman; font-style:italic;">n</span>次且最多匹配<span style="font-family:Times New Roman; font-style:italic;">m</span>次。例如，“<code>o{1,3}</code>”将匹配“<code>fooooood</code>”中的前三个o。“<code>o{0,1}</code>”等价于“<code>o?</code>”。请注意在逗号和两个数之间不能有空格。</td>
</tr>
<tr>
<th style="text-align:center;">?</th>
<td>当该字符紧跟在任何一个其他限制符（*,+,?，{<span style="font-family:Times New Roman; font-style:italic;">n</span>}，{<span style="font-family:Times New Roman; font-style:italic;">n</span>,}，{<span style="font-family:Times New Roman; font-style:italic;">n</span>,<span style="font-family:Times New Roman; font-style:italic;">m</span>}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“<code>oooo</code>”，“<code>o+?</code>”将匹配单个“<code>o</code>”，而“<code>o+</code>”将匹配所有“<code>o</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">.</th>
<td>匹配除“<code>\</code><span style="font-family:Times New Roman; font-style:italic;"><code>n</code></span>”之外的任何单个字符。要匹配包括“<code>\</code><span style="font-family:Times New Roman; font-style:italic;"><code>n</code></span>”在内的任何字符，请使用像“<code>[.\</code><span style="font-family:Times New Roman; font-style:italic;"><code>n</code></span><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>
<th style="text-align:center;">x|y</th>
<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>
<th style="text-align:center;">[xyz]</th>
<td>字符集合。匹配所包含的任意一个字符。例如，“<code>[abc]</code>”可以匹配“<code>plain</code>”中的“<code>a</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">[^xyz]</th>
<td>负值字符集合。匹配未包含的任意字符。例如，“<code>[^abc]</code>”可以匹配“<code>plain</code>”中的“<code>p</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">[a-z]</th>
<td>字符范围。匹配指定范围内的任意字符。例如，“<code>[a-z]</code>”可以匹配“<code>a</code>”到“<code>z</code>”范围内的任意小写字母字符。</td>
</tr>
<tr>
<th style="text-align:center;">[^a-z]</th>
<td>负值字符范围。匹配任何不在指定范围内的任意字符。例如，“<code>[^a-z]</code>”可以匹配任何不在“<code>a</code>”到“<code>z</code>”范围内的任意字符。</td>
</tr>
<tr>
<th style="text-align:center;">\b</th>
<td>匹配一个单词边界，也就是指单词和空格间的位置。例如，“<code>er\b</code>”可以匹配“<code>never</code>”中的“<code>er</code>”，但不能匹配“<code>verb</code>”中的“<code>er</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">\B</th>
<td>匹配非单词边界。“<code>er\B</code>”能匹配“<code>verb</code>”中的“<code>er</code>”，但不能匹配“<code>never</code>”中的“<code>er</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">\cx</th>
<td>匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“<code>c</code>”字符。</td>
</tr>
<tr>
<th style="text-align:center;">\d</th>
<td>匹配一个数字字符。等价于[0-9]。</td>
</tr>
<tr>
<th style="text-align:center;">\D</th>
<td>匹配一个非数字字符。等价于[^0-9]。</td>
</tr>
<tr>
<th style="text-align:center;">\f</th>
<td>匹配一个换页符。等价于\x0c和\cL。</td>
</tr>
<tr>
<th style="text-align:center;">\n</th>
<td>匹配一个换行符。等价于\x0a和\cJ。</td>
</tr>
<tr>
<th style="text-align:center;">\r</th>
<td>匹配一个回车符。等价于\x0d和\cM。</td>
</tr>
<tr>
<th style="text-align:center;">\s</th>
<td>匹配任何空白字符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。</td>
</tr>
<tr>
<th style="text-align:center;">\S</th>
<td>匹配任何非空白字符。等价于[^\f\n\r\t\v]。</td>
</tr>
<tr>
<th style="text-align:center;">\t</th>
<td>匹配一个制表符。等价于\x09和\cI。</td>
</tr>
<tr>
<th style="text-align:center;">\v</th>
<td>匹配一个垂直制表符。等价于\x0b和\cK。</td>
</tr>
<tr>
<th style="text-align:center;">\w</th>
<td>匹配包括下划线的任何单词字符。等价于“<code>[A-Za-z0-9_]</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">\W</th>
<td>匹配任何非单词字符。等价于“<code>[^A-Za-z0-9_]</code>”。</td>
</tr>
<tr>
<th style="text-align:center;">\x<span style="font-family:Times New Roman; font-style:italic;">n</span></th>
<td>匹配<span style="font-family:Times New Roman; font-style:italic;">n</span>，其中<span style="font-family:Times New Roman; font-style:italic;">n</span>为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“<code>\x41</code>”匹配“<code>A</code>”。“<code>\x041</code>”则等价于“<code>\x04&1</code>”。正则表达式中可以使用ASCII编码。.</td>
</tr>
<tr>
<th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">num</span></th>
<td>匹配<span style="font-family:Times New Roman; font-style:italic;">num</span>，其中<span style="font-family:Times New Roman; font-style:italic;">num</span>是一个正整数。对所获取的匹配的引用。例如，“<code>(.)\1</code>”匹配两个连续的相同字符。</td>
</tr>
<tr>
<th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">n</span></th>
<td>标识一个八进制转义值或一个向后引用。如果\<span style="font-family:Times New Roman; font-style:italic;">n</span>之前至少<span style="font-family:Times New Roman; font-style:italic;">n</span>个获取的子表达式，则<span style="font-family:Times New Roman; font-style:italic;">n</span>为向后引用。否则，如果<span style="font-family:Times New Roman; font-style:italic;">n</span>为八进制数字（0-7），则<span style="font-family:Times New Roman; font-style:italic;">n</span>为一个八进制转义值。</td>
</tr>
<tr>
<th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">nm</span></th>
<td>标识一个八进制转义值或一个向后引用。如果\<span style="font-family:Times New Roman; font-style:italic;">nm</span>之前至少有<span style="font-family:Times New Roman; font-style:italic;">nm</span>个获得子表达式，则<span style="font-family:Times New Roman; font-style:italic;">nm</span>为向后引用。如果\<span style="font-family:Times New Roman; font-style:italic;">nm</span>之前至少有<span style="font-family:Times New Roman; font-style:italic;">n</span>个获取，则<span style="font-family:Times New Roman; font-style:italic;">n</span>为一个后跟文字<span style="font-family:Times New Roman; font-style:italic;">m</span>的向后引用。如果前面的条件都不满足，若<span style="font-family:Times New Roman; font-style:italic;">n</span>和<span style="font-family:Times New Roman; font-style:italic;">m</span>均为八进制数字（0-7），则\<span style="font-family:Times New Roman; font-style:italic;">nm</span>将匹配八进制转义值<span style="font-family:Times New Roman; font-style:italic;">nm</span>。</td>
</tr>
<tr>
<th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">nml</span></th>
<td>如果<span style="font-family:Times New Roman; font-style:italic;">n</span>为八进制数字（0-3），且<span style="font-family:Times New Roman; font-style:italic;">m和l</span>均为八进制数字（0-7），则匹配八进制转义值<span style="font-family:Times New Roman; font-style:italic;">nm</span>l。</td>
</tr>
<tr>
<th style="text-align:center;">\u<span style="font-family:Times New Roman; font-style:italic;">n</span></th>
<td>匹配<span style="font-family:Times New Roman; font-style:italic;">n</span>，其中<span style="font-family:Times New Roman; font-style:italic;">n</span>是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（?）。</td>
</tr>
</table> <p>以下是以PHP的语法所写的示例 </p> <p>验证字符串是否只含数字与英文，字符串长度并在4~16个字符之间 </p>
<DIV dir=ltr style="TEXT-ALIGN: left">
<DIV style="FONT-FAMILY: monospace"><PRE class=de1><SPAN class=kw2><STRONG><?php</STRONG></SPAN>
<SPAN class=re0><FONT color=#000088>$str</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>=</FONT></SPAN> <SPAN class=st_h><FONT color=#0000ff>'a1234'</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
<SPAN class=kw1><FONT color=#b1b100>if</FONT></SPAN> <SPAN class=br0><FONT color=#009900>(</FONT></SPAN><SPAN class=kw3><FONT color=#990000>preg_match</FONT></SPAN><SPAN class=br0><FONT color=#009900>(</FONT></SPAN><SPAN class=st0><FONT color=#0000ff>"^[a-zA-Z0-9]{4,16}$"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>,</FONT></SPAN> <SPAN class=re0><FONT color=#000088>$str</FONT></SPAN><FONT color=#009900><SPAN class=br0>)</SPAN><SPAN class=br0>)</SPAN></FONT> <SPAN class=br0><FONT color=#009900>{</FONT></SPAN>
<SPAN class=kw1><FONT color=#b1b100>echo</FONT></SPAN> <SPAN class=st0><FONT color=#0000ff>"驗證成功"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
<SPAN class=br0><FONT color=#009900>}</FONT></SPAN> <SPAN class=kw1><FONT color=#b1b100>else</FONT></SPAN> <SPAN class=br0><FONT color=#009900>{</FONT></SPAN>
<SPAN class=kw1><FONT color=#b1b100>echo</FONT></SPAN> <SPAN class=st0><FONT color=#0000ff>"驗證失敗"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
<SPAN class=br0><FONT color=#009900>}</FONT></SPAN>
<SPAN class=sy1><STRONG>?></STRONG></SPAN>
</PRE></DIV></DIV> <p>简易的台湾身份证字号验证 </p>
<DIV class=mw-geshi dir=ltr style="TEXT-ALIGN: left">
<DIV class="php source-php" style="FONT-FAMILY: monospace"><PRE class=de1><SPAN class=kw2><STRONG><?php</STRONG></SPAN>
<SPAN class=re0><FONT color=#000088>$str</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>=</FONT></SPAN> <SPAN class=st_h><FONT color=#0000ff>'a1234'</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
<SPAN class=kw1><FONT color=#b1b100>if</FONT></SPAN> <SPAN class=br0><FONT color=#009900>(</FONT></SPAN><SPAN class=kw3><FONT color=#990000>preg_match</FONT></SPAN><SPAN class=br0><FONT color=#009900>(</FONT></SPAN><SPAN class=st0><FONT color=#0000ff>"/^\w[12]\d{8}$/"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>,</FONT></SPAN> <SPAN class=re0><FONT color=#000088>$str</FONT></SPAN><FONT color=#009900><SPAN class=br0>)</SPAN><SPAN class=br0>)</SPAN></FONT> <SPAN class=br0><FONT color=#009900>{</FONT></SPAN>
<SPAN class=kw1><FONT color=#b1b100>echo</FONT></SPAN> <SPAN class=st0><FONT color=#0000ff>"驗證成功"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
<SPAN class=br0><FONT color=#009900>}</FONT></SPAN> <SPAN class=kw1><FONT color=#b1b100>else</FONT></SPAN> <SPAN class=br0><FONT color=#009900>{</FONT></SPAN>
<SPAN class=kw1><FONT color=#b1b100>echo</FONT></SPAN> <SPAN class=st0><FONT color=#0000ff>"驗證失敗"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
<SPAN class=br0><FONT color=#009900>}</FONT></SPAN>
<SPAN class=sy1><STRONG>?></STRONG></SPAN>
</PRE></DIV></DIV> <p>以下示例是用 Perl 语言写的，与上面的示例功能相同 </p>
<DIV class=mw-geshi dir=ltr style="TEXT-ALIGN: left">
<DIV class="perl source-perl" style="FONT-FAMILY: monospace"><PRE class=de1><SPAN class=kw3><FONT color=#000066>print</FONT></SPAN> <SPAN class=re0><FONT color=#0000ff>$str</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>=</FONT></SPAN> <SPAN class=st0><FONT color=#ff0000>"a1234"</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>=~</FONT></SPAN> <SPAN class=kw3><FONT color=#000066>m</FONT></SPAN><SPAN class=sy0><FONT color=#339933>:^</FONT></SPAN><SPAN class=br0><FONT color=#009900>[</FONT></SPAN>a<SPAN class=sy0><FONT color=#339933>-</FONT></SPAN>zA<SPAN class=sy0><FONT color=#339933>-</FONT></SPAN>Z0<SPAN class=sy0><FONT color=#339933>-</FONT></SPAN><SPAN class=nu0><FONT color=#cc66cc>9</FONT></SPAN><FONT color=#009900><SPAN class=br0>]</SPAN><SPAN class=br0>{</SPAN></FONT><SPAN class=nu0><FONT color=#cc66cc>4</FONT></SPAN><SPAN class=sy0><FONT color=#339933>,</FONT></SPAN><SPAN class=nu0><FONT color=#cc66cc>16</FONT></SPAN><SPAN class=br0><FONT color=#009900>}</FONT></SPAN><SPAN class=co5><FONT color=#0000ff>$:</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>?</FONT></SPAN> <SPAN class=st0><FONT color=#ff0000>"COMFIRM"</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>:</FONT></SPAN> <SPAN class=st0><FONT color=#ff0000>"FAILED"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
</PRE></DIV></DIV>
<DIV class=mw-geshi dir=ltr style="TEXT-ALIGN: left">
<DIV class="perl source-perl" style="FONT-FAMILY: monospace"><PRE class=de1><SPAN class=kw3><FONT color=#000066>print</FONT></SPAN> <SPAN class=re0><FONT color=#0000ff>$str</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>=</FONT></SPAN> <SPAN class=st0><FONT color=#ff0000>"a1234"</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>=~</FONT></SPAN> <SPAN class=kw3><FONT color=#000066>m</FONT></SPAN><SPAN class=st0><FONT color=#ff0000>"^</FONT><SPAN class=es0><STRONG><FONT color=#000099>\w</FONT></STRONG></SPAN><FONT color=#ff0000>[12]</FONT><SPAN class=es0><STRONG><FONT color=#000099>\d</FONT></STRONG></SPAN><FONT color=#ff0000>{8}$"</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>?</FONT></SPAN> <SPAN class=st0><FONT color=#ff0000>"COMFIRM"</FONT></SPAN> <SPAN class=sy0><FONT color=#339933>:</FONT></SPAN> <SPAN class=st0><FONT color=#ff0000>"INVAILD"</FONT></SPAN><SPAN class=sy0><FONT color=#339933>;</FONT></SPAN>
</PRE></DIV></DIV> <h2>如何写出高效率的正则表达式</h2> <P>如果纯粹是为了挑战自己的正则水平，用来实现一些特效（例如使用正则表达式计算质数、解线性方程），效率不是问题；如果所写的正则表达式只是为了满足一两次、几十次的运行，优化与否区别也不太大。但是，如果所写的正则表达式会百万次、千万次地运行，效率就是很大的问题了。我这里总结了几条提升正则表达式运行效率的经验（工作中学到的，看书学来的，自己的体会），贴在这里。如果您有其它的经验而这里没有提及，欢迎赐教。</P>
<P>为行文方便，先定义两个概念。</P> <p><B>误匹配</B>：指正则表达式所匹配的内容范围超出了所需要范围，有些文本明明不符合要求，但是被所写的正则式“击中了”。例如，如果使用<FONT color=#3366ff>\d{11}</FONT>来匹配11位的手机号，<FONT color=#3366ff>\d{11}</FONT>不单能匹配正确的手机号，它还会匹配<FONT color=#cc33cc>98765432100</FONT>这样的明显不是手机号的字符串。我们把这样的匹配称之为误匹配。
<p><B>漏匹配</B>：指正则表达式所匹配的内容所规定的范围太狭窄，有些文本确实是所需要的，但是所写的正则没有将这种情况囊括在内。例如，使用<FONT color=#3366ff>\d{18}</FONT>来匹配18位的身份证号码，就会漏掉结尾是字母X的情况。 </LI></UL>
<P>写出一条正则表达式，既可能<B>只出现</B>误匹配（条件写得极宽松，其范围大于目标文本），也可能<B>只出现</B>漏匹配（只描述了目标文本中多种情况种的一种），还可能<B>既有误匹配又有漏匹配</B>。例如，使用<FONT color=#3366ff>\w+\.com</FONT>来匹配.com结尾的域名，既会误匹配<FONT color=#cc33cc>abc_.com</FONT>这样的字串（合法的域名中不含下划线，<FONT color=#3366ff>\w</FONT>包含了下划线这种情况），又会漏掉<FONT color=#cc33cc>ab-c.com</FONT>这样的域名（合法域名中可以含中划线，但是<FONT color=#3366ff>\w</FONT>不匹配中划线）。</P>
<P>精准的正则表达式意味着既无误匹配且无漏匹配。当然，现实中存在这样的情况：只能看到有限数量的文本，根据这些文本写规则，但是这些规则将会用到海量的文本中。这种情况下，尽可能地（如果不是完全地）消除误匹配以及漏匹配，并提升运行效率，就是我们的目标。本文所提出的经验，主要是针对这种情况。</P> <p><B>掌握语法细节</B>。正则表达式在各种语言中，其语法大致相同，细节各有千秋。明确所使用语言的正则的语法的细节，是写出正确、高效正则表达式的基础。例如，perl中与<FONT color=#3366ff>\w</FONT>等效的匹配范围是<FONT color=#3366ff>[a-zA-Z0-9_]</FONT>；perl正则式不支持肯定逆序环视中使用可变的重复（variable repetition inside lookbehind，例如<FONT color=#3366ff>(?<=.*)abc</FONT>），但是.Net语法是支持这一特性的；又如，JavaScript连逆序环视（Lookbehind,如<FONT color=#3366ff>(?<=ab)c</FONT>）都不支持，而perl和python是支持的。《精通正则表达式》第3章《正则表达式的特性和流派概览》明确地列出了各大派系正则的异同，这篇文章也简要地列出了几种常用语言、工具中正则的比较。对于具体使用者而言，至少应该详细了解正在使用的那种工作语言里正则的语法细节。
<p><B>先粗后精，</B><B>先加后减</B>。使用正则表达式语法对于目标文本进行描述和界定，可以像画素描一样，先大致勾勒出框架，再逐步在局步实现细节。仍举刚才的手机号的例子，先界定<FONT color=#3366ff>\d{11}</FONT>，总不会错；再细化为<FONT color=#3366ff>1[358]\d{9}</FONT>，就向前迈了一大步（至于第二位是不是3、5、8，这里无意深究，只举这样一个例子，说明逐步细化的过程）。这样做的目的是先消除漏匹配（刚开始先尽可能多地匹配，做加法），然后再一点一点地消除误匹配（做减法）。这样有先有后，在考虑时才不易出错，从而向“不误不漏”这个目标迈进。
<p><B>留有余地</B>。所能看到的文本sample是有限的，而待匹配检验的文本是海量的，暂时不可见的。对于这样的情况，在写正则表达式时要跳出所能见到的文本的圈子，开拓思路，作出“战略性前瞻”。例如，经常收到这样的垃圾短信：“发*票”、“发#漂”。如果要写规则屏蔽这样烦人的垃圾短信，不但要能写出可以匹配当前文本的正则表达式 <FONT color=#3366ff>发[*#](?:票|漂)</FONT>，还要能够想到 <FONT color=#3366ff>发.(?:票|漂|飘)</FONT>之类可能出现的“变种”。这在具体的领域或许会有针对性的规则，不多言。这样做的目的是消除漏匹配，延长正则表达式的生命周期。
<p><B>明确</B>。具体说来，就是<B>谨慎</B>用点号这样的元字符，<B>尽可能</B>不用星号和加号这样的任意量词。只要能确定范围的，例如\w，就不要用点号；只要能够预测重复次数的，就不要用任意量词。例如，写析取twitter消息的脚本，假设一条消息的xml正文部分结构是<span class=”msg”>…</span>且正文中无尖括号，那么<FONT color=#3366ff><span class=”msg”>[^<]{1,480}</span></FONT>这种写法<B>的思路</B>要好于<FONT color=#3366ff><span class=”msg”>.*</span></FONT>，原因有二：一是使用<FONT color=#3366ff>[^<]</FONT>，它保证了文本的范围不会超出下一个小于号所在的位置；二是明确长度范围，<FONT color=#3366ff>{1,480}</FONT>，其依据是一条twitter消息大致能的字符长度范围。当然，480这个长度是否正确还可推敲，但是这种思路是值得借鉴的。说得狠一点，“滥用点号、星号和加号是不环保、不负责任的做法”。
<p><B>不要让稻草压死骆驼</B>。每使用一个普通括号()而不是非捕获型括号<FONT color=#3366ff>(?:…)</FONT>，就会保留一部分内存等着你再次访问。这样的正则表达式、无限次地运行次数，无异于一根根稻草的堆加，终于能将骆驼压死。养成合理使用(?:…)括号的习惯。
<p><B>宁简勿繁</B>。将一条复杂的正则表达式拆分为两条或多条简单的正则表达式，编程难度会降低，运行效率会提升。例如用来消除行首和行尾空白字符的正则表达式<FONT color=#3366ff>s/^\s+|\s+$//g;</FONT>，其运行效率理论上要低于<FONT color=#3366ff>s/^\s+//g; s/\s+$//g;</FONT> 。这个例子出自《精通正则表达式》第五章，书中对它的评论是“它几乎总是最快的，而且显然最容易理解”。既快又容易理解，何乐而不为？工作中我们还有其它的理由要将C==<FONT color=#3366ff>(A|B)</FONT>这样的正则表达式拆为A和B两条表达式分别执行。例如，虽然A和B这两种情况只要有一种能够击中所需要的文本模式就会成功匹配，但是如果只要有一条子表达式（例如A）会产生误匹配，那么不论其它的子表达式（例如B）效率如何之高，范围如何精准，C的总体精准度也会因A而受到影响。
<p><B>巧妙定位</B>。有时候，我们需要匹配的the，是作为单词的the（两边有空格），而不是作为单词一部分的t-h-e的有序排列（例如toge<FONT color=#cc33cc>the</FONT>r中的the）。在适当的时候用上<FONT color=#3366ff>^</FONT>，<FONT color=#3366ff>$</FONT>，<FONT color=#3366ff>\b</FONT>等等定位锚点，能有效提升找到成功匹配、淘汰不成功匹配的效率。 </LI></OL></p> <p style="TEXT-INDENT: 2em"><strong>正则表达式：</strong> <A href="http://114.xixik.com/regex/">http://114.xixik.com/regex/</A></p>
<p style="TEXT-INDENT: 2em"><strong>HTML转义字符：</strong> <A href="http://114.xixik.com/character/">http://114.xixik.com/character/</A></p>
</div>
</div>
</div> <script src="http://w.cnzz.com/c.php?id=30039331" language="JavaScript" charset="gb2312"></script>
</body>
</html> */ /* 回顾:
css:
层叠样式表
作用:
渲染页面
提供工作效率,将html和样式分离
和html的整合
方式1:内联样式表
通过标签的style属性 <xxx style="..."/>
方式2:内部样式表
通过head的子标签Style子标签
<style type="text/css">
选择器{
属性:值;
属性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)
框模型:
一个元素外边有内边距 边框 外边距
顺序:上右下左
//////////////////////////////////////
js
javascript 脚本语言 解释性 基于对象 事件驱动函数
js的组成:
ECMAScript(语法)
BOM(浏览器对象模型)
DOM(文档对象模型)
html和js的整合
方式1:内部编写js
<script type="text/javascript">js代码</script>
方式2:
外部有一个独立的js文件 后缀名:.js
在html中通过script的src属性导入
<script src="js的路径"></script>
注意:
一旦使用了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:通过元素的事件属性
<xxx onxxx="函数名(参数列表)">
方式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对象)
例如:
<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
方法:
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()
javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式的更多相关文章
- javaWeb核心技术第三篇之JavaScript第一篇
- 概述 - JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 ...
- javaScript第二篇
事件处理函数 javaScript响应用户操作等都是通过事件处理来触发;其基本形式为 event = "javaScript statement(s);" 事件 = "事 ...
- java核心技术第四篇之JDBC第二篇
01.JDBC连接池_连接池的概念: 1).什么是连接池:对于多用户程序,为每个用户单独创建一个Connection,会使程序降低效率.这时我们可以创建一个"容器", 这个容器中, ...
- web前端篇：JavaScript基础篇（易懂小白上手快）-1
目录 详细内容: 0.JavaScript的引入 1.第一个JavaScript 2.变量 3.变量的类型 4.数组 5.条件语句 6.三元运算符 7.循环 8.函数 9.对象(object): 10 ...
- web前端篇：JavaScript基础篇（易懂小白上手快）-2
目录 一.内容回顾: ECMAScript基础语法 1.基本数据类型和引用数据类型 2.条件判断和循环 3.赋值运算符,逻辑运算符 4.字符串的常用方法 5.数组的常用方法 6.对象 7.函数 8.日 ...
- [转帖]虚拟内存探究 -- 第二篇:Python 字节
虚拟内存探究 -- 第二篇:Python 字节 http://blog.coderhuo.tech/2017/10/15/Virtual_Memory_python_bytes/ 是真看不懂哦 ...
- JavaWeb学习总结第二篇--第一个JavaWeb程序
JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框架进行改写).于是我在这里记录下 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- 《javascript权威指南》读书笔记——第二篇
<javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...
随机推荐
- 前后端分离及Element的使用
1. 前后端分离 1.1 什么是前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数 ...
- php yii 查看帮助时会调用具体脚本类的析构函数
现象 执行 php yii 查看脚本有什么命令的时候,发现会调用我一个类中的析构函数的命令.并且不是一次调用,是3次,截图中有两次,还有一次输出完析构函数所在的类中的命令之后. 分析原因 在析构函数中 ...
- JS---DOM---part4 课程介绍 & part3 复习
part4 课程介绍 事件 1. 绑定事件的区别 2. 移除绑定事件的方式及区别和兼容代码 3. 事件的三个阶段 4. 事件冒泡 5. 为同一个元素绑定多个不同的事件,指向的是同一个事件处理函数 6. ...
- vue & nodejs jwt 的基于token身份验证
现在比较流行的验证方式,是带着token的登录验证 原理 1. 登陆时,客户端发送用户名密码 2. 服务端验证用户名密码是否正确,校验通过就会生成一个有时效的token串,发送给客户端 3. 客户端储 ...
- Android判断com.android.camera.action.CROP是否存在
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/225 最近线上报错,有个用户连续crash了10次左右,查 ...
- Shell（七）：文件包含
和其他语言一样,Shell 也可以包含外部脚本(类似python中import的功能).这样可以很方便的封装一些公用的代码作为一个独立的文件. Shell 文件包含的语法格式如下: . filenam ...
- IT兄弟连 HTML5教程 CSS3属性特效 transition过渡
CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...
- 使用PIL将图片转成字符
注意:转化成txt后,txt的字体使用“宋体”,不能使用“微软雅黑”,否则图像会变形 import numpy as npfrom PIL import Image if __name__ == '_ ...
- Java对象 POJO和JavaBean的区别
转载自https://www.jianshu.com/p/224489dfdec8 这篇博客很通俗易懂的讲明白了什么是POJO,对于刚开始学开发做java项目的菜鸟来说,很有帮助,网课老师是不会讲这些 ...
- TensorFlow实现图像卷积并可视化示例
图片尺寸要自己修改. 看起来好像没啥意思,不知道下一步能干什么,先卷了再说.由于weights是随机生成的(tf.random_normal作用:用于从服从指定正太分布的数值中取出随机数),所以每次卷 ...