1、函数的定义与调用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<!-- 函数的定义与调用 -->
<script type="text/javascript">
function f1(){
alert("hello javascript!!");
}
</script>
</head>
<body>
<a href="#" οnclick="f1()">click me</a>
</body>
</html>
2、变量的定义与使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 变量的定义与使用 -->
<html>
<head>
<script type="text/javascript">
function f2(){
var a = 100;
//a = '100';
alert(typeof a);//打印变量的类型
}
</script>
</head>
<body>
<a href="" οnclick="f2()">click me</a>
</body>
</html>
3、比较运算符的使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 比较运算符的使用-->
<html>
<head>
<script type="text/javascript">
function f3(){
/**
== 比较的是看值是否相等
*/
var str1 = '123';
var str2 = '123';
if(str1 == str2){
alert("str1 is equal to str2");
}
var a = 123;
var b = '123';
if(a == b){
alert("a is equal to b");
}else{
alert("a is not equal b");
}
/*
=== 先判断的是类型是否相等,然后在判断值是否相等
*/
var i1 = 123;
var s2 = '123';
if(i1 === s2){
alert("i1 is equal to s2");
}else{
alert("i1 is not equal to s2");
}
}
</script>
</head>
<body>
<a href="" οnclick="f3()">click me</a>
</body>
</html>
4、变量的类型
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
function f4(){
//var a = null;
alert(typeof null);//null 的类型是object
var a;
alert(typeof a);//一个变量如果只声明,但是不赋值,那么它的类型还是undefined
}
</script>
</head>
<body>
<a href="" οnclick="f4()">click me</a>
</body>
</html>
5、if()语句里面的判断逻辑
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
function f5(){
/*
需要注意的是if()语句里面的判断逻辑:
1)非空字符串、不为0的字符串都是true
2)null、undefined 为false
*/
//var flag = 'hello';
//var flag = '';
//var flag = 12;
//var flag = 0;
var flag = null;
if(flag){
alert(true);
}else{
alert(false);
}
}
</script>
</head>
<body>
<a href="" οnclick="f5()">click me</a>
</body>
</html>
6、类型转换
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 类型转换 -->
<html>
<head>
<script type="text/javascript">
function f6(){
/*
string ---> number
主要是通过以下几个函数:
parseInt(str),
parseFloat(str),
isNaN(str);
*/
/*
var s = '123';
var s1 = parseInt(s) + 100;//parseInt(s),把s当成整数进行解析
alert(typeof s1 + ' : ' + s1); //最后s1的值为223
*/
/*
var s = '125.04';
var s1 = parseInt(s) + 100;
alert(typeof s1 + ' : ' + s1);
这时候打印出来的结果是225
*/
/*
var s = '125.04';
var s1 = parseFloat(s) + 100;
alert(typeof s1 + ' : ' + s1);//这时候返回的结果是225.0000004
*/
var s = '125a';
if(isNaN(s)){//isNaN(s) : 判断字符串s是否只一个数字
alert('s不是一个数字');
}else{
alert('s是一个数字');
}
}
</script>
</head>
<body>
<a href="" οnclick="f6()">click me</a>
</body>
</html>
7、类型转换
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 类型转换 -->
<html>
<head>
<script type="text/javascript">
/*
number ---> string
主要是通过: .toString()来实现的
*/
function f7(){
var n1 = 123;
var s1 = n1.toString();//js在执行时,会自动将number类型转换成其对应的包装类型Number,然后调用相应的方法
alert(typeof s1 + ' : ' + s1);
alert(s1+100);
}
</script>
</head>
<body>
<a href="" οnclick="f7()">click me</a>
</body>
</html>
8、字符串的常用属性和方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 字符串的常用属性和方法-->
<html>
<head>
<script type="text/javascript">
function f8(){
var str = 'abcde';
alert(str.length); //str.length: 获取字符串的长度
alert(str.substring(1,3));//[1,3) ,索引从0开始
}
</script>
</head>
<body>
<a href="" οnclick="f8()">click me</a>
</body>
</html>
9、字符串中正则表达式的几个应用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 字符串中正则表达式的几个应用-->
<html>
<head>
<script type="text/javascript">
function f8(){
var str = 'abc12de12345asfasd1234';
var reg = /[0-9]+/g;
//alert(typeof reg); JS在执行时,会把/[0-9]+/g转换成一个RegExp对象,g表示搜索整个字符串,i表示忽略大小写
//alert(str.match(reg));//输出的结果是12,12345,1234
var reg2 = /[0-9]+/;
//alert(str.search(reg2));//返回第一次匹配的索引
alert(str.replace(reg,'888'));//将str中符合reg规则的字符串都转换成888
}
</script>
</head>
<body>
<a href="" οnclick="f8()">click me</a>
</body>
</html>
10、一维数组创建与使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 一为数组创建与使用-->
<html>
<head>
<script type="text/javascript">
function f10(){
//第一种创建数组的方式: 使用 new Array()
var arr = new Array();
arr[0] = 1;
arr[2] = '1bc';
arr[10] = 'haha';
//alert(arr.length); //输出 11
//alert(arr[9] + ' , ' + arr[10]); //输出的结果是undefined , haha
var arr1 = [];
arr1[3] = 2;
//alert('arr2.length: ' + arr1.length);//输出结果: 4
var arr2 = [1,false,'abs'];
arr2[5] = 'helloworld';
alert('arr2.length: ' + arr2.length);//输出结果: 6
alert(arr2[5]);//输出结果: helloworld
}
</script>
</head>
<body>
<a href="" οnclick="f10()">click me</a>
</body>
</html>
11、二维数组创建与使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 二维数组创建与使用-->
<html>
<head>
<script type="text/javascript">
function f11() {
var arr = new Array();//二维数组的定义.注意这里写成new Array也是可以的(即省略Array后面的小括号)
arr[0] = [ 1, 11, 111 ];
arr[1] = [ 2, 3, 4, 5 ];
arr[2] = [ 6, 7, 8, 9, 10, 11 ];
for ( var i = 0; i < arr.length; ++i) {
for ( var j = 0; j < arr[i].length; ++j) {
alert(arr[i][j]);
}
}
}
</script>
</head>
<body>
<a href="" οnclick="f11()">click me</a>
</body>
</html>
12、数组的常用方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 数组的常用方法-->
<html>
<head>
<script type="text/javascript">
function f12() {
var arr = ['b','c','a','d'];
//alert(arr.toString());//输出b,c,d,a
//alert(arr);//结果和上面是一样的
var arr1 = ['1','3','2','4'];
//alert(arr.concat(arr1));//b,c,a,d,1,3,2,4
//alert(arr1);//1,3,2,4
//alert(arr1.reverse());//4,2,3,1
//alert(arr1.join('|'));//1|3|2|4
//alert(arr1.slice(1,4));//输出数组中的[1,4)的元素
var arr2 = [111,22,3,99,100];
//alert(arr2.sort());//默认按照字典序进行排序
alert(arr2.sort(function(t1,t2){//这时候从大到小进行排序.所传的对象是函数对象
return t2-t1;
}))
}
</script>
</head>
<body>
<a href="" οnclick="f12()">click me</a>
</body>
</html>
13、全部变量与局部变量
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
<!-- 全部变量与局部变量-->
var i = 100;
function f13() {
var i = 1000;
alert(i);
}
</script>
</head>
<body>
<a href="" οnclick="f13()">click me</a>
</body>
</html>
14、dom操作(重点):查找方式,创建节点,添加节点,删除节点,改变样式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<!--
dom操作(重点)
查找方式
创建节点
添加节点
删除节点
改变样式
-->
<script type="text/javascript">
function f14(){
var obj = document.getElementById('d1');
//alert(obj.innerHTML);//通过innerHTML可以读写一个节点的html内容
obj.innerHTML='i love zzt';
}
</script>
</head>
<body>
<a href="javascript:;" οnclick="f14()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.||| ”Javascript : ;“ 表示一个空白的JS语句 -->
<div id="d1">
<span>hello javascript</span>
</div>
</body>
</html>
15、改变文本框的内容
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<!--
dom操作(重点)
查找方式
创建节点
添加节点
删除节点
改变样式
-->
<!-- 改变文本框的内容 -->
<script type="text/javascript">
function f15(){
var obj = document.getElementById('username');
alert(obj.value);//通过value属性可以读写一个节点的value值
obj.value = 'i love zzt';
}
</script>
</head>
<body>
<input id="username" type="text"/>
<a href="javascript:;" οnclick="f15()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.||| ”Javascript : ;“ 表示一个空白的JS语句 -->
</body>
</html>
16、使用js实现求解两数之和
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<!--
dom操作(重点)
查找方式
创建节点
添加节点
删除节点
改变样式
-->
<!-- 使用js实现求解两数之和 -->
<script type="text/javascript">
function f16(){
var opp1 = document.getElementById('opp1');
var opp2 = document.getElementById('opp2');
var result = document.getElementById('result');
var o1 = parseInt(opp1.value);
var o2 = parseInt(opp2.value);
result.value = o1+o2;
}
</script>
</head>
<body>
<input id="opp1" type="text"/>
<input id="opp2" type="text"/>
<input id="result" type="text"/>
<a href="javascript:;" οnclick="f16()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.||| ”Javascript : ;“ 表示一个空白的JS语句 -->
</body>
</html>
17、使用js实现求解两数之和
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<!--
dom操作(重点)
查找方式
创建节点
添加节点
删除节点
改变样式
-->
<!-- 使用js实现求解两数之和 -->
<script type="text/javascript">
function f17(){
var opp1 = Math.random();//产生[0,1)的随机数
var opp2 = Math.floor(13.68);//向下取整. 13
var opp3 = Math.ceil(13.68);//向上取整 14
Math.c
alert(opp1);
alert(opp2);
alert(opp3);
alert(Math.random() * 33);
}
</script>
</head>
<body>
<a href="javascript:;" οnclick="f17()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.||| ”Javascript : ;“ 表示一个空白的JS语句 -->
</body>
</html>
18、单击项显示特定颜色,其他项显示同一颜色
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<head>
<style>
ul {
list-style-type: none;
}
ul li {
float: left;
width: 120px;
height: 40px;
border: 1px solid black;
margin-left: 20px;
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript">
/*
单击项显示特定颜色,其他项显示同一颜色。
实现思路 :
先把父元素下的所有子元素的原色设置成同一颜色,
然后再修改特定子元素的颜色
*/
function doAction(id){
var obj = document.getElementById('u1');
var arr = obj.getElementsByTagName('li');
for(var i = 0 ; i < arr.length ; ++i){
arr[i].style.backgroundColor='#ff88ee';//style.backgroundColor编译器没有提示
}
var obj1 = document.getElementById(id);
obj1.style.backgroundColor='red';
}
</script>
</head>
<body style="font-size: 30px;">
<ul id="u1">
<!-- 内联样式-->
<li style="background-color: #ff88ee;" id="l1"
οnclick="doAction('l1');">
选项一
</li>
<li style="background-color: #ff88ee;" id="l2"
οnclick="doAction('l2');">
选项二
</li>
<li style="background-color: #ff88ee;" id="l3"
οnclick="doAction('l3');">
选项三
</li>
</ul>
</body>
</html>
19、用户名不能为空
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script type="text/javascript">
/*
用户名不能为空
*/
function check_username(){
var usernameObj = document.getElementById('username');
var usernameMsgObj = document.getElementById('username_msg');
usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = '';
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = '用户名不能为空';
usernameObj.className = 's2';
}
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form>
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" />
<span id="pwd_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
20、禁止浏览器的默认行为(数据不规范则不能提交)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script type="text/javascript">
/*
禁止浏览器的默认行为(数据不规范则不能提交)
*/
function check_username(){
var usernameObj = document.getElementById('username');
var usernameMsgObj = document.getElementById('username_msg');
usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = '';
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = '用户名不能为空';
usernameObj.className = 's2';
return false;
}
return true;
}
function check_form(){
var flag = check_username();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form οnsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" />
<span id="pwd_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
21、禁止浏览器的默认行为(数据不规范则不能提交)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script type="text/javascript">
/*
禁止浏览器的默认行为(数据不规范则不能提交)
*/
function check_username(){
var usernameObj = document.getElementById('username');
var usernameMsgObj = document.getElementById('username_msg');
usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = '';
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = '用户名不能为空';
usernameObj.className = 's2';
return false;
}
return true;
}
/*
正则表达式在JS中的使用
*/
function check_pwd(){
var pwdObj = document.getElementById('pwd');
var pwdMsgObj = document.getElementById('pwd_msg');
pwdObj.className = '';
pwdMsgObj.innerHTML = '';
var reg = /^\d{6}$/
if(!reg.test(pwdObj.value)){
pwdObj.className = 's2';
pwdMsgObj.innerHTML = '密码必须是6位数字';
return false;
}
return true;
}
function check_form(){
var flag = check_username() && check_pwd();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form οnsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" οnblur="check_pwd()"/>
<span id="pwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
22、创建节点与添加节点(1)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
/*
创建节点与添加节点(1)
*/
function f5(){
var obj = document.createElement('div');
obj.innerHTML = 'I love 章泽天';
var buttonObj = document.getElementById('bu1');
buttonObj.appendChild(obj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" οnclick="f5()"/>
</body>
</html>
23、创建节点与添加节点(2)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
.tips{
width:200px;
height: 80px;
background-color: red;
}
</style>
<script type="text/javascript">
/*
创建节点与添加节点(2)
*/
function f6(){
var divObj = document.createElement('div');
divObj.className='tips';
divObj.innerHTML='章泽天 LOVE ME';
var bodyObj = document.getElementById('b1');
var buttonObj = document.getElementById('bu1');
bodyObj.insertBefore(divObj,buttonObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" οnclick="f6()"/>
</body>
</html>
24、引入外部Js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
.tips{
width:200px;
height: 80px;
background-color: red;
}
</style>
<script src="myjs.js"></script>
<script type="text/javascript">
/*
引入外部的JS
*/
function f6(){
var divObj = document.createElement('div');
divObj.className='tips';
divObj.innerHTML='章泽天 LOVE ME';
var bodyObj = $('b1');
var buttonObj = $('bu1');
bodyObj.insertBefore(divObj,buttonObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" οnclick="f6()"/>
</body>
</html>
25、用户名不能为空(使用prototype实现)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
用户名不能为空(使用prototype实现)
*/
function check_username(){
var usernameObj = $('username');
var usernameMsgObj = $('username_msg');
usernameObj.className = '';
usernameMsgObj.innerHTML = '';
if($F('username').strip().length == 0){
usernameMsgObj.innerHTML = '用户名不能为空';
usernameObj.className = 's2';
}
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form>
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" />
<span id="pwd_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
26、创建节点与添加节点:练习
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
/*
创建节点与添加节点:练习
*/
function f9(){
var aObj = document.getElementById('a1');
var divObj = document.createElement('div');
divObj.innerHTML='章泽天也喜欢黄俊东';
aObj.appendChild(divObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<a href="javascript:;" οnclick="f9()" id="a1">我喜欢章泽天</a>
</body>
</html>
27、练习一:使用prototype进行表单验证
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
练习一: 使用prototype进行表单验证
*/
/*
禁止浏览器的默认行为(数据不规范则不能提交)
*/
function check_username(){
var usernameObj = document.getElementById('username');
var usernameMsgObj = document.getElementById('username_msg');
usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = '';
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = '用户名不能为空';
usernameObj.className = 's2';
return false;
}
return true;
}
/*
正则表达式在JS中的使用
*/
function check_pwd(){
var pwdObj = document.getElementById('pwd');
var pwdMsgObj = document.getElementById('pwd_msg');
pwdObj.className = '';
pwdMsgObj.innerHTML = '';
var reg = /^\d{6}$/
if(!reg.test(pwdObj.value)){
pwdObj.className = 's2';
pwdMsgObj.innerHTML = '密码必须是6位数字';
return false;
}
return true;
}
function check_repwd(){
$('repwd').className = '';
$('repwd_msg').innerHTML = '';
if(!($F('pwd') == $F('repwd'))){
$('repwd').className = 's2';
$('repwd_msg').innerHTML = '两次密码要一致';
return false;
}
return true;
}
function check_idcard(){
$('idcard').className = '';
$('idcard_msg').innerHTML = '';
var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;
if(!reg.test($F('idcard'))){
$('idcard').className = 's2';
$('idcard_msg').innerHTML = '身份证的格式不正确';
return false;
}
return true;
}
function check_form(){
var flag = check_username() && check_pwd() && check_repwd() && check_idcard();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form οnsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" οnblur="check_pwd()"/>
<span id="pwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input id="repwd" name="repwd" οnblur="check_repwd()"/>
<span id="repwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>身份证号码</td>
<td>
<input id="idcard" name="idcard" οnblur="check_idcard()"/>
<span id="idcard_msg" class="s1"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
28、HTML Dom中的select对象的使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的select对象的使用
*/
function f11(){
alert($('city').selectedIndex);//打印选项的Index,从0开始
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange="f11();"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
</body>
</html>
29、HTML Dom的this的使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的this的使用
*/
function f12(obj){
alert(obj.selectedIndex);//打印选项的Index,从0开始
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange="f12(this);"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
</body>
</html>
30、HTML Dom中的this的使用,对29的简化
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的this的使用,对29的简化
*/
function f13(obj){
alert(obj);//打印选项的Index,从0开始
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange="f13(this.selectedIndex);"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
</body>
</html>
31、HTML Dom中的select对象的length属性的使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的select对象的length属性的使用
*/
function f14(){
alert($('city').length);//$('city').length获取设置项的个数
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange=""
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input οnclick="f14()" value="click me" type="button"/>
</body>
</html>
32、HTML Dom中的select对象的options属性的使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的select对象的options属性的使用
*/
function f15(){
var arr = $('city').options;//获取select对象的所有options属性
for(var i = 0 ; i < arr.length ; ++i){
alert(arr[i].text + ' : ' + arr[i].value);//text: 显示给用户看的内容; value: 主要用于程序内部识别
}
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange=""
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input οnclick="f15()" value="click me" type="button"/>
</body>
</html>
33、HTML Dom中增加option选项 通过length属性能获取或设置option选项的长度(个数)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的增加option选项
通过length属性能获取或设置option选项的长度(个数)
*/
function f16(){
var op = new Option('大连','dl');
$('city').options[$('city').length] = op;
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange=""
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input οnclick="f16()" value="click me" type="button"/>
</body>
</html>
34、使用prototype来实现级联下拉列表
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style>
#d1 {
width: 450px;
height: 120px;
background-color: #dddddd;
margin: 40px auto;
}
#d1_head {
height: 30px;
font-size: 24px;
color: white;
background-color: blue;
}
#d1_content {
padding-left: 30px;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
使用prototype来实现级联下拉列表.
所谓的级联下拉列表,其实是这么一个东西:
在写脚本之前,第一级可以显示内容,但是第二级没有内容
在写脚本之后,第二级的内容根据第一级的来显示
*/
function f17(index){
var arr = new Array();
arr[0] = [new Option('研究方向','-1')];
arr[1] = [new Option('欧洲英语','e1'),new Option('美国英语','e2')];
arr[2] = [new Option('网格计算','c1'),new Option('图形学','c2'),new Option('文字学','c2')];
$('s2').innerHTML = '';
for(var i = 0 ; i < arr[index].length ; ++i){
$('s2').options[i] = arr[index][i];
}
}
</script>
</head>
<body style="font-size: 30px;">
<div id="d1">
<div id="d1_head">
专业选择
</div>
<div id="d1_content">
<form>
<select name="s1" id="s1" style="width: 120px;"
οnchange="f17(this.selectedIndex);">
<option value="-1">
--专业--
</option>
<option value="english">
英语
</option>
<option value="computer">
计算机
</option>
</select>
<select name="s2" id="s2" style="width: 120px;">
<option value="-1">
--研究方向--
</option>
</select>
<input type="submit" value="确认" />
</form>
</div>
</div>
</body>
</html>
myjs.js
function $(id){
return document.getElementById(id);
}
prototype.js的下载链接:http://download.csdn.net/detail/caihongshijie6/5106001
35、回顾练习一
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<head>
<style>
ul {
list-style-type: none;
}
ul li {
float: left;
width: 120px;
height: 40px;
border: 1px solid black;
margin-left: 20px;
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript">
function doAction(id){
var ulObj = document.getElementById('u1');
var arr = ulObj.getElementsByTagName('li');
for(var i = 0 ; i < arr.length ; ++i){
arr[i].style.backgroundColor = '#ff88ee';
}
var obj = document.getElementById(id);
obj.style.backgroundColor = 'red';
}
</script>
</head>
<body style="font-size: 30px;">
<ul id="u1">
<!-- 内联样式-->
<li style="background-color: #ff88ee;" id="l1"
οnclick="doAction('l1');">
选项一
</li>
<li style="background-color: #ff88ee;" id="l2"
οnclick="doAction('l2');">
选项二
</li>
<li style="background-color: #ff88ee;" id="l3"
οnclick="doAction('l3');">
选项三
</li>
</ul>
</body>
</html>
36、回顾练习二
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function check_username(){
var usernameObj = $('username');
var usernameMsgObj = $('username_msg');
usernameObj.className = '';
usernameMsgObj.innerHTML = '';
if($F('username').strip().length == 0 ){
usernameObj.className = 's2';
usernameMsgObj.innerHTML = '用户名不能为空';
return false;
}
return true;
}
function check_pwd(){
var pwdObj = $('pwd');
var pwdMsgObj = $('pwd_msg');
pwdObj.className = '';
pwdMsgObj.innerHTML = '';
var reg = /^\d{6}$/;
if(!reg.test($F('pwd'))){
pwdObj.className = 's2';
pwdMsgObj.innerHTML = '密码必须是6位数字';
return false;
}
return true;
}
function check_repwd(){
var repwdObj = $('repwd');
var repwdMsgObj = $('repwd_msg');
repwdObj.className = '';
repwdMsgObj.innerHTML = '';
if($F('pwd') != $F('repwd')){
repwdObj.className = 's2';
repwdMsgObj.innerHTML = '两次输入的密码必须一致';
return false;
}
return true;
}
function check_idcard(){
var idcardObj = $('idcard');
var idcardMsgObj = $('idcard_msg');
idcardObj.className = '';
idcardMsgObj.innerHTML = '';
var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;
if(!reg.test($F('idcard'))){
idcardObj.className = 's2';
idcardMsgObj.innerHTML = '身份证号码的格式不正确';
return false;
}
return true;
}
function check_form(){
var flag = check_username() && check_pwd() && check_repwd() && check_idcard();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form οnsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" οnblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" οnblur="check_pwd()"/>
<span id="pwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input id="repwd" name="repwd" οnblur="check_repwd()"/>
<span id="repwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>身份证号码</td>
<td>
<input id="idcard" name="idcard" οnblur="check_idcard()"/>
<span id="idcard_msg" class="s1"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
37、回顾练习三
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
function f3(){
var buttonObj = document.getElementById('b1');
var divObj = document.createElement('div');
divObj.innerHTML = '我喜欢章泽天';
buttonObj.appendChild(divObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" οnclick="f3()"/>
</body>
</html>
38、回顾练习四
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
function f4(){
var bodyObj = document.getElementById('b1');
var buttonObj = document.getElementById('bu1');
var divObj = document.createElement('div');
divObj.innerHTML = '章泽天喜欢我';
bodyObj.insertBefore(divObj,buttonObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" οnclick="f4()"/>
</body>
</html>
39、回顾练习五
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function f5(obj){
alert( '选择的是: ' + obj.selectedIndex);
alert('包含的选项数是: ' + obj.length);
var arr = obj.options;
for(var i = 0 ; i < arr.length ; ++i){
alert(arr[i].text + ' : ' + arr[i].value);
}
}
function f6(){
var op = new Option('北京','bj');
$('city').options[$('city').length] = op;
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
οnchange="f5(this);"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input type="button" value="click" οnclick="f6()"/>
</body>
</html>
40、回顾练习六
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style>
#d1 {
width: 450px;
height: 120px;
background-color: #dddddd;
margin: 40px auto;
}
#d1_head {
height: 30px;
font-size: 24px;
color: white;
background-color: blue;
}
#d1_content {
padding-left: 30px;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function f6(index){
var arr = new Array();
arr[0] = [new Option('-研究方向-','-1')];
arr[1] = [new Option('欧洲英语','e1'),new Option('美国英语','e2')];
arr[2] = [new Option('网格计算','c1'),new Option('图形学','c2'),new Option('美学','c3')];
$('s2').innerHTML = '';
for(var i = 0 ; i < arr[index].length ; ++i){
$('s2').options[i] = arr[index][i];
}
}
</script>
</head>
<body style="font-size: 30px;">
<div id="d1">
<div id="d1_head">
专业选择
</div>
<div id="d1_content">
<form>
<select name="s1" id="s1" style="width: 120px;"
οnchange="f6(this.selectedIndex);">
<option value="-1">
--专业--
</option>
<option value="english">
英语
</option>
<option value="computer">
计算机
</option>
</select>
<select name="s2" id="s2" style="width: 120px;">
<option value="-1">
--研究方向--
</option>
</select>
<input type="submit" value="确认" />
</form>
</div>
</div>
</body>
</html>
原文地址:http://blog.csdn.net/hjd_love_zzt/article/details/19249421