Dom 學(xué)習(xí)以及實(shí)例的使用介紹
1、 重新導(dǎo)航到指定的地址：navigate("//m.dhdzp.com");
2、
（1、*setInterval每隔一段時(shí)間執(zhí)行指定的代碼，第一個(gè)參數(shù)為代碼的字符串，第二個(gè)參數(shù)為間隔時(shí)間（單位毫秒），返回值為定時(shí)器的標(biāo)識(shí)。如：
setInterval("alert('hello')",5000);
*clearInterval取消setInterval的定時(shí)執(zhí)行，相當(dāng)于Timer中的Enabled=False。因?yàn)閟etInterval可以設(shè)定多個(gè)定時(shí)，所以clearInterval要指定清除那個(gè)定時(shí)器的標(biāo)識(shí)，即setInterval的返回值。
var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
（2、setTimeout也是定時(shí)執(zhí)行，但是不像setInterval那樣是定時(shí)執(zhí)行，而是設(shè)定時(shí)間后只執(zhí)行一次，clearTimeout也是清除定時(shí)。
很好區(qū)分：Interval是定時(shí)；Timeout是超時(shí)之意。
var timeoutld=setTimeout("alert('hello')",2000);
（3、案例：實(shí)現(xiàn)標(biāo)題欄走馬燈的效果，也就是瀏覽器的標(biāo)題文字每隔500ms向右滾動(dòng)一下
跑馬燈效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝</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:網(wǎng)頁(yè)加載完畢時(shí)觸發(fā)，瀏覽器是一邊下載文檔、一邊解析執(zhí)行，可能會(huì)出現(xiàn)JavaScript執(zhí)行時(shí)需要操作某個(gè)元素，這個(gè)元素還沒(méi)有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加載完畢時(shí)觸發(fā)，而body 里的onload才是全部加載完成。
（2、onunload：網(wǎng)頁(yè)關(guān)閉（或者離開）后觸發(fā)。onbeforeunload：窗口離開（比如前進(jìn)、后退、關(guān)閉之前）就會(huì)彈出確認(rèn)消息。如： <body onbeforeunload="Window.event.returnValue='真的要放棄發(fā)貼退出嗎？'">
4、
除了有特有的屬性之外，當(dāng)然還有通用的HTML元素的事件：onclick(單擊)、ondblclick(雙擊)、onkeydown(按鍵按下)、onkeyup(按鍵釋放)、onkeypress(點(diǎn)擊按鍵)、onmousedown(鼠標(biāo)按下)、onmousemove(鼠標(biāo)移動(dòng))、onmouseout(鼠標(biāo)離開元素范圍)、
onmouseover(鼠標(biāo)移動(dòng)到元素范圍)、onmouseup(鼠標(biāo)按鍵釋放)等。
5、window對(duì)象的屬性
（1、window.location.href="http://www.sina.com.cn",重新導(dǎo)向新的地址，和navigate方法效果一樣。window.location.reload()刷新頁(yè)面。
（2、window.event是非常重要的屬性，用來(lái)獲得發(fā)生事件時(shí)的信息，事件不局限于window對(duì)象的事件，所有元素的事件都可以通過(guò)event屬性取到相關(guān)信息。
a、altKey屬性，boot類型，表示發(fā)生事件時(shí)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='頁(yè)面1.htm'" />
<input type="button" value="點(diǎn)擊" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通點(diǎn)擊')}" /><a
href="http://www.baidu.com" onclick="alert('禁止訪問(wèn)！');window.event.returnValue=false;"></a>
<form action="daomul.aspx">
<input type="submit" value="提交" onclick="alert('數(shù)據(jù)有問(wèn)題!');window.event.returnValue=false;" />
</form>
</body>
</html>
b、 clientX、clientY 發(fā)生事件時(shí)鼠標(biāo)在客戶區(qū)（瀏覽器界頁(yè)面內(nèi)）的坐標(biāo)；screenX、screenY發(fā)生事件時(shí)鼠標(biāo)在屏幕上的坐標(biāo)；offsetX、offsetY發(fā)生事件時(shí)鼠標(biāo)相對(duì)于事件源（按鈕button內(nèi)）的坐標(biāo)。
c、returnValue屬性，如果將returnValue設(shè)置為false，就會(huì)取消默認(rèn)事件的處理。
d、srcElement:獲得事件源對(duì)象
e、KeyCode：發(fā)生時(shí)間時(shí)的按鍵值
f、button：發(fā)生時(shí)間時(shí)鼠標(biāo)的按鍵，1為左鍵，2為右鍵，3為左右鍵同時(shí)按。
<body onmousedown="if(event.button==2){alert('禁止復(fù)制')}">
6、clipboardData對(duì)象，對(duì)粘貼板的操作。clearData("Text")清空粘貼板；getData("Text")讀取粘貼板的值，返回值為粘貼板中的內(nèi)容；setData("Text",val),設(shè)置粘貼板中的值。
（1、當(dāng)復(fù)制的時(shí)候body的oncopy方法被觸發(fā)，直接return false就是禁止復(fù)制。<body oncopy="alert('禁止復(fù)制！');return false;">
（2、很多元素也有oncopy、onpaste事件。
例子1：禁止復(fù)制
<body oncopy="alert('禁止復(fù)制！');return false;">
例子2：給粘貼板賦值：復(fù)制地址給好友
<input type="button" value="分享本頁(yè)給好友" onclick="clipboardData.setData('Text','我發(fā)現(xiàn)一個(gè)很實(shí)用的網(wǎng)站，計(jì)算機(jī)方面的!'+
location.href);alert(' 已經(jīng)將地址放到粘貼板中，趕快通過(guò)QQ傳遞給你的好友吧！');" />
例子3：禁止粘貼到文本框
請(qǐng)輸入您的手機(jī)號(hào)碼：<input type="text" />
請(qǐng)您再次輸入手機(jī)號(hào)碼：<input type="text" onpaste="alert('為保證您充值到正確的手機(jī)號(hào)，請(qǐng)勿粘貼手機(jī)號(hào)，請(qǐng)直接填！');return false;"/>:
例子4：復(fù)制時(shí)附帶內(nèi)容
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文來(lái)自博客園技術(shù)專區(qū)，轉(zhuǎn)載請(qǐng)注明來(lái)源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。
用戶復(fù)制動(dòng)作發(fā)生0.1秒以后再去修改粘貼板中的內(nèi)容。100ms只是一個(gè)經(jīng)常取值，寫1000、10、50、20……都行。不能直接在oncopy中執(zhí)行對(duì)粘貼板的操作，因此設(shè)定定時(shí)器，0.1秒以后執(zhí)行，這樣就不再oncopy的執(zhí)行調(diào)用棧上了。
7、頁(yè)面前進(jìn)、后退：history操作歷史記錄
window.history.back()后退；
window.history.forward()前進(jìn)。也可以用window.history.go(-1)表前進(jìn)；window.history.go(1)表后退。
實(shí)例1：
<body>這里是第2頁(yè)<a href="javascript:window.history.back()">后退</a><input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
8、document屬性（最復(fù)雜的屬性）document是window對(duì)象的一個(gè)屬性，因?yàn)槭褂脀indow對(duì)象成員的時(shí)候可以省略window,所以一般直接寫document。
案例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">
//不建議直接通過(guò)id操作元素，而是通過(guò)getElementById根據(jù)元素的Id獲得對(duì)象
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="點(diǎn)擊我" onclick="btnClick()" />
<form action="頁(yè)面1.htm" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="顯示剛輸入的內(nèi)容" 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,并不會(huì)遍歷每個(gè)元素,而是遍歷的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//取得引發(fā)事件的控件
if (input == window.event.srcElement) {
input.value = "哈哈"; //以下五個(gè)按鈕，點(diǎn)到的那個(gè)就變?yōu)?ldquo;哈哈”，其余都為“嗚嗚”，點(diǎn)“嗚嗚”就變?yōu)?ldquo;哈哈”
}
else {
input.value = "嗚嗚";
}
}
}
</script>
</head>
<body onload="initEvent()">
<input type="button" value="歡迎進(jìn)入" />
<input type="button" value="歡迎進(jìn)入" />
<input type="button" value="歡迎進(jìn)入" />
<input type="button" value="歡迎進(jìn)入" />
<input type="button" value="歡迎進(jìn)入" />
</body>
</html>
案例4：
閱讀協(xié)議等待計(jì)時(shí)器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝</title>
<script type="text/javascript">
var leftTime = 10;
var TimeID;
function scroll() {//alert(222);
var btn = document.getElementById("btnAgree");
//如果網(wǎng)頁(yè)速度非常慢的話，可能定時(shí)器運(yùn)行的時(shí)候控件還沒(méi)有加載！
if (btn) {//alert(11);
if (leftTime <= 0) {
btn.value = "同意";
btn.disabled = "";
clearInterval(TimeID);
}
else {
btn.value = "請(qǐng)閱讀協(xié)議，同意（還剩下"+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：
美女時(shí)鐘
<!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>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝</title>
<script type="text/javascript">
//var now = new Date();不能放在這，否則取得時(shí)間不變
function Fill2Len(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refresh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return; //沒(méi)加載就直接return
}
var now = new Date(); //每次刷新時(shí)取得時(shí)間
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：搜索框關(guān)鍵字搜索
搜索框關(guān)鍵字搜索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝(文本框關(guān)鍵字3)</title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <= 0) {
keyword.value = "請(qǐng)輸入搜索關(guān)鍵詞";
keyword.style.color = 'Gray';
}
}
function inputFocus(keyword) {
//var keyword = document.getElementById("keyword");把this傳給兩個(gè)方法，省去了getElementById依賴id
if (keyword.value == "請(qǐng)輸入搜索關(guān)鍵詞") {
keyword.value = "";
keyword.style.color = 'Black';
}
}
</script>
</head>
<body onload="InitLoad()">
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" value="請(qǐng)輸入搜索關(guān)鍵詞" style="color: Gray" />
<input type="button" value="搜索" />
</body>
</html>
16、Form表單： Form 對(duì)象是表單的 Dom 對(duì)象。
方法： submit() 提交表單，但是不會(huì)觸發(fā) onsubmit 事件。 實(shí)現(xiàn) autopost ，也就是焦點(diǎn)離開控件以后頁(yè)面立即提交，而不是 只有提交 submit 按鈕以后才提交，當(dāng)光標(biāo)離開的時(shí)候觸發(fā) onblur 事件，在 onblur 中調(diào)用 form 的 submit 方法。在點(diǎn)擊 submit 后 form 的 onsubmit 事件被觸發(fā) ，在 onsubmit 中可以 進(jìn)行數(shù)據(jù)校驗(yàn)，數(shù)據(jù)有問(wèn)題， 返回 false 即可取消提交。
案例1：
Form表單
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝(Form表單提交4)</title>
<script type="text/javascript">
</script>
</head>
<body onload="InitLoad()">
<form action="default.aspx" id="form1" onsubmit="return false;">
<!--通過(guò)click函數(shù)"欺騙"其他按鈕觸發(fā)-->
<input type="button" id="btn1" onclick="alert('觸發(fā)了其他button了')" value="按鈕" />
<input type="button" onclick="document.getElementById('btn1').click()" value="同樣提交" />
<!--因?yàn)閞eturn false，所以不可提交表單，但是調(diào)用submit(),卻可以觸發(fā)方法-->
<input type="submit" onclick="document.getElementById('form1').submit()" value="可提交的submit" />
<input type="submit" value="不可提交的submit" />
<!--類似于asp.net中的autopostback(相同的還有文本框輸入后移開的onblur方法的submit調(diào)用)-->
<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、正則表達(dá)式
*JavaScript 中創(chuàng)建正則表達(dá)式類的方法：
var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
/ 表達(dá)式 / 是 JavaScript 中專門為簡(jiǎn)化正則表達(dá)式編寫而提供的語(yǔ)法，
寫在 // 中的正則表達(dá)式就不用管轉(zhuǎn)義符了。
*RegExp 對(duì)象的方法：
** test(str) 判斷字符串 str 是否匹配正則表達(dá)式，相當(dāng)于 IsMatch
var regex = /.+@.+/;
alert(regex.test("a@b.com"));
alert(regex.test("ab.com"));
** exec(str) 進(jìn)行搜索匹配，返回值為匹配結(jié)果 ( * )
** compile 編譯表達(dá)式，提高運(yùn)行速度。 ( * )
*String 對(duì)象中提供了一些與正則表達(dá)式相關(guān)的方法，相當(dāng)于對(duì)于
RegExp 類的包裝，簡(jiǎn)化調(diào)用：
match(regexp) ,相當(dāng)于調(diào)用 exec
var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ，服務(wù)器： " + RegExp.$2);
案例1：
正則表達(dá)式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝</title>
<script type="text/javascript">
var s = "4444@163.com";
var regex = /(.+)@(.+)/;
s.match(regex);
alert(RegExp.$1); //取得第一組即@前面的部分
alert(RegExp.$2); //取得@后面的部分
</script>
</head>
<body>
</body>
</html>
18、不同瀏覽器的差異
<!--
（1、appendChild，insertCell，px
（2、獲取網(wǎng)頁(yè)中哪個(gè)元素觸發(fā)事件
IE中使用srcElement
FireFox使用target
（3、使用Dom獲取標(biāo)簽文本
IE中使用innerText
FireFox使用textContent
（4、動(dòng)態(tài)綁定
Id:attachEvent
FireFox:addEventListener
（5、不同瀏覽器css樣式支持不同：
哀悼網(wǎng)頁(yè)使用的css只有IE才支持，F(xiàn)F不支持
（6、JQuery進(jìn)行封裝：可在不同瀏覽器中進(jìn)行封裝
解決不同瀏覽器中Dom的不同-->
19、鍵盤碼操作以及金融框案例:
案例1：
財(cái)務(wù)相關(guān)系統(tǒng)中涉及到金額的文本框有如下要求：
*進(jìn)入金額文本文本框不使用中文輸入法 不能輸入非數(shù)字 焦點(diǎn)在文本框中時(shí)文本框左對(duì)齊；焦點(diǎn)離開文本框時(shí)文本框右對(duì)齊，顯示千 分位 禁用輸入法： 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()" 區(qū)分事件響應(yīng)函數(shù) 和事件響應(yīng)函數(shù)調(diào)用的函數(shù)。
* 禁止粘貼 ( 偉大的 Tester) ， <input onpaste="return false;" ，太暴力，應(yīng)該只是禁止粘貼非法值。在 onpaste 中通過(guò) clipboardData.getData('Text')
取到粘貼板中的值，然后遍歷每個(gè)字符，看是否是合法的值，如果全部是合法值才允許粘貼，只要有一個(gè)非法值就禁止粘貼。 charAt 、 charCodeAt添加千分位 的方法
* 焦點(diǎn)在的時(shí)候左對(duì)齊沒(méi)有千分位，焦點(diǎn)不在時(shí)右對(duì)齊千分位：this.style.textAlign='right'
金融文本框設(shè)置
<!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>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝</title>
<script type="text/javascript">
//非數(shù)字
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;
}
//處理粘貼板數(shù)據(jù)
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)) { //遇到一個(gè)非法值就認(rèn)為要粘貼的內(nèi)容是非法的return false
return false;
}
}
}
</script>
</head>
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
不能輸入非數(shù)字:
<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 />
不能輸入和粘貼非數(shù)字:
<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">
<!--
案例：實(shí)現(xiàn)省市選擇界面。請(qǐng)選擇省的處理，從后向前刪。
-->
<head>
<title>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝（省市選擇）</title>
<script type="text/javascript">
var data = { "山東": ["濟(jì)南", "青島", "濰坊"], "河南": ["鄭州", "洛陽(yáng)", "三門峽"], "遼寧": ["沈陽(yáng)", "鞍山", "大連"] };
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的所有子節(jié)點(diǎn)，如果從前往后刪，每次都會(huì)有漏網(wǎng)之魚，因?yàn)橛兄匦屡盘?hào)的問(wèn)題
從后向前刪就沒(méi)順序問(wèn)題了 */
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]; //取出的內(nèi)容["濟(jì)南", "青島", "濰坊"]
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="請(qǐng)選擇省">--請(qǐng)選擇省--</option>
</select>
<select id="city">
</select>
</body>
</html>
案例3：復(fù)選框?qū)崿F(xiàn)全選、全不選、反選
復(fù)選框選擇
<!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>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝（歌曲選擇）</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：權(quán)限選擇
權(quán)限選擇
<!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>歡迎來(lái)到daomul的博客，歡迎再來(lái)，謝謝（權(quán)限選擇）</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>
相關(guān)文章
拖放效果，也叫拖拽、拖動(dòng)，學(xué)名Drag-and-drop ，是最常見的js特效之一。 如果忽略很多細(xì)節(jié)，實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但往往細(xì)節(jié)才是難點(diǎn)所在。2008-12-12
js基礎(chǔ)之DOM中document對(duì)象的常用屬性方法詳解
下面小編就為大家?guī)?lái)一篇js基礎(chǔ)之DOM中document對(duì)象的常用屬性方法詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
本文主要介紹了原生js實(shí)現(xiàn)吸頂效果的示例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
javascript數(shù)組去重的方法有很多種，在網(wǎng)上到處都可以找到答案，下面小編給大家整理了一份關(guān)于同類型的數(shù)組去重復(fù)的方法，感興趣的朋友一起看看吧2015-11-11
這篇文章主要為大家詳細(xì)介紹了bootstrap輸入框組的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
小程序?qū)崿F(xiàn)列表多個(gè)批量倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)列表多個(gè)批量倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了JavaScript詞法作用域的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
JScript中的''var''定義變量的作用域...2007-03-03
ES6允許按照一定模式從數(shù)組或?qū)ο笾刑崛≈担缓髮?duì)變量進(jìn)行賦值，稱為解構(gòu)。只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值，這種寫法屬于“模式匹配”。統(tǒng)稱起來(lái)就叫做“解構(gòu)賦值”。2021-05-05