经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
来源：cnblogs　　作者：小小一　　时间：2019/8/12 9:06:57　　对本文有异议 
  1. - 事件
  2.   - 表单提交(掌握)
  3.     "onsubmit"
  4.   - 单击事件(掌握)
  5.     "onclick"
  6.   - 页面加载成功事件(掌握)
  7.     "onload"
  8.   - 焦点事件:(掌握)
  9.     - 获取焦点
  10.       "onfocus"
  11.     - 失去焦点
  12.       "onblur"
  13.   - 表单事件(了解)
  14.     - ondblclick        双击事件
  15.     - onreset;                重置
  16.     - onchange;            改变(熟练使用)
  17.   - 鼠标事件:(了解)
  18.     - onmouseover        悬停
  19.     - onmouseout        移出
  20.     - onmousedown    按下
  21.     - onmouseup        弹起
  22.     - onmousemove    移动
  23.   - 键盘事件:(了解)
  24.     - onkeydown        按下
  25.     - onkeyup            弹起
  26.     - onkeypress        按下并弹起
  27. - DOM(文档对象模型):操作html文档
  28.   "html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点"
  29.   - html文档与dom树的关系：理解
  30.     - html里所有的标签、标签的属性、文本都会转换成dom树里的节点
  31.       - a.整个html文档抽象成的对象,叫作document    文档节点
  32.       - b.标签转换成的节点对象，叫作Element           元素节点
  33.       - c.标签属性转换成的节点对象，叫作Attribute   属性节点
  34.       - d.文本转换成的节点对象，叫作Text                  文本节点
  35.   - 查询(获取元素对象)★★
  36.     - document.getElementById("id");  获取一个元素对象
  37.     - document.getElementsByTagName("标签名"); 获取一种元素对象  数组接收
  38.     - document.getElementsByClassName("class属性值"); 获取一类元素对象 数组接收
  39.     - document.getElementsByName("name属性值"); 获取多个元素对象 数组接收
  40.   - 元素(element)
  41.     - 方式1简单方法操作:★★
  42.       - 元素.innerHTML = "<h1>文本内容</h1>";     添加
  43.       - 元素.innerHTML = "";     删除
  44.     - 方式2扩展:了解
  45.       - 添加
  46.         - var ele  =  document.createElement("标签名");        创建元素节点(创建一个标签)
  47.           "var ele  =  document.createElement("h1");     <h1></h1>"
  48.         - var text =  document.createTextNode("值");            创建文本节点(创建一个值)
  49.           "var text =  document.createTextNode("");   "客""
  50.         - 元素节点.appendChild(文本节点);                    给元素节点添加文本信息
  51.           "ele.appendChild(text);     <h1>客</h1>"
  52.         - 元素.appendChild(子元素对象);    将元素节点追加到指定标签中
  53.           "将创建好的h1标签添加到页面的指定标签中"
  54.       - 删除
  55.         - 元素.remove();  自杀
  56.   - 属性:(attribute)
  57.     - 方式1简单方法操作:★★
  58.       - 元素.属性名称;                        获取指定属性的值
  59.       - 元素.属性名称 = "属性值";        设置指定属性的值
  60.     - 方式2扩展:了解
  61.       - 查(获取):
  62.         - 元素.getAttribute("属性名称");
  63.       - 增:
  64.         - 元素.setAttribute("属性名称","属性值");
  65.       - 删:
  66.         - 元素.removeAttribute("属性名称");
  67. - 引用数据类型(对象)
  68.   - 注意:string,number,boolen称为伪对象,可以直接使用相应的方法或属性
  69.   - Array:数组
  70.     - 语法:
  71.       - new Array();  创建空数组
  72.       - new Array(3);   创建包含指定个数的数组
  73.       - new Array(ele1,ele2...);  创建包含指定元素的数组
  74.     - 特征:
  75.       - 数组长度可变
  76.       - 数组中可以存放任何类型的值
  77.     - 常用属性
  78.       - length   长度
  79.     - 常用方法
  80.       - join("分隔符");  按指定的分隔符分割
  81.       - shift(); 删除并返回数组中的第一个元素
  82.       - unshift();  向数组的开头添加一个或多个元素,并返回新数组的长度
  83.       - pop();  删除并返回数组中的最后一个元素
  84.       - push();  向数组的末尾添加一个或多个元素,返回新数组的长度
  85.       - sort();  操作数组结构  对数组进行排序
  86.         "//初始化设置元素的时候,排序不起作用的"
  87.       - reverse();  颠倒数组中元素的顺序
  88.   - String
  89.     - 语法
  90.       - new String();  返回一个object对象
  91.     - 常用属性
  92.       - length
  93.     - 常用方法
  94.       - substring(startindex,endindex);
  95.       - slice(startindex,endindex);
  96.       - charAt();
  97.       - split();
  98.   - Number
  99.     - 语法:
  100.       - new Number(); 返回一个object对象
  101.   - Boolean
  102.     - new Boolean();  返回一个object对象
  103.     - Boolean(值);  将给定值转为Boolean类型
  104.   - Math
  105.     - 常用操作
  106.       - Math.round();
  107.       - Math.PI;
  108.       - Math.random();
  109.   - Date
  110.     - 语法
  111.       - new Date();
  112.     - 常用方法
  113.       - toLocaleString();  转为字符串
  114.   - reg(正则)
  115.     - 1.编写正则表达式
  116.       - 格式:  /^正则表达式$/
  117.     - 2.校验
  118.       - 正则表达式.test();   返回boolean类型的值
  119.   - 全局函数
  120.     - parseInt();  尝试转换为Int类型
  121.     - parseFloat();  尝试转换为float类型
  122.     - String(); 强制转换为String类型
  123.     - Number(); 强制转换为number类型
  124.     - encodeURI();    编码
  125.     - decodeURI();   解码
  126.     - eval();  将字符串转换称js可以执行的代码
  128. /*
  130. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
  131. <html xmlns="http://www.w3.org/1999/xhtml">
  132. <head>
  133. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  134. <title>正则表达式,常用的正则表达式,js正则表达式,正则表达式数字,正则表达式空格</title>
  135. <meta name="Description" content="正则表达式（英文：Regular Expression）在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。" />
  136. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  137. <meta http-equiv="Content-Language" content="zh-CN" />
  138. <base target="_blank" />
  139. <link href="http://static.xixik.com/common/css/style.css?t=20091210.css" rel="stylesheet" type="text/css" />
  140. <link href="http://static.xixik.com/common/css/container.css?t=20091210.css" rel="stylesheet" type="text/css" />
  141. <style type="text/css" rel="stylesheet" media="screen" />
  142. /* Copyright (c) 2006-2009 114.xixik.com All rights reserved. */
  143. table,td,th{
  144. border-collapse:collapse;
  145. font-size:14px;
  146. }
  147. table{
  148. width:778px;
  149. }
  150.  
  151. .code{
  152. padding:2px;
  153. border:1px #CCC solid;
  154. background-color:#e5e5e5;
  155. font-family:Fixedsys;
  156. }
  157. </style>
  158.  
  159.  
  160.  
  161. </head>
  162. <body>
  163.  
  164. <div class="commonContainer">
  165.     <div class="noborder">
  166.         <div class="mainContainer">
  167. <h2>常用的正则表达式</h2>
  168.  
  169. <P><STRONG>常用正则表达式</STRONG></P>
  170. <P>正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。</P>
  171. <P>用户名：/^[a-z0-9_-]{3,16}$/</P>
  172. <P>密码：/^[a-z0-9_-]{6,18}$/</P>
  173. <P>十六进制值：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/</P>
  174. <P>电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/</P>
  175. <P>URL：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/</P>
  176. <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>
  177. <P>HTML 标签：/^&lt;([a-z]+)([^&lt;]+)*(?:&gt;(.*)&lt;\/\1&gt;|\s+\/&gt;)$/</P>
  178. <P>Unicode编码中的汉字范围：/^[u4e00-u9fa5],{0,}$/</P>
  179. <P>匹配中文字符的正则表达式： [\u4e00-\u9fa5]<BR>评注：匹配中文还真是个头疼的事，有了这个表达式就好办了</P>
  180. <P>匹配双字节字符(包括汉字在内)：[^\x00-\xff]<BR>评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）</P>
  181. <P>匹配空白行的正则表达式：\n\s*\r<BR>评注：可以用来删除空白行</P>
  182. <P>匹配HTML标记的正则表达式：&lt;(\S*?)[^&gt;]*&gt;.*?&lt;/\1&gt;|&lt;.*? /&gt;<BR>评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力</P>
  183. <P>匹配首尾空白字符的正则表达式：^\s*|\s*$<BR>评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式</P>
  184. <P>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*<BR>评注：表单验证时很实用</P>
  185. <P>匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*<BR>评注：网上流传的版本功能很有限，上面这个基本可以满足需求</P>
  186. <P>匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$<BR>评注：表单验证时很实用</P>
  187. <P>匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}<BR>评注：匹配形式如 0511-4405222 或 021-87888822</P>
  188. <P>匹配腾讯QQ号：[1-9][0-9]{4,}<BR>评注：腾讯QQ号从10000开始</P>
  189. <P>匹配中国大陆邮政编码：[1-9]\d{5}(?!\d)<BR>评注：中国大陆邮政编码为6位数字</P>
  190. <P>匹配身份证：\d{15}|\d{18}<BR>评注：中国大陆的身份证为15位或18位</P>
  191. <P>匹配ip地址：\d+\.\d+\.\d+\.\d+<BR>评注：提取ip地址时有用</P>
  192. <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>
  193. <P>匹配特定字符串：<BR>^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串<BR>^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串<BR>^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串<BR>^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串<BR>^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串</P>
  194.  
  195. <h2>表达式全集</h2>
  196.  
  197. <P>正则表达式有多种不同的风格。下表是在PCRE中元字符及其在正则表达式上下文中的行为的一个完整列表：</P>
  198.  
  199. <table width="778" borderColor=#cccccc cellSpacing=1 cellPadding=2 border=1>
  200. <tr>
  201. <th>字符</th>
  202. <th>描述</th>
  203. </tr>
  204. <tr>
  205. <th style="text-align:center;">\</th>
  206. <td>将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“<code>n</code>”匹配字符“<code>n</code>”。“<code>\n</code>”匹配一个换行符。序列“<code>\\</code>”匹配“<code>\</code>”而“<code>\(</code>”则匹配“<code>(</code>”。</td>
  207. </tr>
  208. <tr>
  209. <th style="text-align:center;">^</th>
  210. <td>匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“<code>\n</code>”或“<code>\r</code>”之后的位置。</td>
  211. </tr>
  212. <tr>
  213. <th style="text-align:center;">$</th>
  214. <td>匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“<code>\n</code>”或“<code>\r</code>”之前的位置。</td>
  215. </tr>
  216. <tr>
  217. <th style="text-align:center;">*</th>
  218. <td>匹配前面的子表达式零次或多次。例如，zo*能匹配“<code>z</code>”以及“<code>zoo</code>”。*等价于{0,}。</td>
  219. </tr>
  220. <tr>
  221. <th style="text-align:center;">+</th>
  222. <td>匹配前面的子表达式一次或多次。例如，“<code>zo+</code>”能匹配“<code>zo</code>”以及“<code>zoo</code>”，但不能匹配“<code>z</code>”。+等价于{1,}。</td>
  223. </tr>
  224. <tr>
  225. <th style="text-align:center;">?</th>
  226. <td>匹配前面的子表达式零次或一次。例如，“<code>do(es)?</code>”可以匹配“<code>do</code>”或“<code>does</code>”中的“<code>do</code>”。?等价于{0,1}。</td>
  227. </tr>
  228. <tr>
  229. <th style="text-align:center;">{<span style="font-family:Times New Roman; font-style:italic;">n</span>}</th>
  230. <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>
  231. </tr>
  232. <tr>
  233. <th style="text-align:center;">{<span style="font-family:Times New Roman; font-style:italic;">n</span>,}</th>
  234. <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>
  235. </tr>
  236. <tr>
  237. <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>
  238. <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>&lt;=<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>
  239. </tr>
  240. <tr>
  241. <th style="text-align:center;">?</th>
  242. <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>
  243. </tr>
  244. <tr>
  245. <th style="text-align:center;">.</th>
  246. <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>
  247. </tr>
  248. <tr>
  249. <th style="text-align:center;">(pattern)</th>
  250. <td>匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“<code>\(</code>”或“<code>\)</code>”。</td>
  251. </tr>
  252. <tr>
  253. <th style="text-align:center;">(?:pattern)</th>
  254. <td>匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“<code>(|)</code>”来组合一个模式的各个部分是很有用。例如“<code>industr(?:y|ies)</code>”就是一个比“<code>industry|industries</code>”更简略的表达式。</td>
  255. </tr>
  256. <tr>
  257. <th style="text-align:center;">(?=pattern)</th>
  258. <td>正向预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“<code>Windows(?=95|98|NT|2000)</code>”能匹配“<code>Windows2000</code>”中的“<code>Windows</code>”，但不能匹配“<code>Windows3.1</code>”中的“<code>Windows</code>”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。</td>
  259. </tr>
  260. <tr>
  261. <th style="text-align:center;">(?!pattern)</th>
  262. <td>负向预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“<code>Windows(?!95|98|NT|2000)</code>”能匹配“<code>Windows3.1</code>”中的“<code>Windows</code>”，但不能匹配“<code>Windows2000</code>”中的“<code>Windows</code>”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始</td>
  263. </tr>
  264. <tr>
  265. <th style="text-align:center;">x|y</th>
  266. <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>
  267. </tr>
  268. <tr>
  269. <th style="text-align:center;">[xyz]</th>
  270. <td>字符集合。匹配所包含的任意一个字符。例如，“<code>[abc]</code>”可以匹配“<code>plain</code>”中的“<code>a</code>”。</td>
  271. </tr>
  272. <tr>
  273. <th style="text-align:center;">[^xyz]</th>
  274. <td>负值字符集合。匹配未包含的任意字符。例如，“<code>[^abc]</code>”可以匹配“<code>plain</code>”中的“<code>p</code>”。</td>
  275. </tr>
  276. <tr>
  277. <th style="text-align:center;">[a-z]</th>
  278. <td>字符范围。匹配指定范围内的任意字符。例如，“<code>[a-z]</code>”可以匹配“<code>a</code>”到“<code>z</code>”范围内的任意小写字母字符。</td>
  279. </tr>
  280. <tr>
  281. <th style="text-align:center;">[^a-z]</th>
  282. <td>负值字符范围。匹配任何不在指定范围内的任意字符。例如，“<code>[^a-z]</code>”可以匹配任何不在“<code>a</code>”到“<code>z</code>”范围内的任意字符。</td>
  283. </tr>
  284. <tr>
  285. <th style="text-align:center;">\b</th>
  286. <td>匹配一个单词边界，也就是指单词和空格间的位置。例如，“<code>er\b</code>”可以匹配“<code>never</code>”中的“<code>er</code>”，但不能匹配“<code>verb</code>”中的“<code>er</code>”。</td>
  287. </tr>
  288. <tr>
  289. <th style="text-align:center;">\B</th>
  290. <td>匹配非单词边界。“<code>er\B</code>”能匹配“<code>verb</code>”中的“<code>er</code>”，但不能匹配“<code>never</code>”中的“<code>er</code>”。</td>
  291. </tr>
  292. <tr>
  293. <th style="text-align:center;">\cx</th>
  294. <td>匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“<code>c</code>”字符。</td>
  295. </tr>
  296. <tr>
  297. <th style="text-align:center;">\d</th>
  298. <td>匹配一个数字字符。等价于[0-9]。</td>
  299. </tr>
  300. <tr>
  301. <th style="text-align:center;">\D</th>
  302. <td>匹配一个非数字字符。等价于[^0-9]。</td>
  303. </tr>
  304. <tr>
  305. <th style="text-align:center;">\f</th>
  306. <td>匹配一个换页符。等价于\x0c和\cL。</td>
  307. </tr>
  308. <tr>
  309. <th style="text-align:center;">\n</th>
  310. <td>匹配一个换行符。等价于\x0a和\cJ。</td>
  311. </tr>
  312. <tr>
  313. <th style="text-align:center;">\r</th>
  314. <td>匹配一个回车符。等价于\x0d和\cM。</td>
  315. </tr>
  316. <tr>
  317. <th style="text-align:center;">\s</th>
  318. <td>匹配任何空白字符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。</td>
  319. </tr>
  320. <tr>
  321. <th style="text-align:center;">\S</th>
  322. <td>匹配任何非空白字符。等价于[^\f\n\r\t\v]。</td>
  323. </tr>
  324. <tr>
  325. <th style="text-align:center;">\t</th>
  326. <td>匹配一个制表符。等价于\x09和\cI。</td>
  327. </tr>
  328. <tr>
  329. <th style="text-align:center;">\v</th>
  330. <td>匹配一个垂直制表符。等价于\x0b和\cK。</td>
  331. </tr>
  332. <tr>
  333. <th style="text-align:center;">\w</th>
  334. <td>匹配包括下划线的任何单词字符。等价于“<code>[A-Za-z0-9_]</code>”。</td>
  335. </tr>
  336. <tr>
  337. <th style="text-align:center;">\W</th>
  338. <td>匹配任何非单词字符。等价于“<code>[^A-Za-z0-9_]</code>”。</td>
  339. </tr>
  340. <tr>
  341. <th style="text-align:center;">\x<span style="font-family:Times New Roman; font-style:italic;">n</span></th>
  342. <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&amp;1</code>”。正则表达式中可以使用ASCII编码。.</td>
  343. </tr>
  344. <tr>
  345. <th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">num</span></th>
  346. <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>
  347. </tr>
  348. <tr>
  349. <th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">n</span></th>
  350. <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>
  351. </tr>
  352. <tr>
  353. <th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">nm</span></th>
  354. <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>
  355. </tr>
  356. <tr>
  357. <th style="text-align:center;">\<span style="font-family:Times New Roman; font-style:italic;">nml</span></th>
  358. <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>
  359. </tr>
  360. <tr>
  361. <th style="text-align:center;">\u<span style="font-family:Times New Roman; font-style:italic;">n</span></th>
  362. <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>
  363. </tr>
  364. </table>
  365.  
  366.  
  367.  
  368. <p>以下是以PHP的语法所写的示例 </p>
  369.  
  370. <p>验证字符串是否只含数字与英文，字符串长度并在4~16个字符之间 </p>
  371. <DIV dir=ltr style="TEXT-ALIGN: left">
  372. <DIV style="FONT-FAMILY: monospace"><PRE class=de1><SPAN class=kw2><STRONG>&lt;?php</STRONG></SPAN>
  373. <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>
  374. <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>
  375.     <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>
  376. <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>
  377.     <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>
  378. <SPAN class=br0><FONT color=#009900>}</FONT></SPAN>
  379. <SPAN class=sy1><STRONG>?&gt;</STRONG></SPAN>
  380. </PRE></DIV></DIV>
  381.  
  382. <p>简易的台湾身份证字号验证 </p>
  383. <DIV class=mw-geshi dir=ltr style="TEXT-ALIGN: left">
  384. <DIV class="php source-php" style="FONT-FAMILY: monospace"><PRE class=de1><SPAN class=kw2><STRONG>&lt;?php</STRONG></SPAN>
  385. <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>
  386. <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>
  387.     <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>
  388. <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>
  389.     <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>
  390. <SPAN class=br0><FONT color=#009900>}</FONT></SPAN>
  391. <SPAN class=sy1><STRONG>?&gt;</STRONG></SPAN>
  392. </PRE></DIV></DIV>
  393.  
  394. <p>以下示例是用 Perl 语言写的，与上面的示例功能相同 </p>
  395. <DIV class=mw-geshi dir=ltr style="TEXT-ALIGN: left">
  396. <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>
  397. </PRE></DIV></DIV>
  398. <DIV class=mw-geshi dir=ltr style="TEXT-ALIGN: left">
  399. <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>
  400. </PRE></DIV></DIV>
  401.  
  402. <h2>如何写出高效率的正则表达式</h2>
  403.  
  404. <P>如果纯粹是为了挑战自己的正则水平，用来实现一些特效（例如使用正则表达式计算质数、解线性方程），效率不是问题；如果所写的正则表达式只是为了满足一两次、几十次的运行，优化与否区别也不太大。但是，如果所写的正则表达式会百万次、千万次地运行，效率就是很大的问题了。我这里总结了几条提升正则表达式运行效率的经验（工作中学到的，看书学来的，自己的体会），贴在这里。如果您有其它的经验而这里没有提及，欢迎赐教。</P>
  405. <P>为行文方便，先定义两个概念。</P>
  406.  
  407. <p><B>误匹配</B>：指正则表达式所匹配的内容范围超出了所需要范围，有些文本明明不符合要求，但是被所写的正则式“击中了”。例如，如果使用<FONT color=#3366ff>\d{11}</FONT>来匹配11位的手机号，<FONT color=#3366ff>\d{11}</FONT>不单能匹配正确的手机号，它还会匹配<FONT color=#cc33cc>98765432100</FONT>这样的明显不是手机号的字符串。我们把这样的匹配称之为误匹配。 
  408. <p><B>漏匹配</B>：指正则表达式所匹配的内容所规定的范围太狭窄，有些文本确实是所需要的，但是所写的正则没有将这种情况囊括在内。例如，使用<FONT color=#3366ff>\d{18}</FONT>来匹配18位的身份证号码，就会漏掉结尾是字母X的情况。 </LI></UL>
  409. <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>
  410. <P>精准的正则表达式意味着既无误匹配且无漏匹配。当然，现实中存在这样的情况：只能看到有限数量的文本，根据这些文本写规则，但是这些规则将会用到海量的文本中。这种情况下，尽可能地（如果不是完全地）消除误匹配以及漏匹配，并提升运行效率，就是我们的目标。本文所提出的经验，主要是针对这种情况。</P>
  411.  
  412.  
  413. <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>(?&lt;=.*)abc</FONT>），但是.Net语法是支持这一特性的；又如，JavaScript连逆序环视（Lookbehind,如<FONT color=#3366ff>(?&lt;=ab)c</FONT>）都不支持，而perl和python是支持的。《精通正则表达式》第3章《正则表达式的特性和流派概览》明确地列出了各大派系正则的异同，这篇文章也简要地列出了几种常用语言、工具中正则的比较。对于具体使用者而言，至少应该详细了解正在使用的那种工作语言里正则的语法细节。 
  414. <p><B>先粗后精，</B><B>先加后减</B>。使用正则表达式语法对于目标文本进行描述和界定，可以像画素描一样，先大致勾勒出框架，再逐步在局步实现细节。仍举刚才的手机号的例子，先界定<FONT color=#3366ff>\d{11}</FONT>，总不会错；再细化为<FONT color=#3366ff>1[358]\d{9}</FONT>，就向前迈了一大步（至于第二位是不是3、5、8，这里无意深究，只举这样一个例子，说明逐步细化的过程）。这样做的目的是先消除漏匹配（刚开始先尽可能多地匹配，做加法），然后再一点一点地消除误匹配（做减法）。这样有先有后，在考虑时才不易出错，从而向“不误不漏”这个目标迈进。 
  415. <p><B>留有余地</B>。所能看到的文本sample是有限的，而待匹配检验的文本是海量的，暂时不可见的。对于这样的情况，在写正则表达式时要跳出所能见到的文本的圈子，开拓思路，作出“战略性前瞻”。例如，经常收到这样的垃圾短信：“发*票”、“发#漂”。如果要写规则屏蔽这样烦人的垃圾短信，不但要能写出可以匹配当前文本的正则表达式 <FONT color=#3366ff>发[*#](?:票|漂)</FONT>，还要能够想到 <FONT color=#3366ff>发.(?:票|漂|飘)</FONT>之类可能出现的“变种”。这在具体的领域或许会有针对性的规则，不多言。这样做的目的是消除漏匹配，延长正则表达式的生命周期。 
  416. <p><B>明确</B>。具体说来，就是<B>谨慎</B>用点号这样的元字符，<B>尽可能</B>不用星号和加号这样的任意量词。只要能确定范围的，例如\w，就不要用点号；只要能够预测重复次数的，就不要用任意量词。例如，写析取twitter消息的脚本，假设一条消息的xml正文部分结构是&lt;span class=”msg”&gt;…&lt;/span&gt;且正文中无尖括号，那么<FONT color=#3366ff>&lt;span class=”msg”&gt;[^&lt;]{1,480}&lt;/span&gt;</FONT>这种写法<B>的思路</B>要好于<FONT color=#3366ff>&lt;span class=”msg”&gt;.*&lt;/span&gt;</FONT>，原因有二：一是使用<FONT color=#3366ff>[^&lt;]</FONT>，它保证了文本的范围不会超出下一个小于号所在的位置；二是明确长度范围，<FONT color=#3366ff>{1,480}</FONT>，其依据是一条twitter消息大致能的字符长度范围。当然，480这个长度是否正确还可推敲，但是这种思路是值得借鉴的。说得狠一点，“滥用点号、星号和加号是不环保、不负责任的做法”。 
  417. <p><B>不要让稻草压死骆驼</B>。每使用一个普通括号()而不是非捕获型括号<FONT color=#3366ff>(?:…)</FONT>，就会保留一部分内存等着你再次访问。这样的正则表达式、无限次地运行次数，无异于一根根稻草的堆加，终于能将骆驼压死。养成合理使用(?:…)括号的习惯。 
  418. <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而受到影响。 
  419. <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>
  420.  
  421. <p style="TEXT-INDENT: 2em"><strong>正则表达式：</strong> <A href="http://114.xixik.com/regex/">http://114.xixik.com/regex/</A></p>
  422. <p style="TEXT-INDENT: 2em"><strong>HTML转义字符：</strong> <A href="http://114.xixik.com/character/">http://114.xixik.com/character/</A></p>
  423.         </div>
  424.     </div>
  425. </div>
  426.  
  427.  
  428. <script src="http://w.cnzz.com/c.php?id=30039331" language="JavaScript" charset="gb2312"></script>
  429. </body>
  430. </html>
  431.  
  432. */
  433.  
  434. /*
  436. 回顾:
  437. css:
  438.     层叠样式表
  439.     作用:
  440.         渲染页面
  441.         提供工作效率,将html和样式分离
  442.     和html的整合
  443.         方式1:内联样式表
  444.             通过标签的style属性  <xxx style="..."/>
  445.         方式2:内部样式表
  446.             通过head的子标签Style子标签
  447.                 <style type="text/css">
  448.                     选择器{
  449.                         属性:值;
  450.                         属性1:值1;
  451.                     }
  452.                 </style>
  453.         方式3:外部样式表
  454.             有一个独立css文件.后缀名:.css
  455.             在html中通过link标签导入
  456.     
  457.     选择器:
  458.         id选择器
  459.             html元素有id属性且有值   <xx id="d1">
  460.             css中通过 # 导入   #d1{...}
  461.         类选择器
  462.             html元素有class属性且有值 <xx class="c1">
  463.             css中通过 . 导入    .c1{...}
  464.         元素选择器
  465.             css中通过标签名即可  xx{...}
  466.         属性选择器
  467.             html元素有一个属性且有值 <xx att="val1">
  468.             css中通过元素名[属性="值"]使用   xx[att="val1"]{...}
  469.         后代选择器
  470.             选择器 后代选择器
  471.         锚伪类(了解)
  472.     //////////////////
  473.     字体 文本 背景 列表 分类(clear display:none block inline)
  474.     框模型:
  475.         一个元素外边有内边距 边框 外边距
  476.         顺序:上右下左
  477. //////////////////////////////////////
  478. js
  479.     javascript 脚本语言 解释性 基于对象 事件驱动函数
  480.     js的组成:
  481.         ECMAScript(语法)
  482.         BOM(浏览器对象模型)
  483.         DOM(文档对象模型)
  484.     html和js的整合
  485.         方式1:内部编写js
  486.             <script type="text/javascript">js代码</script>
  487.         方式2:
  488.             外部有一个独立的js文件  后缀名:.js
  489.             在html中通过script的src属性导入
  490.                 <script src="js的路径"></script>
  491.         注意:
  492.             一旦使用了src属性,那么script标签体中的js代码将不再执行了.
  493.             
  494.     变量:
  495.         var 变量名=初始化值;
  496.     数据类型:
  497.         原始类型(5种)
  498.             Undefined
  499.             Null
  500.             String 用引号引起来的内容
  501.             Number
  502.             Boolean
  503.             
  504.             通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.
  505.                 typeof 变量|值
  506.         引用类型
  507.     运算符:
  508.         关系运算符:
  509.             两边值都是字符串,比较ascii码
  510.             两边都是数字,和java一样
  511.             一边是数字,一遍是字符串形式的数字, 可以比较
  512.             一边是数字,一遍是普通字符串 可以比较 值永远是false
  513.         等性运算符
  514.             "66"==66  true
  515.             "666"===666 false
  516.     js的语句
  517.         if while for 和java一样
  518.     //////////////////
  519.     获取元素:
  520.         var obj=document.getElementById("id值");
  521.     获取元素的value属性
  522.         var val=document.getElementById("id值").value;
  523.     设置元素的value属性    
  524.         document.getElementById("id值").value="sdfsdf";
  525.     获取元素的标签体 
  526.         var ht=document.getElementById("id值").innerHTML;
  527.     设置元素的标签体
  528.         document.getElementById("id值").innerHTML="ssss";
  529.     
  530.     定义函数:
  531.         方式1:function 函数名(参数列表){函数体}
  532.         方式2:
  533.             var 函数名=function(参数列表){函数体}
  534.         注意:
  535.             函数声明的时候不用声明返回值类型
  536.             参数列表上不要写参数类型
  537.             通过return结束方法和将值返回
  538.     
  539.     事件:
  540.         onclick 单击
  541.         onsubmit 表单提交
  542.         onload  页面加载成功或者元素加载成功
  543.         
  544.     事件和函数绑定
  545.         方式1:通过元素的事件属性
  546.             <xxx onxxx="函数名(参数列表)">
  547.         方式2:派发事件
  548.             document.getElementById("id值").onxxx=function(){...};
  549.             document.getElementById("id值").onxxx=函数名;
  550. /////////////////////////////////
  551. 案例1-定时弹出广告
  552. 需求:
  553.     打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示.
  554. 技术分析:
  555.     定时器
  556. 定时器(BOM-window对象)
  557.     setInterval(code,毫秒数):周期执行
  558.     setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
  559.     
  560.     清除定时器
  561.         clearInterval(id):
  562.         clearTimeout(id):
  563. 步骤分析:
  564.     1.确定事件
  565.     2.编写函数
  566.         a.获取元素
  567.         b.操作元素
  568. ////////////////////////
  569.     1.html页面,先把广告隐藏
  570.     2.页面加载成功事件 onload
  571.     3.编写函数
  572.         定时器:
  573.         操作元素:
  574.             document.getElementById("")
  575.         操作css属性
  576.             document.getElementById("id").style.属性="值"
  577.             属性:就是css中属性 css属性有"-" 例如:backgroud-color
  578.                 若有"-" 只需要将"-"删除,后面第一个字母变大写即可
  579.     注意:
  580.         只要是window对象的属性和方法,可以把window省略
  581.             window.onload 等价于 onload
  582.             window.setInterval() 等价于 setInterval()
  583. ////////////////////
  584. bom(浏览器对象模型)总结
  585.     所有的浏览器都有5个对象
  586.         window:窗口
  587.         location:定位信息 (地址栏)
  588.         history:历史
  589. window对象详解:
  590.     如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
  591.     并为每个框架创建一个额外的 window 对象。
  592.     常用的属性:
  593.         通过window可以获取其他的四个对象
  594.             window.location 等价域 location
  595.             window.history 等价于 history
  596.             ...
  597.     常用的方法
  598.         消息框
  599.             alert("...."):警告框
  600.             confirm("你确定要删除吗?"):确定框 返回值:boolean
  601.             prompt("请输入您的姓名"):输入框 返回值:你输入的内容
  602.         定时器
  603.             设置定时器
  604.                 setInterval(code,毫秒数):周期执行
  605.                 setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
  606.                 
  607.                 例如:
  608.                     setInterval(showAd,4000);
  609.                     serInterval("showAd()",4000);
  610.             
  611.             清除定时器
  612.                 clearInterval(id):
  613.                 clearTimeout(id):
  614.         打开和关闭
  615.             open(url):打开
  616.             close():关闭
  617. /////////////////////////
  618. location:定位信息    
  619.     常用属性:
  620.         href:获取或者设置当前页面的url(定位信息)
  621.         
  622.         location.href; 获取url
  623.         location.href="...";设置url 相当于 a标签
  624. //////////////////////
  625. history:历史
  626.     back();后退
  627.     forward():向前
  628.     ★go(int)
  629.         go(-1) 相当于 back()
  630.         go(1) 相当于 forward()
  631. //////////////////////////////////////
  632. 案例2-表单校验plus
  633. 需求:
  634.     提示信息不用弹出框,将信息追加在文本框后面
  635. 技术分析:
  636.     确定事件 表单提交的时候 onsubmit
  637.             文本框失去焦点的时候 onblur
  638.     编写函数
  639.     获取元素
  640.         document.getElementById("id值");
  641.     操作元素(获取元素的值,操作标签体,操作标签value属性)
  642. /////////////////
  643. 步骤分析:
  644.     1.表单
  645.     2.表单提交的时候 确定事件 onsubmit()
  646.     3.校验用户名和密码
  647.     4.获取用户名和密码的对象及值
  648.     5.判断内容,当为空的时候,获取响应的span元素
  649.         往span元素中显示错误信息
  650. ////////////////////////
  651. 注意:
  652.     在方法中(function()) this指代的是当前的元素(当前dom对象)
  653. 例如:
  654.     <input type="text" name="username" id="username" onblur="loseFocus(this.value)">
  655.     方法:
  656.         function loseFocus(obj){
  657.             alert(obj);
  658.         }
  659. /////////////////////////////
  660. 事件总结:
  661.     常见的事件:
  662.         焦点事件:★
  663.             onfocus
  664.             onblur
  665.         表单事件:★
  666.             onsubmit
  667.             onchange 改变
  668.         页面加载事件:★
  669.             onload
  670.         
  671.         鼠标事件(掌握)
  672.             onclick
  673.         鼠标事件(了解)
  674.             ondblclick:双击
  675.             onmousedown:按下
  676.             onmouserup:弹起
  677.             onmousemove:移动
  678.             onmouserover:悬停
  679.             onmouserout:移出
  680.         键盘事件(理解)
  681.             onkeydown:按下
  682.             onkeyup:弹起
  683.             onkeypress:按住
  684. ////////////
  685. 绑定事件:
  686.     方式1:
  687.         元素的事件属性
  688.     方式2:
  689.         派发事件
  690. ///////////////////
  691. 了解
  692.     阻止默认事件的发生
  693.     阻止事件传播
  694. /////////////////
  695. 案例3-隔行换色
  696. 需求:
  697.     一个表格,隔一行换一个色
  698. 技术分析:
  699.     事件:onload 
  700.     获取元素:dom操作
  701. ///////////////
  702. 获取元素:
  703.     document.getElementById("id"):通过id获取一个元素
  704.     document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组
  705. Array:
  706.     常用属性:
  707.         length:数组的长度
  708. ////////////////////////
  709. 步骤分析:
  710.     1.html表格一加载的时候 确定事件 onload
  711.     2.编写函数
  712.         a.获取元素(所有的tr元素)
  713.         b.操作(若当前行是偶数的话加一个样式,若是奇数的话,加另一个样式)
  714. ////////
  715.     //页面加载成功
  716.             onload=function(){
  717.                 //1.获取所有的tr
  718.                 var arr=document.getElementsByTagName("tr");
  719.                 //alert(arr);
  720.                 //alert(arr.length);
  721.                 
  722.                 //2.判断奇偶数 添加不同的样式 遍历数组
  723.                 for(var i=1;i<arr.length;i++){
  724.                     if(i%2==0){
  725.                         arr[i].style.backgroundColor="#FFFFCC";
  726.                     }else{
  727.                         arr[i].style.backgroundColor="#BCD68D";
  728.                     }
  729.                 }
  730.                 
  731.             }
  732. //////////////////////////
  733. 案例4:全选或者全不选
  734. 步骤分析:
  735.     1.确定事件 最上面那个复选框的单击事件 onclick
  736.     2.编写函数:让所有的复选框和最上面的复选框状态保持一致
  737.         a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可
  738.         b.获取其他的复选框,设置他们的checked属性即可
  739.             可以通过以下两种方案获取元素
  740.                 document.getElementsByClassName():需要给下面所有的复选框添加class属性
  741.                 document.getElementsByName():需要给下面所有的复选框添加name属性
  743. //////////////////////////////////
  744. dom(文档对象模型)
  745.     当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
  746.     节点(Node)
  747.         文档节点 document
  748.         元素节点 element
  749.         属性节点 attribute
  750.         文本节点 text
  751.     获取节点:
  752.         通过document可以获取其他节点:
  753.             常用方法:
  754.                 document.getElementById("id值"):获取一个特定的元素
  755.                 document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
  756.                 document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
  757.                 document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
  758.         设置获取获取节点的value属性
  759.             dom对象.value;获取
  760.             dom对象.value="";设置
  761.         设置或者获取节点的标签体
  762.             dom对象.innerHTML;获取
  763.             dom对象.innerHTML="";设置
  764.         获取或者设置style属性
  765.             dom对象.style.属性;获取
  766.             dom对象.style.属性="";设置
  767.         获取或者设置属性
  768.             dom对象.属性
  769. /////////////////////////
  770. 对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
  771.     关于文档的操作 在 xml dom 的document中
  772.     关于元素的操作 在 xml dom 的element中
  773.         appendChild(dom对象):在一个元素下添加孩子
  774. //////////////////////////////////////
  775. 案例5-左右选中.
  776. 需求:
  777. 技术分析:
  778.     1.确定事件,按钮的单击事件
  779.     2.编写函数:
  780.         点击移动单|多个的:
  781.             a.获取左边选中的选项  select对象.options--数组
  782.                 遍历数组 判断是否选中 option对象.selected
  783.             b.将其追加到右边的下拉选中
  784.                 rightSelect对象.appendChild(option);
  785.         点击移动所有的
  786.             a.获取左边的所有的选项
  787.             b.一个个的追加过去
  788. ///////////////////////
  789. 案例6-省市联动
  790. 需求:
  791.     选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中
  792. 技术分析:
  793.     数组:
  794. ////////////////////////
  795. 数组:
  796.     语法:
  797.         new Array();//长度为0
  798.         new Array(size);//指定长度的
  799.         new Array(e1,e2..);//指定元素
  800.         非官方
  801.             var arr4=["aa","bb"];
  802.     常用属性:
  803.         length
  804.     注意:
  805.         数组是可变的
  806.         数组可以存放任意值
  807.     常用方法:(了解)
  808.         存放值:对内容的操作
  809.             pop():弹    最后一个
  810.             push():插入 到最后
  811.             
  812.             shift():删除第一个
  813.             unshift():插入到首位
  814.         打印数组:
  815.             join(分隔符):将数组里的元素按照指定的分隔符打印
  816.         拼接数组:
  817.             concat():连接两个或更多的数组，并返回结果。
  818.         对结构的操作:
  819.             sort();排序
  820.             reverse();反转
  821. ////////////////////////
  822. 步骤分析:
  823.     1.省的下拉选 的选项中添加value属性 当成数组的索引
  824.     2.初始化市
  825.     3.选择省的时候,onchange事件
  826.     4.编写函数,
  827.         通过获取的索引获取对象的市的数组 this.value
  828.         遍历数组,将数组里面的每个值组装option 添加到select中即可
  829.             
  830. //////////////////////////////
  831. 引用类型总结:
  832.     原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
  833.     Array:数组
  834.     String:
  835.         语法:
  836.             new String(值|变量);//返回一个对象
  837.             String(值|变量);//返回原始类型
  838.         常用方法:
  839.             substring(start,end):[start,end)
  840.             substr(start,size):从索引为指定的值开始向后截取几个
  841.             
  842.             charAt(index):返回在指定位置的字符。
  843.             indexOf(""):返回字符串所在索引
  844.             
  845.             replace():替换
  846.             split():切割
  847.             
  848.         常用属性:length    
  849.     Boolean:
  850.         语法:
  851.             new Boolean(值|变量);
  852.             Boolean(值|变量);
  853.             非0数字 非空字符串 非空对象 转成true
  854.     Number
  855.         语法:
  856.             new Number(值|变量);
  857.             Number(值|变量);
  858.         注意:
  859.         
  860.             null====>0 
  861.             fale====>0 true====>1
  862.             字符串的数字=====>对应的数字
  863.             其他的NaN
  864.     Date:
  865.         new Date();
  866.         常用方法:
  867.             toLocalString()
  868.     RegExp:正则表达式
  869.         语法:
  870.             直接量语法  /正则表达式/参数
  871.             直接量语法  /正则表达式/
  872.             
  873.             new RegExp("正则表达式")
  874.             new RegExp("正则表达式","参数") 
  875.             参数:
  876.                 i:忽略大小写
  877.                 g:全局
  878.             常用方法:
  879.                 test() :返回值为boolean
  880.     Math:
  881.         Math.常量|方法
  882.         Math.PI
  883.         Math.random()  [0,1)
  884.         
  885.     全局:
  886.         ★
  887.         decodeURI() 解码某个编码的 URI。 
  888.         encodeURI() 把字符串编码为 URI。
  890.         Number():强制转换成数字
  891.         String():转成字符串
  892.         
  893.         parseInt():尝试转换成整数
  894.         parseFloat():尝试转换成小数
  895.         
  896.         eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。 
  897.         
  898.         
  899.         
  900.         
  901.             
  902.             
  903.             
  904.             
  905.             
  906.             
  907.             
  908. //////////////////////////////////////////////////////////////////////
  909.             
  910. //////////////////////////////////////////////////////////////////////        
  911. 上午回顾:
  912. BOM(浏览器对象模型)
  913.     window对象:窗口
  914.         注意:
  915.             若是window对象的属性和方法,调用的时候可以省略window
  916.         常用属性:
  917.             通过window可以获取其他的四个对象
  918.                 window.location 等价于 location
  919.     
  920.         常用方法:
  921.             消息框
  922.                 alert() 警告框
  923.                 confirm() 确认框 返回值:boolean
  924.                 prompt()    输入框 返回值:输入的内容
  925.             定时器
  926.                 设置
  927.                     setInterval(code,毫秒数):循环
  928.                     setTimeout(code,毫秒数):延迟 只执行一次
  929.                 清除
  930.                     clearInterval(id):
  931.                     clearTimeout(id):
  932.             打开和关闭
  933.                 open(url)
  934.                 close()
  935.     location对象:定位信息 地址栏
  936.         常用属性:
  937.             href:获取或者设置当前页面的url
  938.                 location.href:获取
  939.                 location.href="url":设置 相当于超链接
  940.     history对象:操作历史
  941.         常用方法:
  942.             go()
  943. ////////////////////////////
  944. 事件:
  945.     焦点:★
  946.         onfocus:获取焦点
  947.         onblur:失去焦点
  948.     表单事件:★
  949.         onsubmit: form表单里的
  950.         onchange:改变(下拉选)
  951.     页面或者对象加载:★
  952.         onload:
  953.     鼠标:★
  954.         onclick:单击
  955.     键盘:
  956.         onkeyup:
  958.         
  959. dom(★)
  960.     获取元素的方法(4个) document
  961.     操作元素的属性  dom对象.属性;
  963. 引用类型:
  964.     array
  965.     string
  966.         substring
  967.     全局:
  968.         编码2个
  969.         强制转化 Number String
  970.         尝试  parseXxx
  971.         eval() 解析字符串形式的js代码
  972.     Math random()

 

原文链接：http://www.cnblogs.com/haizai/p/11335830.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号