JavaScript知识归纳（3）
2016-03-01 16:10
639 查看
练习：
check.xml
练习：
list2Other.html
练习：
cities.xml
练习:
check.xml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>check.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" 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(){
//全选
document.getElementById("checkall").onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
var item = items[i];
//item.setAttribute("checked","checked");
//item.setAttribute("checked",true);
item.checked = "checked";
}
}
//全不选
document.getElementById("checkallNo").onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
var item = items[i];
//IE浏览器支持，火狐浏览器不支持
//item.setAttribute("checked",null);
//item.setAttribute("checked",false);
//IE、火狐浏览器都支持
item.checked = null;
}
}
//反选
document.getElementById("check_revsern").onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
var item = items[i];
// if(item.checked){
// item.checked = false;
// }else{
// item.checked = true;
// }
item.checked = !item.checked;
}
}
//<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
document.getElementById("checkItems").onclick = function(){
//方法一：
// if(this.checked){
// var items = document.getElementsByName("items");
// for(var i=0;i<items.length;i++){
// var item = items[i];
// item.checked = true;
// }
// }else{
// var items = document.getElementsByName("items");
// for(var i=0;i<items.length;i++){
// var item = items[i];
// item.checked = false;
// }
// }
//方法二：
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
var item = items[i];
item.checked = this.checked;
}
}
}
</script>
</html>练习：
list2Other.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
BODY {
font-family: "Courier";
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}
td {
font-size: 12px;
} .default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
} .default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
} .nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
} .default_list {
font-size: 12px;
border: 1px solid #849EB5;
} .default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
} .nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
} .wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
} .wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
} .wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
} .wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
} .wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
} .inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
} .inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
} .tablebg {
font-size: 12px;
} .tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
} .td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
} .td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
} .td4 {
background-color: #F6F6F6;
line-height: 20px;
} .td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
} .tb td {
font-size: 12px;
border: 2px groove #ffffff;
} .noborder {
border: none;
} .button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: "Courier";
} .textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
-->
</style>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" /><input name="add_all" id="add_all" type="button" class="button" value="==>" /><input name="remove" id="remove" type="button" class="button" value="<--" /><input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
//从左侧选中移到右侧<input name="add" id="add" type="button" class="button" value="-->" />
document.getElementById("add").onclick = function(){
var first = document.getElementById("first");
var options = first.getElementsByTagName("option");
//方法一：定长，防止javascript的数组的变化
var len = options.length;
// for(var i=0;i<len;i++){
// /**
// * .selectedIndex:返回下拉菜单中选中的索引值，从0开始
// * 如果值为-1，此时下拉菜单中所有的option都没有被选中
// * 如果值不等于-1，此时下拉菜单中有被选中的值，并返回对应的索引值
// */
//// alert(first.selectedIndex);//-1
// //说明有被选中的值，从左侧的option移动到右侧的option中
// if(first.selectedIndex!=-1){
// document.getElementById("second").appendChild(options[first.selectedIndex]);
// }
// }
//方法二：从后往前移动，解决javascript数组的可变性
for (var i = options.length; i > 0; i--) {
if (first.selectedIndex != -1) {
document.getElementById("second").appendChild(options[first.selectedIndex]);
}
}
}
//从左侧全部移到右侧<input name="add_all" id="add_all" type="button" class="button" value="==>" />
document.getElementById("add_all").onclick = function(){
var first = document.getElementById("first");
var options = first.getElementsByTagName("option");
var len = options.length;
for (i = len; i > 0; i--) {
document.getElementById("second").appendChild(options[0]);
}
}
//双击选择，从左侧到右侧<select name="first" size="10" multiple="multiple" class="td3" id="first">
document.getElementById("first").ondblclick = function(){
var first = document.getElementById("first");
var options = first.getElementsByTagName("option");
document.getElementById("second").appendChild(options[first.selectedIndex]);
}
//另外3个功能，自行完成！
//从右侧选中移到左侧<input name="remove" id="remove" type="button" class="button" value="<--" />
//选中的从右边---->左边
document.getElementById("remove").onclick = function(){
//获取first
var firstElement = document.getElementById("first");
//获取second
var secondElement = document.getElementById("second");
//获取second下所有option元素
var optionElements = secondElement.getElementsByTagName("option");
//列表的长度
var optionLength = optionElements.length;
//alert("optionLength "+optionLength);
//alert("secondElement.selectedIndex "+secondElement.selectedIndex);
//selectedIndex 该下标返回下拉列表中选中的索引值
for (var i = 0; i < optionLength; i++) {
if (secondElement.selectedIndex != -1) {
//alert("firstElement.selectedIndex "+firstElement.selectedIndex);
firstElement.appendChild(optionElements[secondElement.selectedIndex]);
}
}
}
//全部从右边---->左边
document.getElementById("remove_all").onclick = function(){
//获取first
var firstElement = document.getElementById("first");
//获取second
var secondElement = document.getElementById("second");
//获取first下所有option元素
var optionElements = secondElement.getElementsByTagName("option");
//列表的长度
var optionLength = optionElements.length;
for (var i = 0; i < optionLength; i++) {
firstElement.appendChild(optionElements[0]);
}
}
//双击从右---->左
var secondElement = document.getElementById("second");
//双击事件
secondElement.ondblclick = function(){
//alert(firstElement.length);
var firstElement = document.getElementById("first");
var optionElements = secondElement.getElementsByTagName("option");
firstElement.appendChild(optionElements[secondElement.selectedIndex]);
}
}
</script>
</html>练习：
cities.xml
<?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> </china>city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
window.onload = function(){
var provinceElement = document.getElementById("province");
provinceElement.onchange = function(){
//获取 <select id="city" name="city">
var cityElement = document.getElementById("city");
//获取cityElement 所有的子元素<option>
var optionElements = cityElement.getElementsByTagName("option");
//清除 <select id="city" name="city"> 下拉选的值
//从后往前删除
for (var i = optionElements.length - 1; i > 0; i--) {
cityElement.removeChild(optionElements[i]);
}
//读出xml文件
var xmlDoc = parseXML("cities.xml");
//获取所有的<province name="吉林省"> 标签
var provincexmlElements = xmlDoc.getElementsByTagName("province");
//alert(provincexmlElements.length);
//获取变化的省的信息
//alert(this.value);
var provincexmlDocElement;
for (var i = 0; i < provincexmlElements.length; i++) {
//<province name="吉林省">
var provincexmlElement = provincexmlElements[i];
//alert(provincexmlElement.getAttribute("name"));
if (this.value == provincexmlElement.getAttribute("name")) {
provincexmlDocElement = provincexmlElement;
break;
}
}
if (provincexmlDocElement != null) {
/*
*<city>长春</city>
<city>吉林市</city>
*/
var cityxmlElements = provincexmlDocElement.getElementsByTagName("city");
for (var i = 0; i < cityxmlElements.length; i++) {
//获取一个城市节点 <city>长春</city>
var cityxmlElement = cityxmlElements[i];
//获取"长春"
var cityValue = cityxmlElement.firstChild.nodeValue;
//<option><option>
var optionElement = document.createElement("option");
//<option value="长春"><option>
optionElement.setAttribute("value", cityValue);
//<option value="长春">长春<option>
var textElement = document.createTextNode(cityValue);
optionElement.appendChild(textElement);
//添加到<select id="city" name="city">
cityElement.appendChild(optionElement);
}
}
}
}
///////////////////////////////////////////////////////////////////////////////////////////////
function parseXML(filename){
var xmlDoc;
try { //Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try { //Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
xmlDoc.async = false;
//解析器加载名为 "xxx.xml" 的 XML 文档
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</html>练习:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
</head>
<body>
<p>
员工信息录入
</p>
<form name="empForm" id="empForm" method="post" action="user.html">
<table border=1>
<tr>
<td>
真实姓名(不能为空 ,没有其他要求)
</td>
<td>
<input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>
登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):
</td>
<td>
<input type="text" id="username" name="username" />
</td>
</tr>
<tr>
<td>
密码(不能为空,长度6-12字符或数字,不能包含中文字符):
</td>
<td>
<input type="password" id="psw" name="psw" style="width:120px"/>
</td>
</tr>
<tr>
<td>
重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):
</td>
<td>
<input type="password" id="psw2" name="psw2" style="width:120px"/>
</td>
</tr>
<tr>
<td>
性别(必选其一)
</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>男<input type="radio" id="gender_female" value="f" name="gender"/>女
</td>
</tr>
<tr>
<td>
身份证(15或18为)
</td>
<td>
<input type="text" id="cart" name="cart" size=20 value="12345678912345555" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="button" name="ok" id="ok" value="保存">
</td>
</tr>
</table>
</form>
</body>
<script language="JavaScript">
window.onload = function(){
document.getElementById("ok").onclick = function(){
/***********************************************************************************************/
var idElement = document.getElementById("id");
//alert(idElement);
if (!idElement) {
alert("idElement==null");
}
var i;
if (i == undefined) {
alert(i == undefined);
}
//alert(document.ooi);
/**********************************************************************************************/
/*
* <tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
*/
var realname = document.getElementById("realname").value;
alert("realname " + realname)
alert("realname" + rtrim(ltrim(realname)) + "realname");
if (ltrim(realname) == "") {
alert("null")
}
if (realname == "" || realname == null || realname == 'undefined') {
alert("您的真实姓名不能为空");
document.getElementById("realname").focus();
return false;
}
/**********************************************************************************************/
/*<tr> A-Z a-z 0-9 中文
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>*/
var username = document.getElementById("username").value;
if (username == "" || username == 'null' || username == 'undefined') {
alert("您的登陆名不能为空");
document.getElementById("username").focus();
return false;
}
//验证登陆名的长度不能少于5个字符 使用构造方法
var pattern = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]{0,4}$");
var flag = pattern.test(username);
//alert("flag "+flag);
if (flag) {
alert("您输出的登陆名不能少于5个字符");
document.getElementById("username").focus();
return false;
}
//验证登陆名的长度不能大于8个字符 使用文本格式,在文本中不是使用转义
pattern = /^[A-Za-z0-9\u4e00-\u9fa5]{9,}$/;
if (pattern.test(username)) {
alert("您输出的登陆名不能大于8个字符");
document.getElementById("username").focus();
return false;
}
/**********************************************************************************************/
// /*
// * <tr>
// <td>密码(不能为空,长度6-12字符或数字,psw):</td>
// <td><input type="password" id="psw" name="psw" style="width:120px" /></td>
// </tr>
// */
var psw = document.getElementById("psw").value;
if (psw == "" || psw == 'null' || psw == 'undefined') {
alert("您的密码不能为空");
document.getElementById("psw").focus();
return false;
}
//验证密码长度不能小于6个字符
var pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{0,5}$/;
if (pattern.test(psw)) {
alert("您输入的密码长度不能小于6个");
document.getElementById("psw").focus();
return false;
}
//验证密码长度不能小于12个字符
var pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{13,}$/;
if (pattern.test(psw)) {
alert("您输入的密码长度不能大于12个");
document.getElementById("psw").focus();
return false;
}
/**********************************************************************************************/
// /*<tr>
// <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
// <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
// </tr>
// */
var psw2 = document.getElementById("psw2").value;
if (psw != psw2) {
alert("您两次密码输入的不一致");
document.getElementById("psw2").focus();
return false;
}
/**********************************************************************************************/
// /*
// * <tr>
//<td>性别(必选其一)</td>
// <input type="radio" id="gender_male" value="m" name="gender"/>男
// <input type="radio" id="gender_female" value="f" name="gender"/>女
// */
var flag = false; //true表示有选中的 false表示没有选中的
var genderElements = document.getElementsByName("gender");
//alert(genderElements.length);
for (var i = 0; i < genderElements.length; i++) {
if (genderElements[i].checked) {
flag = true;
break;
}
}
if (!flag) {
alert("您没有第三种性别可选");
return false;
}
/**********************************************************************************************/
/*<tr>
<td>身份证(15或18为)</td>
<td><input type="text" id="cart" name="cart" size=20 value="" /></td>
</tr>*/
var cartValue = document.getElementById("cart").value;
if (cartValue == "" || cartValue == 'null' || cartValue == 'undefined') {
alert("您的身份证不能为空");
document.getElementById("cart").focus();
return false;
}
var len = cartValue.length;
if (len != 15 && len != 18) {
alert("您的身份证输入有误");
document.getElementById("cart").focus();
return false;
}
if (len == 15) {
//验证身份证是15位
var pattern = /^\d{15}$/;
if (!pattern.test(cartValue)) {
alert("15为身份证输入有误");
document.getElementById("cart").focus();
return false;
}
}
//验证身份证是18为
if (len == 18) {
//验证身份证是15位
var pattern = /^\d{18}|\d{17}[X]{1}$/;
if (!pattern.test(cartValue)) {
alert("18为身份证输入有误");
document.getElementById("cart").focus();
return false;
}
}
/**********************************************************************************************/
}
}
function ltrim(str){
if (str.charAt(0) == " ") {
str = str.substring(1, str.length);
//alert("str="+str)
str = ltrim(str);
}
return str;
}
function rtrim(str){
var slength;
slength = str.length;
if (str.charAt(slength - 1) == " ") {
str = str.substring(0, str.length - 1);
//alert("str="+str)
str = rtrim(str);
}
return str;
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js函数基础、字符串函数
- JSON和XML
- ajax跨域，json，jsonp
- js闭包的作用
- js POST提交跳转页面
- js运算符合和就是流程语句
- JavaScript的适用场合有哪些
- JavaScript Promise API
- js变量和js数据类型关系
- Unable to compile class for JSP
- jsp页面乱码
- 如何使用js实现电影海报画廊特效？
- Javascript：谈谈JS的全局变量跟局部变量
- 【Trie图+DP】BZOJ1030[JSOI2007]-文本生成器
- VS2010添加静态链接库——jsoncpp
- maven 加入json-lib.jar 报错 Missing artifact net.sf.json-lib:json-lib:jar:2.4:compile
- JS基础知识点整理
- 利用JS实现的根据经纬度计算地球上两点之间的距离
- javascript 小白学习指南专题 this
- javascript定义对象的方式