1、 重新導航到指定的地址：navigate("http://www.jb51.net");
2、
（1、*setInterval每隔一段時間執行指定的代碼，第一個參數為代碼的字符串，第二個參數為間隔時間（單位毫秒），返回值為定時器的標識。如：
setInterval("alert('hello')",5000);
*clearInterval取消setInterval的定時執行，相當於Timer中的Enabled=False。因為setInterval可以設定多個定時，所以clearInterval要指定清除那個定時器的標識，即setInterval的返回值。
var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
（2、setTimeout也是定時執行，但是不像setInterval那樣是定時執行，而是設定時間後只執行一次，clearTimeout也是清除定時。
很好區分：Interval是定時；Timeout是超時之意。
var timeoutld=setTimeout("alert('hello')",2000);
（3、案例：實現標題欄走馬燈的效果，也就是浏覽器的標題文字每隔500ms向右滾動一下
復制代碼 代碼如下:
跑馬燈效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來到daomul的博客，歡迎再來，謝謝</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var first = title.charAt(0);
var last = title.substring(1, title.length);
document.title = last+first;
}
setInterval("scroll()",500);
</script>
</head>
<body>
</body>
</html>
3、
（1、onload:網頁加載完畢時觸發，浏覽器是一邊下載文檔、一邊解析執行，可能會出現JavaScript執行時需要操作某個元素，這個元素還沒有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之後。元素的onload事件是元素自己加載完畢時觸發，而body 裡的onload才是全部加載完成。
（2、onunload：網頁關閉（或者離開）後觸發。onbeforeunload：窗口離開（比如前進、後退、關閉之前）就會彈出確認消息。如： <body onbeforeunload="Window.event.returnValue='真的要放棄發貼退出嗎？'">
4、
除了有特有的屬性之外，當然還有通用的HTML元素的事件：onclick(單擊)、ondblclick(雙擊)、onkeydown(按鍵按下)、onkeyup(按鍵釋放)、onkeypress(點擊按鍵)、onmousedown(鼠標按下)、onmousemove(鼠標移動)、onmouseout(鼠標離開元素范圍)、
onmouseover(鼠標移動到元素范圍)、onmouseup(鼠標按鍵釋放)等。
5、window對象的屬性
（1、window.location.href="http://www.sina.com.cn",重新導向新的地址，和navigate方法效果一樣。window.location.reload()刷新頁面。
（2、window.event是非常重要的屬性，用來獲得發生事件時的信息，事件不局限於window對象的事件，所有元素的事件都可以通過event屬性取到相關信息。
a、altKey屬性，boot類型，表示發生事件時alt鍵是否被按下，類似的還有ctrlKey、shiftKey屬性
復制代碼 代碼如下:
windows事件樣例
<!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>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='頁面1.htm'" />
<input type="button" value="點擊" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通點擊')}" /><a
href="http://www.baidu.com" onclick="alert('禁止訪問！');window.event.returnValue=false;"></a>
<form action="daomul.aspx">
<input type="submit" value="提交" onclick="alert('數據有問題!');window.event.returnValue=false;" />
</form>
</body>
</html>
b、 clientX、clientY 發生事件時鼠標在客戶區（浏覽器界頁面內）的坐標；screenX、screenY發生事件時鼠標在屏幕上的坐標；offsetX、offsetY發生事件時鼠標相對於事件源（按鈕button內）的坐標。
c、returnValue屬性，如果將returnValue設置為false，就會取消默認事件的處理。
d、srcElement:獲得事件源對象
e、KeyCode：發生時間時的按鍵值
f、button：發生時間時鼠標的按鍵，1為左鍵，2為右鍵，3為左右鍵同時按。
<body onmousedown="if(event.button==2){alert('禁止復制')}">
6、clipboardData對象，對粘貼板的操作。clearData("Text")清空粘貼板；getData("Text")讀取粘貼板的值，返回值為粘貼板中的內容；setData("Text",val),設置粘貼板中的值。
（1、當復制的時候body的oncopy方法被觸發，直接return false就是禁止復制。<body oncopy="alert('禁止復制！');return false;">
（2、很多元素也有oncopy、onpaste事件。
例子1：禁止復制
<body oncopy="alert('禁止復制！');return false;">
例子2：給粘貼板賦值：復制地址給好友
<input type="button" value="分享本頁給好友" onclick="clipboardData.setData('Text','我發現一個很實用的網站，計算機方面的!'+
location.href);alert(' 已經將地址放到粘貼板中，趕快通過QQ傳遞給你的好友吧！');" />
例子3：禁止粘貼到文本框
請輸入您的手機號碼：<input type="text" />
請您再次輸入手機號碼：<input type="text" onpaste="alert('為保證您充值到正確的手機號，請勿粘貼手機號，請直接填！');return false;"/>:
例子4：復制時附帶內容
在網站中復制文章的時候，為了防止那些拷貝黨不添加文章來源，自動在復制的內容後添加版權聲明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文來自博客園技術專區，轉載請注明來源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。
用戶復制動作發生0.1秒以後再去修改粘貼板中的內容。100ms只是一個經常取值，寫1000、10、50、20……都行。不能直接在oncopy中執行對粘貼板的操作，因此設定定時器，0.1秒以後執行，這樣就不再oncopy的執行調用棧上了。
7、頁面前進、後退：history操作歷史記錄
window.history.back()後退；
window.history.forward()前進。也可以用window.history.go(-1)表前進；window.history.go(1)表後退。
實例1：
<body>這裡是第2頁<a href="javascript:window.history.back()">後退</a><input type="button" value="後退" onclick="window.history.go(-1)" />
</body>
8、document屬性（最復雜的屬性）document是window對象的一個屬性，因為使用window對象成員的時候可以省略window,所以一般直接寫document。
（1、write:向文檔中寫入內容。writeln和write差不多，只不過最後添加一個回車
（2、<input type="button" value="點擊" onclick="document.write('<font color=blue>您好</font>')" />
（3、在onclick等事件中寫的代碼會沖掉頁面中的內容，只有在頁面加載過程中write才會與原有內容融合在一起
（4、<script type="text/javascript">
document.write("<font color=red>您好</font>");
</script>
案例1：
復制代碼 代碼如下:
getElementById
<!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>
<title>getElementById</title>
<script type="text/javascript">
//不建議直接通過id操作元素，而是通過getElementById根據元素的Id獲得對象
function btnClick() {
//alert(textbox1.value);
var txt = document.getElementById("textbox1");
alert(txt.value);
}
function btnClick2() {
//alert(form1.textbox2.value);//要顯示表單裡的信息需添加表單名稱
var txt = document.getElementById("textbox2");
alert(txt.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="點擊我" onclick="btnClick()" />
<form action="頁面1.htm" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="顯示剛輸入的內容" onclick="btnClick2()" />
</form>
</body>
</html>
案例2：
復制代碼 代碼如下:
getElementByName
<!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>
<title>getElementByName的例子</title>
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
/*//在JS中for(var r in radios)不像C#中的foreach,並不會遍歷每個元素,而是遍歷的key
for (var r in radios) {
alert(r.value);
}*/
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
function btnClick2() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs(i);
input.value = "welcome to my room";
}
}
</script>
</head>
<body>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="保密" />保密
<input type="button" value="click" onclick="btnClick()" />
<br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="button" value="bytagname" onclick="btnClick2()" />
</body>
</html>
案例3：
復制代碼 代碼如下:
getElementByTagName
<!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>
<title>getElementByTagName</title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick;
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement//取得引發事件的控件
if (input == window.event.srcElement) {
input.value = "哈哈"; //以下五個按鈕，點到的那個就變為“哈哈”，其余都為“嗚嗚”，點“嗚嗚”就變為“哈哈”
}
else {
input.value = "嗚嗚";
}
}
}
</script>
</head>
<body onload="initEvent()">
<input type="button" value="歡迎進入" />
<input type="button" value="歡迎進入" />
<input type="button" value="歡迎進入" />
<input type="button" value="歡迎進入" />
<input type="button" value="歡迎進入" />
</body>
</html>
案例4：
復制代碼 代碼如下:
閱讀協議等待計時器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來到daomul的博客，歡迎再來，謝謝</title>
<script type="text/javascript">
var leftTime = 10;
var TimeID;
function scroll() {//alert(222);
var btn = document.getElementById("btnAgree");
//如果網頁速度非常慢的話，可能定時器運行的時候控件還沒有加載！
if (btn) {//alert(11);
if (leftTime <= 0) {
btn.value = "同意";
btn.disabled = "";
clearInterval(TimeID);
}
else {
btn.value = "請閱讀協議，同意（還剩下"+leftTime+"秒）";
leftTime--;
}
}
}
TimeID=setInterval("scroll()", 1000);
</script>
</head>
<body>
<textarea id="TextArea1" cols="20" rows="2"></textarea>
<input id="btnAgree" type="button" value="同意" disabled="disabled"/>
</body>
</html>
案例5：
復制代碼 代碼如下:
美女時鐘
<!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>
<title>歡迎來到daomul的博客，歡迎再來，謝謝</title>
<script type="text/javascript">
//var now = new Date();不能放在這，否則取得時間不變
function Fill2Len(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refresh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return; //沒加載就直接return
}
var now = new Date(); //每次刷新時取得時間
var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";
imgMM.src = "MMClock/" + filename;
}
setInterval("Refresh()", 1000);
</script>
</head>
<body onload="Refresh()">
<img id="imgMM" src="" />
</body>
</html>
案例6：搜索框關鍵字搜索
復制代碼 代碼如下:
搜索框關鍵字搜索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來到daomul的博客，歡迎再來，謝謝(文本框關鍵字3)</title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <= 0) {
keyword.value = "請輸入搜索關鍵詞";
keyword.style.color = 'Gray';
}
}
function inputFocus(keyword) {
//var keyword = document.getElementById("keyword");把this傳給兩個方法，省去了getElementById依賴id
if (keyword.value == "請輸入搜索關鍵詞") {
keyword.value = "";
keyword.style.color = 'Black';
}
}
</script>
</head>
<body onload="InitLoad()">
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" value="請輸入搜索關鍵詞" style="color: Gray" />
<input type="button" value="搜索" />
</body>
</html>
16、Form表單： Form 對象是表單的 Dom 對象。
方法： submit() 提交表單，但是不會觸發 onsubmit 事件。 實現 autopost ，也就是焦點離開控件以後頁面立即提交，而不是 只有提交 submit 按鈕以後才提交，當光標離開的時候觸發 onblur 事件，在 onblur 中調用 form 的 submit 方法。在點擊 submit 後 form 的 onsubmit 事件被觸發 ，在 onsubmit 中可以 進行數據校驗，數據有問題， 返回 false 即可取消提交。
案例1：
復制代碼 代碼如下:
Form表單
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來到daomul的博客，歡迎再來，謝謝(Form表單提交4)</title>
<script type="text/javascript">
</script>
</head>
<body onload="InitLoad()">
<form action="default.aspx" id="form1" onsubmit="return false;">
<!--通過click函數"欺騙"其他按鈕觸發-->
<input type="button" id="btn1" onclick="alert('觸發了其他button了')" value="按鈕" />
<input type="button" onclick="document.getElementById('btn1').click()" value="同樣提交" />
<!--因為return false，所以不可提交表單，但是調用submit(),卻可以觸發方法-->
<input type="submit" onclick="document.getElementById('form1').submit()" value="可提交的submit" />
<input type="submit" value="不可提交的submit" />
<!--類似於asp.net中的autopostback(相同的還有文本框輸入後移開的onblur方法的submit調用)-->
<select id="Select1" onchange="document.getElementById('form1').submit()">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
</form>
</body>
</html>
17、正則表達式
*JavaScript 中創建正則表達式類的方法：
var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
/ 表達式 / 是 JavaScript 中專門為簡化正則表達式編寫而提供的語法，
寫在 // 中的正則表達式就不用管轉義符了。
*RegExp 對象的方法：
** test(str) 判斷字符串 str 是否匹配正則表達式，相當於 IsMatch
var regex = /.+@.+/;
alert(regex.test("[email protected]"));
alert(regex.test("ab.com"));
** exec(str) 進行搜索匹配，返回值為匹配結果 ( * )
** compile 編譯表達式，提高運行速度。 ( * )
*String 對象中提供了一些與正則表達式相關的方法，相當於對於
RegExp 類的包裝，簡化調用：
match(regexp) ,相當於調用 exec
var s = "[email protected]";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ，服務器： " + RegExp.$2);
案例1：
復制代碼 代碼如下:
正則表達式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來到daomul的博客，歡迎再來，謝謝</title>
<script type="text/javascript">
var s = "[email protected]";
var regex = /(.+)@(.+)/;
s.match(regex);
alert(RegExp.$1); //取得第一組即@前面的部分
alert(RegExp.$2); //取得@後面的部分
</script>
</head>
<body>
</body>
</html>
18、不同浏覽器的差異
<!--
（1、appendChild，insertCell，px
（2、獲取網頁中哪個元素觸發事件
IE中使用srcElement
FireFox使用target
（3、使用Dom獲取標簽文本
IE中使用innerText
FireFox使用textContent
（4、動態網頁綁定
Id:attachEvent
FireFox:addEventListener
（5、不同浏覽器css樣式支持不同：
哀悼網頁使用的css只有IE才支持，FF不支持
（6、JQuery進行封裝：可在不同浏覽器中進行封裝
解決不同浏覽器中Dom的不同-->
19、鍵盤碼操作以及金融框案例:
案例1：
財務相關系統中涉及到金額的文本框有如下要求：
*進入金額文本文本框不使用中文輸入法 不能輸入非數字 焦點在文本框中時文本框左對齊；焦點離開文本框時文本框右對齊，顯示千 分位 禁用輸入法： style="ime-mode:disabled"
*禁止鍵入非法值，只有這些才能被鍵入 (k == 9) || (k == 13) ||
(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&
k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return
numonKeyDown()" 不要寫成 onkeydown="numonKeyDown()" 區分事件響應函數 和事件響應函數調用的函數。
* 禁止粘貼 ( 偉大的 Tester) ， <input onpaste="return false;" ，太暴力，應該只是禁止粘貼非法值。在 onpaste 中通過 clipboardData.getData('Text')
取到粘貼板中的值，然後遍歷每個字符，看是否是合法的值，如果全部是合法值才允許粘貼，只要有一個非法值就禁止粘貼。 charAt 、 charCodeAt添加千分位 的方法
* 焦點在的時候左對齊沒有千分位，焦點不在時右對齊千分位：this.style.textAlign='right'
復制代碼 代碼如下:
金融文本框設置
<!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>
<title>歡迎來到daomul的博客，歡迎再來，謝謝</title>
<script type="text/javascript">
//非數字
function numonKeyDown() {
var k = window.event.keyCode;
return isValidNum(k);
}
//判斷k是否為合法的Ascii
function isValidNum(k) {
return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
}
//添加千分位
function commafy(n) {
//var re = /\d{1,3}(?=(\d{3})+$)/g;
//var n1 = n.replace(/^(\d+)/((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$,")+s2;});
re = /(\d{1,3})(?=(\d{3})+(?:$|\D))/g;
n1 = n.replace(re, "$1,")
return n1;
}
//處理粘貼板數據
function numPaste() {
var text = window.clipboardData.getData("Text");
for (var i = 0; i < text.length; i++) {
var asc = text.charCodeAt(i); //charAt→"3",charCodeAt()取到的是ASCII碼
if (!isValidNum(asc)) { //遇到一個非法值就認為要粘貼的內容是非法的return false
return false;
}
}
}
</script>
</head>
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
不能輸入非數字:
<input type="text" style="text-align: right" onkeydown="var k=window.event.keyCode; if((k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)){}else{return false;}" />
<br />
禁用輸入法:
<input type="text" style="text-align: right; ime-mode: disabled;" />
<br />
不能輸入和粘貼非數字:
<input type="text" style="text-align: right;" onpaste="return numPaste()" onkeydown="return numonKeyDown()" />
<br />
添加去掉千分位:
<input id="t" type="text" value="95654784.75"
onblur="this.value=commafy(this.value);this.style.textAlign='right';"
onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')" />
<br />
</body>
</html>
復制代碼 代碼如下:
省市選擇
<!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>
<title>歡迎來到daomul的博客，歡迎再來，謝謝（省市選擇）</title>
<script type="text/javascript">
var data = { "山東": ["濟南", "青島", "濰坊"], "河南": ["鄭州", "洛陽", "三門峽"], "遼寧": ["沈陽", "鞍山", "大連"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
/* 先清除舊的市列表
可以采取這種方式city.option.length=0;
遍歷select的所有子節點，如果從前往後刪，每次都會有漏網之魚，因為有重新排號的問題
從後向前刪就沒順序問題了 */
for (var i = city.childNodes.length - 1; i >= 0; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}
var provName = prov.value;
var cities = data[provName]; //取出的內容["濟南", "青島", "濰坊"]
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="請選擇省">--請選擇省--</option>
</select>
<select id="city">
</select>
</body>
</html>
案例3：復選框實現全選、全不選、反選
復制代碼 代碼如下:
復選框選擇
<!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>
<title>歡迎來到daomul的博客，歡迎再來，謝謝（歌曲選擇）</title>
<script type="text/javascript">
function selAll() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
input1[i].checked = "checked";
}
}
}
function deSelAll() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
input1[i].checked = "";
}
}
}
function reverseSel() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
if (input1[i].checked == true) {
input1[i].checked = false;
}
else{
input1[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<div id="playlist">
<input type="checkbox" id="p1" /><label for="p1">leaving into the dog</label><br />
<input type="checkbox" id="p2" /><label for="p1">take a shower</label><br />
<input type="checkbox" id="p3" /><label for="p1">fire heart</label><br />
<input type="checkbox" id="p4" /><label for="p1">china</label><br />
<p>
<input type="button" onclick="selAll()" value="全選" />
<input type="button" onclick="deSelAll()" value="全不選" />
<input type="button" onclick="reverseSel()" value="反選" />
</p>
</div>
</body>
</html>
案例4：權限選擇
復制代碼 代碼如下:
權限選擇
<!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>
<title>歡迎來到daomul的博客，歡迎再來，謝謝（權限選擇）</title>
<script type="text/javascript">
function moveSelected(selectedSrc, selectedLast) {
for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
var newOption = selectedSrc.childNodes[i];
if (newOption.selected == true) {
selectedSrc.removeChild(newOption);
newOption.selected = false;
selectedLast.appendChild(newOption);
}
}
}
function moveAll(selectedSrc, selectedLast) {
for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
var newOption = selectedSrc.childNodes[i];
selectedSrc.removeChild(newOption);
selectedLast.appendChild(newOption);
}
}
</script>
</head>
<body>
<select style="float:left;width:15%;height:100px;" id="select1" multiple="multiple">
<option>添加</option>
<option>刪除</option>
<option>修改</option>
<option>查詢</option>
<option>打印</option>
</select>
<div style="float:left">
<input style="float:left;width:100%;" type="button" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
<input style="float:left;width:100%;" type="button" value=">>" onclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<<" onclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))" />
</div>
<select style="float:left;width:15%;height:100px;" id="select2" multiple="multiple"></select>
</body>
</html>