例1、 javascript處理表單
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form1.html</title>
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="zhang"/>
<input type="button" name="ok" value="儲存1">
</form>
<form name="form2" action="test.html" method="post">
<input type="text" name="username" value="zhang2"/>
<input type="button" name="ok2" value="儲存2">
</form>
<script language="JavaScript">
//使用兩種方式輸出表單的action值
window.alert(document.form1.action);
window.alert(document.forms[].action);
//使用兩種方式輸出表單的method的值
window.alert(document.form2.method);
window.alert(document.forms[].method);
</script>
</body>
</html>
例2.javascript處理表單頁面
第一步、selectPerson.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selectPerson.html</title>
</head>
<body>
查詢患者消息 <br>
</body>
</html>
第二步、printPerson.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selectPerson.html</title>
</head>
<body>
列印患者消息 <br>
</body>
</html>
第三步、form2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form2.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="zhang"/>
<input type="button" name="ok" value="列印患者資訊" onclick="printPerson()"/>
<input type="button" name="ok2" value="查詢患者資訊" onclick="selectPerson()"/>
</form>
<script language="JavaScript">
//通過javascript函數的方式通路printPerson.html和selectPerson.html
function printPerson(){
//采用表單送出的方式
document.forms[].action="printPerson.html";
document.forms[].method="post";
document.forms[].submit();
}
function selectPerson(){
//采用表單送出的方式
document.forms[].action="selectPerson.html";
document.forms[].method="post";
document.forms[].submit();
}
</script>
</body>
</html>
例3、使用構造函數、直接量定義javascript函數
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>function.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="zhang"/>
<input type="button" name="ok" value="儲存"/>
</form>
<script language="JavaScript">
//1.構造函數方式定義javascript函數,都要用單引号引上，前面有多個參數，最後一個為函數體
var add=new Function('a','b','return a+b');
//調用
var sum=add(,);
alert(sum);
//2.使用函數直接量定義函數
var add=function(a,b){return a+b;}
//調用
var sum=add(,);
alert(sum);
</script>
</body>
</html>
例4、getElementById方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementById.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="國慶六十周年" id="tid" onchange=/>
<input type="button" name="ok" value="儲存"/>
</form>
<script language="JavaScript">
//輸出<input type="text" name="username" value="國慶六十周年" id="tid" onchange=/>value屬性的值
var tidElement = document.getElementById("tid");
alert(tidElement.value);
//輸出<input type="text" name="username" value="國慶六十周年" id="tid" onchange=/>type屬性的值
alert(tidElement.type);
</script>
</body>
</html>
例5、getElementsByName.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementById.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="國慶六十周年1" id="tid_1"/><br>
<input type="text" name="username" value="國慶六十周年2" id="tid_2"/><br>
<input type="text" name="username" value="國慶六十周年3" id="tid_3"/><br>
<input type="button" name="ok" value="儲存"/>
</form>
<script language="JavaScript">
//1.通過元素的name屬性擷取所有元素的引用
var usernameElements = document.getElementsByName("username");
//2.測試該資料的長度
alert(usernameElements.length);
//3.周遊元素，輸出所有value屬性的值
for(var i=;i<usernameElements.length;i++){
var usernameElement=usernameElements[i];
alert(usernameElement.value);
}
//4.為每個文本框(<input type="text"/>)增加change事件，當值改變時，輸出改變的值
for(var i=;i<usernameElements.length;i++){
//4.1擷取的是每個文本框對象
var usernameElement=usernameElements[i];
//4.2為每個文本框對象注冊onchange事件
usernameElement.onchange=function(){
alert(this.value);
}
}
</script>
</body>
</html>
例6、getElementsByTagName()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementsByTagName.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="國慶六十周年1" id="tid_1"/><br>
<input type="text" name="username" value="國慶六十周年2" id="tid_2"/><br>
<input type="text" name="username" value="國慶六十周年3" id="tid_3"/><br>
<input type="button" name="ok" value="儲存"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士***</option>
<option value="碩士" selected="selected">碩士***</option>
<option value="大學">大學***</option>
<option value="幼稚園">幼稚園***</option>
</select>
<select name="job" id="job">
<option value="美容">美容***</option>
<option value="IT">IT***</option>
<option value="程式員" selected="selected">程式員***</option>
<option value="建築師">建築師***</option>
</select>
<script language="JavaScript">
//////////////////////////////////////////////////////////////////////////
//1.擷取所有的input元素，傳回值是數組
var inputElments = document.getElementsByTagName("input");
//2.測試長度
alert(inputElments.length);
//3.周遊，輸出value
for(var i=;i<inputElments.length;i++){
var inputElment=inputElments[i];
alert(inputElment.value);
}
/////////////////////////////////////////////////////////////////////////
//1.輸出type=text中value屬性的值，不包含按鈕（button）
for(var i=;i<inputElments.length;i++){
var inputElment=inputElments[i];
if(inputElment.type!='button'){//type類型不是button
alert(inputElment.value);
}
}
/////////////////////////////////////////////////////////////////////////
//1.輸出下拉選id="edu"中option标簽中value屬性的值
var eduElment = document.getElementById("edu");
var optionElements =eduElment.getElementsByTagName("option");
for(var i=;i<optionElements.length;i++){
alert(optionElements[i].value);
}
//2.輸出所有下拉選的内容
var optionElements2 = document.getElementsByTagName("option");
for(var i=;i<optionElements2.length;i++){
var optionElement2=optionElements2[i];
alert(optionElement2.value);
}
//3.輸出下拉選選中的值
var eduElment2= document.getElementById("edu");
//3.1給select标簽注冊onchange事件
eduElment2.onchange=function(){
alert(this.value);
}
var jobElment= document.getElementById("job");
jobElment.onchange=function(){
alert(this.value);
}
</script>
</body>
</html>
例7、hasChildNodes.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementsByTagName.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="國慶六十周年1" id="tid_1"/><br>
<input type="text" name="username" value="國慶六十周年2" id="tid_2"/><br>
<input type="text" name="username" value="國慶六十周年3" id="tid_3"/><br>
<input type="button" name="ok" value="儲存"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士***</option>
<option value="碩士" selected="selected">碩士***</option>
<option value="大學">大學***</option>
<option value="幼稚園">幼稚園***</option>
</select>
<select name="job" id="job">
<option value="美容">美容***</option>
<option value="IT">IT***</option>
<option value="程式員" selected="selected">程式員***</option>
<option value="建築師">建築師***</option>
</select>
<script language="JavaScript">
//
//1.檢視id="edu"的結點是否含有子節點
var eduElment = document.getElementById("edu");
var flag=eduElment.hasChildNodes();
alert(flag);
//2.産看id=tid_1的結點是否含有子節點
var inputElement=document.getElementById("tid_1");
flag=inputElement.hasChildNodes();
alert(flag);
</script>
</body>
</html>
例8、nodeNameValueType.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementsByTagName.html</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="國慶六十周年1" id="tid_1"/><br>
<input type="text" name="username" value="國慶六十周年2" id="tid_2"/><br>
<input type="text" name="username" value="國慶六十周年3" id="tid_3"/><br>
<input type="button" name="ok" value="儲存"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士***</option>
<option value="碩士" selected="selected">碩士***</option>
<option value="大學">大學***</option>
<option value="幼稚園">幼稚園***</option>
</select>
<select name="job" id="job">
<option value="美容">美容***</option>
<option value="IT">IT***</option>
<option value="程式員" selected="selected">程式員***</option>
<option value="建築師">建築師***</option>
</select>
<p id="pid" name="8888">
明天休息！！！
</p>
<script language="JavaScript">
//
//1.元素結點 id="tid_1" 輸出nodeName,nodeType,nodeValue
var tid_1Element = document.getElementById("tid_1");
alert("元素結點名稱:"+tid_1Element.nodeName);
alert("元素結點類型:"+tid_1Element.nodeType);
alert("元素結點值:"+tid_1Element.nodeValue);
//2.文本結點id="pid"輸出nodeName,nodeType,nodeValue
var pidElement = document.getElementById("pid");
alert("文本結點名稱:"+pidElement.firstChild.nodeName);
alert("文本結點類型:"+pidElement.firstChild.nodeType);
alert("文本結點值:"+pidElement.firstChild.nodeValue);
//3.屬性結點 id=pid中name這個屬性結點 輸出nodeName,nodeType,nodeValue
//getAttributeNode--->該方法擷取屬性結點
var nameElement = pidElement.getAttributeNode("name");
alert("屬性結點名稱:"+nameElement.nodeName);
alert("屬性結點類型:"+nameElement.nodeType);
alert("屬性結點值:"+nameElement.nodeValue);
</script>
</body>
</html>
例9、利用兩種方式列印”明天休息” 列印出id=”bj”該節點的所有子節點的(nodeName,nodeType,nodeValue)
同時列印文本值 北京 海澱 奧運
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementsByTagName.html</title>
</head>
<body>
<ul>
<li id="bj" value="beijing">
北京
<p>海澱</p>
奧運
</li>
<li id="sh" value="shanghai">上海</li>
</ul>
<h1 id="h1" name="8888">
明天休息！！！
</h1>
<script language="JavaScript">
//
//1.方法一、利用firstChild
var h1Element =document.getElementById("h1");
var text =h1Element.firstChild;
//alert(text.nodeValue);
//2.方法二、childNodes表示父元素下的所有的子元素(數組)
var h1ChildElements = h1Element.childNodes;
var text1=h1ChildElements[];
//alert(text1.nodeValue);
//列印出id=”bj”該節點的所有子節點的(nodeName,nodeType,nodeValue)
//同時大一文本 北京 海澱 奧運
var bjElement =document.getElementById("bj");
var childElements = bjElement.childNodes;
for(var i=;i<childElements.length;i++){
if(childElements[i].nodeType!=){
alert(childElements[i].nodeName+":"+childElements[i].nodeValue);
}else{
alert(childElements[i].nodeName+":"+childElements[i].firstChild.nodeValue);
}
}
</script>
</body>
</html>
例10、輸出所有select元素下的所有option元素中對應的文本内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ElementEx.html</title>
</head>
<body>
<select name="edu" id="edu">
<option value="博士">博士***</option>
<option value="碩士" selected="selected">碩士***</option>
<option value="大學">大學***</option>
<option value="幼稚園">幼稚園***</option>
</select>
<select name="job" id="job">
<option value="美容">美容***</option>
<option value="IT">IT***</option>
<option value="程式員" selected="selected">程式員***</option>
<option value="建築師">建築師***</option>
</select>
<script language="JavaScript">
//
var optionElements= document.getElementsByTagName("option");
for(var i=;i<optionElements.length;i++){
var optionElement=optionElements[i];
var optionChild = optionElement.firstChild;
alert(optionChild.nodeValue);
}
</script>
</body>
</html>
例11、當單機“北京”這個節點時，北京這個節點被”反恐精英”替換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
您喜歡的遊戲是：<br>
<ul id>
<li id="fk" value="fankong">反恐<p id="jingying">精英</p></li>
<li id="ms" value="moshou">魔獸</li>
<li id="hj" value="hongjing">紅警</li>
</ul><br>
<script language="JavaScript">
//1.擷取beijign節點
var bjElement=document.getElementById("bj");
//注冊單擊時間
bjElement.onclick=function(){
//2.擷取fankong節點
var fkElement=document.getElementById("fk");
//3.擷取beijing節點的父元素
var ulElement=bjElement.parentNode;
//4.替換
ulElement.replaceChild(fkElement,bjElement);
}
</script>
</body>
</html>
例13、擷取節點中屬性的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
您喜歡的遊戲是：<br>
<ul id>
<li id="fk" value="fankong">反恐精英</li>
<li id="ms" value="moshou">魔獸</li>
<li id="hj" value="hongjing">紅警</li>
</ul><br>
<script language="JavaScript">
//<li id="fk" value="fankong">反恐精英</li>中value的值
var fkElement = document.getElementById("fk");
var fkValue=fkElement.getAttribute("value");
alert(fkValue);
</script>
</body>
</html>
例14、setAttribute(String,String)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的遊戲是：<br>
<ul id>
<li id="fk" value="fankong">反恐精英</li>
<li id="ms" value="moshou">魔獸</li>
<li id="hj" value="hongjing">紅警</li>
</ul><br>
<script language="JavaScript">
//給這個節點增加name屬性<li id="fk" name="fankongjingying" value="fankong">反恐精英</li>
var fkElement = document.getElementById("fk");
fkElement.setAttribute("name","fankongjingying");
var name=fkElement.getAttribute("name");
alert(name);
</script>
</body>
</html>
例15、建立節點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
您喜歡的遊戲是：<br>
<ul id="game">
<li id="fk" value="fankong">反恐精英</li>
<li id="ms" value="moshou">魔獸</li>
<li id="hj" value="hongjing">紅警</li>
</ul><br>
<script language="JavaScript">
//增加城市節點<li id="tj" v="tianjing">天津</li>
//1.建立<li></li>
var liElement = document.createElement("li");
//2.設定屬性<li id="tj" v="tianjing"></li>
liElement.setAttribute("id","tj");
liElement.setAttribute("v","tianjing");
//3.建立文本節點 天津
var textElement = document.createTextNode("天津");
//4.增加文本節點 天津到元素節點上<li id="tj" v="tianjing">天津</li>
liElement.appendChild(textElement);
//5.增加到<ul id="city">
var cityElement =document.getElementById("city");
cityElement.appendChild(liElement);
//6.測試
var tjElement= document.getElementById("tj");
alert(tjElement.getAttribute("v"));
</script>
</body>
</html>
例16、删除節點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
<script language="JavaScript">
//删除<ul id="city"> <li id="cq" value="chongqing">重慶</li>
//1.擷取city節點
var cityElement=document.getElementById("city");
//2.擷取重慶節點
var cqElement=document.getElementById("cq");
//3.删除重慶節點
cityElement.removeChild(cqElement);
//4.一行代碼搞定：
//cqElement.parentNode.removeChild(cqElement);
</script>
</body>
</html>
例17、insertBefore添加新節點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
<script language="JavaScript">
//插入新的節點<li id="tj" name="tianjin">天津</li>
//在<li id="cq" value="chongqing">重慶</li>
//1.建立節點
var liElement=document.createElement("li");
liElement.setAttribute("id","tj");
liElement.setAttribute("name","tianjin");
var TestElement=document.createTextNode("天津");
liElement.appendChild(TestElement);
//2.擷取重慶節點的父節點
var cqElement=document.getElementById("cq");
var node=cqElement.parentNode;
node.insertBefore(liElement,cqElement);
</script>
</body>
</html>
例18、實作insertAfter()的功能，（實際上是沒有insertAfter函數的）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
<script language="JavaScript">
//插入新的節點<li id="tj" name="tianjin">天津</li>
//在<li id="sh" value="shanghai">上海</li>的後面
//1.建立節點
var liElement=document.createElement("li");
liElement.setAttribute("id","tj");
liElement.setAttribute("name","tianjin");
var TestElement=document.createTextNode("天津");
liElement.appendChild(TestElement);
//2.擷取上海節點
var shElement=document.getElementById("sh");
//3.擷取上海節點的下一個兄弟節點
var cqElement= shElement.nextSibling;
//4.擷取上海節點的父節點
var node=shElement.parentNode;
//5.添加新建立的節點
node.insertBefore(liElement,cqElement);
</script>
</body>
</html>
例19、插入新的節點
<li id=”tj” name=”tianjing”>天津</li>
， 如果該節點是最後一個節點，則插入到該節點的在
<li id="sh" value="shanghai">上海</li>
的後面,否則插入到該節點的前面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>elementEx02.html</title>
</head>
<body>
您喜歡的城市：<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul><br>
<script language="JavaScript">
//1.建立節點
var liElement=document.createElement("li");
liElement.setAttribute("id","tj");
liElement.setAttribute("name","tianjin");
var text=document.createTextNode("天津");
liElement.appendChild(text);
//2.得到上海節點
var shElement=document.getElementById("cq");
//3.得到上海節點的下一個兄弟節點
var nextNode=shElement.nextSibling;
//4.得到父節點
var node=shElement.parentElement;
//5.插入
if(nextNode==null){
//node.insertBefore(liElement,nextNode);
//也可以這樣:
node.appendChild(liElement);
}else{
node.insertBefore(liElement,shElement);
}
</script>
</body>
</html>
例20 員工資訊添加與删除的頁面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>user.html</title>
</head>
<body>
<br><br><br>
<center>
添加使用者：<br><br>
使用者名：<input type="text" name="username" id="username"/>
電子郵箱：<input type="text" name="email" id="email"/>
電話：<input type="text" name="phone" id="phone"/>
<br><br>
<button id="addUser">送出</button>
</center>
<br><br><br>
<hr>
<center>
<br>
<table border="1">
<!--這裡一定要有tbody标簽否則下面appendChild不好使-->
<tbody>
<tr>
<th>使用者名</th>
<th>電子郵箱</th>
<th>電話</th>
<th>操作</th>
</tr>
<tr>
<td>fandong</td>
<td>[email protected]</td>
<td>12345</td>
<td><a href="emp?id=fandong">delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
//1.當文檔加載完畢之後，才執行該函數中的内容
window.onload=function(){
//2.點選送出按鈕要做的工作
document.getElementById("addUser").onclick=function(){
//alert("ddd");
//3.擷取input節點的值
var username=document.getElementById("username").value;
var email=document.getElementById("email").value;
var phone=document.getElementById("phone").value;
//4.建立
//4.1 建立<tr>
var trElement = document.createElement("tr");
//4.2建立<td>
var tdElement1 =document.createElement("td");
var text1=document.createTextNode(username);
tdElement1.appendChild(text1);
var tdElement2 =document.createElement("td");
var text2=document.createTextNode(email);
tdElement2.appendChild(text2);
var tdElement3 =document.createElement("td");
var text3=document.createTextNode(phone);
tdElement3.appendChild(text3);
var tdElement4 =document.createElement("td");
var aElement=document.createElement("a");
aElement.setAttribute("href","deleteEmp?id="+username);
var text4=document.createTextNode("delete");
aElement.appendChild(text4);
tdElement4.appendChild(aElement);
//4.3增加<td>标簽到<tr>标簽
trElement.appendChild(tdElement1);
trElement.appendChild(tdElement2);
trElement.appendChild(tdElement3);
trElement.appendChild(tdElement4);
var tableElements=document.getElementsByTagName("tbody");
var tableElement=tableElements[];
tableElement.appendChild(trElement);
//5注冊超連結的單擊事件
aElement.onclick=function(){
//5.1調用删除tr的方法,使超連結失效
return deleteTr(aElement);
}
}
}
function deleteTr(aElement){
//1.擷取aElement所在tr的第一個td的文本節點的值
var username =aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert(username);
var flag =window.confirm("您真的要删除["+username+"]的值嗎?");
//alert(flag);
//2.點選取消
if(!flag){
return false;//不再往下執行
}
//3.點選确定
//3.1擷取tbody
var tbodyElement=aElement.parentNode.parentNode.parentNode;
//3.2擷取tr元素
var trElement=aElement.parentNode.parentNode;
//3.3删除tr
tbodyElement.removeChild(trElement);
//3.4使連接配接失效
return false;
}
</script>
</html>
例21、實作全選、全不選、反選
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>check.html</title>
</head>
<body>
您的愛好很廣泛！！！<br>
<input type="checkbox" id="checkItems" value="全選/全不選">全選/全不選<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="遊泳"/>遊泳
<input type="checkbox" name="items" value="唱歌"/>唱歌<br>
<input type="button" name="checkall" id="checkall" value="全選"/>
<input type="button" name="checkall" id="checkallno" value="全不選"/>
<input type="button" name="checkall" id="check_revsern" value="反選"/>
</body>
<script language="JavaScript">
window.onload=function(){
var checkallElment=document.getElementById("checkall");
checkallElment.onclick=function(){
//1.擷取所有的複選框
var checkboxElements=document.getElementsByName("items");
for(var i=;i<checkboxElements.length;i++){
var checkboxElement=checkboxElements[i];
//方法一：
//checkboxElement.setAttribute("checked","checked");
//方法二：
checkboxElement.checked="checked";
}
}
var checkallnoElement=document.getElementById("checkallno");
checkallnoElement.onclick=function(){
var checkboxElements=document.getElementsByName("items");
for(var i=;i<checkboxElements.length;i++){
var checkboxElement=checkboxElements[i];
//方法一、
//checkboxElement.setAttribute("checked",null);
//方法二、
checkboxElement.checked=null;
}
}
//處理反選
var check_revsernElement=document.getElementById("check_revsern");
check_revsernElement.onclick=function(){
var checkboxElements=document.getElementsByName("items");
for(var i=;i<checkboxElements.length;i++){
var checkboxElement=checkboxElements[i];
if(checkboxElement.checked){
checkboxElement.checked=null;
}else{
checkboxElement.checked="checked";
}
}
}
var checkItemsElement=document.getElementById("checkItems");
checkItemsElement.onclick=function(){
var checkboxElements=document.getElementsByName("items");
if(this.checked){
for(var i=;i<checkboxElements.length;i++){
var checkboxElement=checkboxElements[i];
checkboxElement.checked="checked";
}
}else{
for(var i=;i<checkboxElements.length;i++){
var checkboxElement=checkboxElements[i];
checkboxElement.checked=null;
}
}
}
}
</script>
</html>
例22、實作下列功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
</head>
<body>
<select name="select1" size="10" multiple="multiple" id="first">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
<option>選項6</option>
<option>選項7</option>
<option>選項8</option>
</select>
<input type="button" id="add" value="-->">
<input type="button" id="add_all" value="==>">
<input type="button" id="remove" value="<--">
<input type="button" id="remove_all" value="<==">
<select name="select1" size="10" multiple="multiple" style="width:60" id="second">
</select>
</body>
<script language="JavaScript">
window.onload=function(){
//1.實作右移功能
document.getElementById("add").onclick=function(){
var firstElement=document.getElementById("first");
var optionElements=firstElement.getElementsByTagName("option");
var secondElement=document.getElementById("second");
var len=optionElements.length;
/*javascript中的數組的長度是動态變化的,下面的for循環中的len是不能換為：
* optionElements.length的,*/
for(var i=;i<len;i++){
//selectedIndex:select元素節點的一個屬性,傳回下拉清單中選中的索引值,如果沒有被選中的，selectedIndex=-1
//alert(firstElement.selectedIndex);
if(firstElement.selectedIndex!=-){
secondElement.appendChild(optionElements[firstElement.selectedIndex]);
}
}
}
//2.實作全移 左 --->右
document.getElementById("add_all").onclick=function(){
var firstElement=document.getElementById("first");
var optionElements=firstElement.getElementsByTagName("option");
var secondElement=document.getElementById("second");
var len=optionElements.length;
for(var i=;i<len;i++){
//注意為什麼是：optionElements[0]，數組在不斷變化
secondElement.appendChild(optionElements[]);
}
}
//3.輕按兩下的從左邊移到右邊
var firstElement=document.getElementById("first");
var secondElement=document.getElementById("second");
/*輕按兩下事件：ondblclick*/
firstElement.ondblclick=function(){
var optionElements=firstElement.getElementsByTagName("option");
secondElement.appendChild(optionElements[this.selectedIndex]);
//上面一行等同于secondElement.appendChild(this[this.selectedIndex]);
}
}
</script>
</html>