JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）
JS案例
表单隔行换色和鼠标悬停换色
表单隔行换色实现思想：表格行，分出奇偶数
- 奇数行，设置背景色
- 偶数行，设置另一背景色
- tagName(“tr”)返回数组，数组有索引
- 设置背景色
鼠标悬停换色实现思想：
- 为每个tr行，绑定鼠标的悬停事件，并记录之前的背景色
- 为每个tr行，绑定鼠标的移出事件，还原回原来的背景色
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr><tr>
<td><input type="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script type="text/javascript">
/*
* 实现思想：
* 表格行，分出奇偶数
* 奇数行，设置背景色
* 偶数行，设置另一背景色
* tagName("tr")返回数组，数组有索引
* 设置背景色
*/
var color = "";
//获取表格中所有行
var trs = document.getElementsByTagName("tr");
//遍历数组
for(var i=2;i<trs.length;i++){
//判断索引的奇偶数
if(i%2==0){
//设置偶数行的背景色
trs[i].bgColor="#999";
}else{
//奇数行
trs[i].bgColor="#ccc";
}
//为每个tr行，绑定鼠标的悬停事件
trs[i].onmouseover=function(){
//记录之前的背景色
color = this.bgColor
this.bgColor="#666";
}
//为每个tr行，绑定鼠标的移出事件
trs[i].onmouseout=function(){
//还原回原来的背景色
this.bgColor=color;
}
}
</script>
</body>
</html>
全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<script type="text/javascript">
/*
* 定义名字：
* 上面复选框，总选框
* 下面复选框，分选框
* <input type="checkbox"> 属性check="checked"
* 所有的分选框属性checked属性，跟随总选框的checked属性走
*
*
*
*/
function selectAll(){
//获取总选框
var all = document.getElementById("all");
//DOM中，属性checked属性值是真假值
//获取所有分选框
var checkBoxes = document.getElementsByClassName("itemSelect");
for(var i=0;i<checkBoxes.length;i++){
//所有的分选框属性checked属性，跟随总选框的checked属性走
checkBoxes[i].checked=all.checked;
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="all" onclick="selectAll(this)" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
省市联动
省市菜单联动：从一个菜单中，找到省，再找到这个省对应的市，填充到另一个菜单中
事件：onchange
数据：省市数据怎么存储问题–>二维数组
注意：
<select id="provinceId" onchange="selectCity(this.value)">
this表示当前的标签对象，this就是select标签，this.value表示select标签的属性值，实际上获取的是option的value值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style type="text/css">
.regist_bg{
background: url(../img/regist_bg.jpg) repeat-x ;
width: 100%;
height: 600px;
padding-top: 40px;
}
.regist{
border: 7px solid #ccc;
width: 800px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
}
input[type="submit"]{
background-image: url(../img/register.gif);
width: 100px;
height: 35px;
color: #fff;
cursor: pointer;
}
</style>
<script type="text/javascript">
/*
* 省市菜单联动：从一个菜单中，找到省，再找到这个省对应的市，填充到另一个菜单中
*
* 事件:onchange
*
* 数据：省市数据怎么存储问题-->二维数组
*
* <select id="provinceId" οnchange="selectCity(this.value)">
* this表示当前的标签对象，this就是select标签，this.value表示select标签的属性值
* 实际上获取的是option的value值
*/
function selectCity(value){
var citys = [
["海淀","昌平","朝阳"],["长春","吉林","延边"],["南京","徐州","苏州"]
];
var str = "<option>----请-选-择-市----</option>";//拼接字符串
var cityId = document.getElementById("cityId");
if(value==""){
cityId.innerHTML=str;
}else{
var city = citys[value];
//遍历元素，元素填充到另一个select 的option中
for(var i=0;i<city.length;i++){
str+="<option>"+city[i]+"</option>";
cityId.innerHTML=str;
}
}
}
</script>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="../index.html" >
<table width="600" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email" size="60"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="60"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" name="birthday" size="60"/> </td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">江苏省</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode" /> </td>
<td><img src="../img/code.png" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style type="text/css">
.regist_bg{
background: url(../img/regist_bg.jpg) repeat-x ;
width: 100%;
height: 600px;
padding-top: 40px;
}
.regist{
border: 7px solid #ccc;
width: 800px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
}
input[type="submit"]{
background-image: url(../img/register.gif);
width: 100px;
height: 35px;
color: #fff;
cursor: pointer;
}
</style>
<script type="text/javascript">
function checkForm(){
var flag = false;
//获取填写的用户名：数字，字母，下划线，长度6-10
var username = document.getElementById("loginnameId").value;
//定义用户名规则
var userReg = /^[a-zA-Z0-9_]{6,10}$/;
if(userReg.test(username)){
//验证通过
flag = true;
}else{
//验证失败
var userMsg = document.getElementById("userMsg");
userMsg.innerHTML="用户名必须是数字，字母或下划线_，长度为6-10";
userMsg.style.color="red";
flag = false;
}
//获取邮件地址
var email = document.getElementById("emailId").value;
//定义邮箱的正则
/*
* @前面：数字，字母，下划线
* @后面：小写字母，数字
*/
var emailReg = /^[a-zA-Z0-9_]+@[a-z0-9]{2,}(\.[a-z]+)+$/;
if(emailReg.test(email)){
flag = true;
}else{
var emailMsg = document.getElementById("emailMsg");
emailMsg.innerHTML="邮箱格式不正确";
emailMsg.style.color="red";
flag = false;
}
return flag;
}
</script>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" method="post" onsubmit="return checkForm()" >
<table width="600" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/>
<br/> <span id="userMsg"></span>
</td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email" size="60"/>
<br /><span id="emailMsg"></span>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="60"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" name="birthday" size="60"/> </td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">江苏省</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode" /> </td>
<td><img src="../img/code.png" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
JS内置对象（更多方法可查看W3C文档）
String
与java基本相同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* JS内置对象String
*/
var str = "abcdef";
//字符串长度是length属性，不是方法
alert(str.length);
//charAt,传递索引，返回字符
alert(str.charAt(3));//d
alert(str.charAt(31));//空串
//indexOf, 传递字符串，返回第一次出现的索引，找不到返回-1
alert(str.indexOf("c"));//2
alert(str.indexOf("C"));//-1
//substring，截取字符串，包含开始索引，不包含结束索引
alert(str.substring(1,4));//bcd
//substr，截取字符串，包含开始索引，后面的参数是要几个
alert(str.substr(1,4));//bcde
</script>
</body>
</html>
Date
Date对象：
getFullYear()从 Date 对象以四位数字返回年份。getMonth()从 Date 对象返回月份 (0 ~ 11)。getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* Date
*
*
*/
var date = new Date();
//alert(date);
//getFullYear() 从 Date 对象以四位数字返回年份。
//getMonth() 从 Date 对象返回月份 (0 ~ 11)。
//getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
</script>
</body>
</html>
Math
调用方式：Math.函数();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
Math
调用方式：Math.函数();
* */
//向上取整
alert(Math.ceil(12.2));//13
//向下取整
alert(Math.floor(-15.5));//-16
//四舍五入
alert(Math.round(5.5));//6
//随机数，返回小数(0.0-1.0)之间，可能是0.0，不可能是1.0
alert(Math.random())
//幂运算
alert(Math.pow(2,3));
</script>
</body>
</html>
Array
JS的数组是变长数组，Java是定长数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* Array，数组
* JS的数组是变长数组，Java是定长数组
*
*/
//创建方式一：数组中没有元素，空架子
var arr = new Array();
//创建方式二：指定长度
var arr = new Array(3);
//赋值，弱类型，随不赋值
arr[0]=1;
arr[1]="123";
arr[2]=55.5;
arr[2]=52;
arr[7]=222;
//alert(arr);
//创建方式三：直接赋值
//如果参数只写一个，而且是数字，那认为是长度
//如果参数只写一个，但不是数字，那认为是元素
var arr2 = new Array("a",100,200);
//var arr3 = new Array(4.4);//出错
//创建方式四
var arr4 = [3,"mma","kkk"];
alert(arr4);
</script>
</body>
</html>
二维数组：元素是一维数组
- Java例子：
int[][] arr = new int[2][3]
sout(arr); - JS:
var arr = [[1,2,3],[4,5,6]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
二维数组：元素是一维数组
Java例子：
int[][] arr = new int[2][3]
sout(arr);
JS:
var arr = [[1,2,3],[4,5,6]]
* */
var arr = [[1,2,3],[4,5,6]]
//输出2
alert(arr[0][1]);
//遍历
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
alert(arr[i][j]);
}
}
</script>
</body>
</html>
regExp
JS内置对象RegExp，正则表达式
正则表达式意义：对字符串进行处理的技术
正则表达式的本质：是一种规则,字符串和规则进行匹配
练习一
要求：手机号，验证格式
手机号格式：
- 1开头
- 第二位：3,4,5,6,7,8,9
- 11位全为数字
正则表达式规则：定义在//内
var telReg = /1[3456789][\d]{9}/;
//正则表达式对象方法test(字符串)，返回真假值
var b = telReg.test("13810010011");
alert(b);
注意：如果在java中这么写没有问题，但js中不行，如果手机号超出11位，b值为true。
修改：以^为开头，以$为结尾
var telReg = /^1[3456789][\d]{9}$/;
//正则表达式对象方法test(字符串)，返回真假值
var b = telReg.test("13810010011");
alert(b);
java中使用正则
String reg = "[\w]{3-8}";
"abc".matches(reg);
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
