javaWeb核心技術第四篇之Javascript第二篇事件和正則表達式

来源:https://www.cnblogs.com/haizai/archive/2019/08/11/11335830.html
-Advertisement-
Play Games

- 事件 - 表單提交(掌握) "onsubmit" - 單擊事件(掌握) "onclick" - 頁面載入成功事件(掌握) "onload" - 焦點事件:(掌握) - 獲取焦點 "onfocus" - 失去焦點 "onblur" - 表單事件(瞭解) - ondblclick 雙擊事件 ... ...


- 事件
  - 表單提交(掌握)
    "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 標簽：/^&lt;([a-z]+)([^&lt;]+)*(?:&gt;(.*)&lt;\/\1&gt;|\s+\/&gt;)$/</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標記的正則表達式：&lt;(\S*?)[^&gt;]*&gt;.*?&lt;/\1&gt;|&lt;.*? /&gt;<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>&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>
</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&amp;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>&lt;?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>?&gt;</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>&lt;?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>?&gt;</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>(?&lt;=.*)abc</FONT>），但是.Net語法是支持這一特性的；又如，JavaScript連逆序環視（Lookbehind,如<FONT color=#3366ff>(?&lt;=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正文部分結構是&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這個長度是否正確還可推敲，但是這種思路是值得借鑒的。說得狠一點，“濫用點號、星號和加號是不環保、不負責任的做法”。 
<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.獲取左邊的所有的
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Error 942 occured during Initialization of Bufq KUPC$S_1_20181023155636
    一臺ORACLE實例(Oracle Database 10g Release 10.2.0.5.0)啟動時,報“Error 942 occured during Initialization of Bufq KUPC$S_1_20181023155636”錯誤，具體情況如下所示，內容信息來自告警日誌... ...
  • MySql || 快速創建100w條記錄
    平時每個開發者都會討論數據量大時，sql的優化問題。但是並不是每個人都會有100w的數據量可以用來實戰，那麼今天我們就自己動手，模擬一個100w數據量的表。 創建原理 其實創建的方法有很多，有快的也有慢的。本博客中寫的當然不是最快的那個，但確實是比較好操作和理解的。那麼我先來說明一下它的原理：它是利 ...
  • Ubuntu安裝MySql5.7
    一、安裝與刪除 安裝 sudo apt-get update #更新源 sudo apt-get install mysql-server #安裝mysql 刪除 sudo apt-get autoremove mysql-\* --purge (彈出提示框，是否刪除數據（刪除後數據就沒了，註意備份 ...
  • FloatingActionButton動態更換背景色
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/186 FloatingActionButton 動態更換背景色 最近碰到了個需求場景，需要動態切換FloatingActionButton的背景色 先看下xm ...
  • 詳解JS與Jquery獲得的對象的區別與聯繫
    世上無難事只怕有心人，敲代碼也一樣只要你用心去搞懂一件事，即使一個小小的用法對你以後也會有很大的作用； 項目雖然趕得緊但是有些問題百度找完答案解決之後，也要自己梳理一遍做到心領神會！！！今天就直接來上周遇到的情況： 就是使用JS中的類似：documnet.getelementbyid('')方法與$ ...
  • JavaScript數組方法大全（第一篇）
    數組方法大全（第一篇） 註意：第一次寫博客有點小緊張，如有錯誤歡迎指出，如有雷同純屬巧合，本次總結參考書籍JavaScript權威指南，有興趣的小伙伴可以去翻閱一下哦 join()方法 該方法是將數組內的所有元素轉化為字元串並拼接在一起，最後返回生成的字元串。可以指定一個可選的字元串，來分隔數組得各 ...
  • HBuilderX使用Vant組件庫
    HBuilderX使用Vant組件庫 HBuilderX是一款由國人開發的開發工具，其官網稱其為輕如編輯器、強如IDE的合體版本。但是官方的社區中關於Vant組件的安裝大多都是針對微信小程式開發安裝Vant Weapp，鄙人嘗試了各種方法，經歷各種錯誤後終於成功安裝vant組件庫，在這裡分享一下使用 ...
  • manifest.json 解析--手機web app開發筆記（三-2)
    四、SDK配置和模塊許可權配置 SDK 就是 Software Development Kit 的縮寫，中文意思就是“軟體開發工具包”，也就是輔助開發某一類軟體的相關文檔、範例和工具的集合都可以叫做“SDK”。HbuilderX的SDK配置可視化界面中SDK有地圖、登錄鑒權、支付、推送、分享、語音識別 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類