例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[0].action);
//使用两种方式输出表单的method的值
window.alert(document.form2.method);
window.alert(document.forms[1].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[0].action="printPerson.html";
document.forms[0].method="post";
document.forms[0].submit();
}
function selectPerson(){
//采用表单提交的方式
document.forms[0].action="selectPerson.html";
document.forms[0].method="post";
document.forms[0].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(4,5);
alert(sum);
//2.使用函数直接量定义函数
var add=function(a,b){return a+b;}
//调用
var sum=add(4,5);
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=0;i<usernameElements.length;i++){
var usernameElement=usernameElements[i];
alert(usernameElement.value);
}
//4.为每个文本框(<input type="text"/>)增加change事件，当值改变时，输出改变的值
for(var i=0;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=0;i<inputElments.length;i++){
var inputElment=inputElments[i];
alert(inputElment.value);
}
/////////////////////////////////////////////////////////////////////////
//1.输出type=text中value属性的值，不包含按钮（button）
for(var i=0;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=0;i<optionElements.length;i++){
alert(optionElements[i].value);
}
//2.输出所有下拉选的内容
var optionElements2 = document.getElementsByTagName("option");
for(var i=0;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[0];
//alert(text1.nodeValue);
//打印出id=”bj”该节点的所有子节点的(nodeName,nodeType,nodeValue)
//同时大一文本 北京 海淀 奥运
var bjElement =document.getElementById("bj");
var childElements = bjElement.childNodes;
for(var i=0;i<childElements.length;i++){
if(childElements[i].nodeType!=1){
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=0;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>fandong@qq.com</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[0];
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=0;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=0;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=0;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=0;i<checkboxElements.length;i++){
var checkboxElement=checkboxElements[i];
checkboxElement.checked="checked";
}
}else{
for(var i=0;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=0;i<len;i++){
//selectedIndex:select元素节点的一个属性,返回下拉列表中选中的索引值,如果没有被选中的，selectedIndex=-1
//alert(firstElement.selectedIndex);
if(firstElement.selectedIndex!=-1){
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=0;i<len;i++){
//注意为什么是：optionElements[0]，数组在不断变化
secondElement.appendChild(optionElements[0]);
}
}
//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>
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
