window对象(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
javascript组成部分:
EMCAScript(基本语法)
BOM( Browser Object MOdel) 浏览器对象模型.
浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述,如果我们要
操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象
window对象常用的方法:
open() 打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy() 相对于原来的窗口移动指定的x、y值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。
*/
function showAd(){
open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");
}
setTimeout("showAd()",2000);
//var id = window.setInterval("showAd()",2000);
function small(){
resizeTo(300,200); //相对于原本窗口改变指定的大小。
}
function move(){
for(var i = 0 ; i<100 ; i++){
window.moveBy(50,0); // 相对于原来的窗口移动指定的x、y值。
moveBy(0,50);
window.moveBy(-50,0);
window.moveBy(0,-50);
}
}
function move2(){
window.moveTo(500,200);
}
/*
function clearTest(){
window.clearInterval(id);
}
*/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" οnclick="showAd()" value="下载电影"/>
<input type="button" οnclick="small()" value="变小"/>
<input type="button" οnclick="move()" value="moveBy"/>
<input type="button" οnclick="move2()" value="moveTo"/>
<input type="button" οnclick="clearTest()" value="取消定时任务"/>
</body>
</html>
事件的注册(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
事件:
注册事件的方式:
方式一: 直接在html元素上注册
<body οnlοad="ready()">
function ready(){
alert("body的元素被加载完毕了..");
}
方式二:可以js代码向找到对应的对象再注册。 推荐使用。
var bodyNode = document.getElementById("body");
bodyNode.onload = function(){
alert("body的元素被加载完毕");
}
*/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body id="body">
</body>
</html>
常用的事件(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
常用的事件:
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
*/
function clickTest(){
alert("单击..");
}
function dbClick(){
alert("双击..");
}
function showTime(){
var timeSpan = document.getElementById("timeSpan");
var date = new Date().toLocaleString();
timeSpan.innerHTML = date.fontcolor("red");
}
function hideTime(){
var timeSpan = document.getElementById("timeSpan");
timeSpan.innerHTML = "";
}
function showInfo(){
var timeSpan = document.getElementById("userName");
timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");
}
function hideInfo(){
var timeSpan = document.getElementById("userName");
timeSpan.innerHTML = "";
}
function change(){
alert("城市改变了..");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" οnclick="clickTest()" value="单击" />
<input type="button" οndblclick="dbClick()" value="双击"/>
<span οnmοusemοve="showTime()" οnmοuseοut="hideTime()" >查看当前系统时间:</span><span id="timeSpan"></span>
用户名<input type="text" οnfοcus="showInfo()" οnblur="hideInfo()" /> <span id="userName"></span>
<select οnchange="change()" >
<option>广州</option>
<option>深圳</option>
<option>上海</option>
</select>
</body>
</html>
location对象(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
地址栏对象(Location)
href : 设置以及获取地址栏的对象
reload() 刷新当前的页面
*/
function showURL(){
alert(location.href);
}
function download(){
location.href="http://www.baidu.com";
}
function rafresh(){
location.reload();
}
window.setInterval("rafresh()",1000);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" οnclick="showURL()" value="显示地址栏"/>
<span οnclick="download()">下载电影</span>
</body>
</html>
屏幕对象(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
Screen(屏幕)对象
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
*/
document.write("获取系统屏幕的工作区域高度:"+screen.availHeight+"<br/>");
document.write("获取系统屏幕的工作区域宽度:"+screen.availWidth+"<br/>");
document.write("获取屏幕的垂直分辨率:"+screen.height+"<br/>");
document.write("获取屏幕的水平分辨率:"+screen.width+"<br/>");
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
Dom编程的入门(案例)
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
<input type="button" onClick="writeUrl()" value="设置a标的地址"/>
</body>
<script type="text/javascript">
/*
DOM(Document Object Model) 文档对象模型
一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的
对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。
var allNodes = document.all; //获取html文件中的所有标签节点 。
for(var i = 0; i<allNodes.length ; i++){
alert(allNodes[i].nodeName); //标签的名字 nodeName;
}
*/
function writeUrl(){
var links = document.links; // 获取文档中含有href的属性的标签。
for(var i = 0; i<links.length ; i++){
links[i].href = "http://www.itcast.cn";
}
}
</script>
</html>
根据html标签的属性找节点(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
通过html元素的标签属性找节点。
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
*/
function showText(){
var inputNode = document.getElementById("userName"); //根据ID属性值找元素
inputNode.value = "设置好了文本";
}
//InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.
function showImage(){
var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
for(var i = 0 ; i<images.length ; i++){
images[i].src = "33.jpg";
images[i].width="100";
images[i].height="100";
}
}
function showDiv(){
var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签,返回的是一个数组。
for(var i = 0 ; i<divs.length ; i++){
divs[i].innerHTML = "哈哈".fontcolor("red");
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" id="userName" value="请输入用户名..." /><input type="button" οnclick="showText()" value="设置文本"/>
<hr/>
<img src="" />
<img src="" />
<img src="" />
<input type="button" οnclick="showImage()" value="显示图片"/>
<hr/>
<div name="info"></div>
<div name="info"></div>
<div name="info"></div>
<input type="button" οnclick="showDiv()" value="设置div内容"/>
</body>
</html>
根据属性找标签的练习(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function checkAll(allNode){
//找到所有的的选项
var items = document.getElementsByName("item");
//找到全选按钮的对象
//var allNode = document.getElementsByName("all")[0];
for(var i = 0 ; i<items.length ; i++){
items[i].checked = allNode.checked;
}
}
function getSum(){
var items = document.getElementsByName("item");
var sum = 0;
for(var i = 0 ; i<items.length ; i++){
if(items[i].checked){
sum += parseInt(items[i].value);
}
}
var spanNode = document.getElementById("sumid");
spanNode.innerHTML = (" ¥"+sum).fontcolor("green");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="1800" />笔记本电脑1800元<br />
<input type="checkbox" name="item" value="300" />笔记本电脑300元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" οnclick="checkAll(this)" /> 全选<br />
<input type="button" value="总金额:" οnclick="getSum()" /><span id="sumid"></span>
</body>
</html>
通过关系找标签(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><input type="text" id="userName"/><img src="user.png" />
</body>
<script type="text/javascript">
/*
通过关系(父子关系、兄弟关系)找标签。
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
------------------------------------------------------------
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
我们可以通过标签的类型进行判断筛选:
文本节点的类型: 3
注释的节点类型: 8
标签节点的类型: 1
*/
var bodyNode = document.getElementsByTagName("body")[0];
/*
查看父节点。
var parentNode = bodyNode.parentNode;
alert("父节点的名称:"+parentNode.nodeName);
//找子节点:childNodes 获取所有的子节点,返回的是一个数 组。 注意: 获取子节点的时 候是包括了空文本或者是注释。
var children = bodyNode.childNodes;
for(var i = 0 ; i<children.length ; i++){
//if(children[i].nodeType==1){
alert("节点的名字:"+children[i].nodeName+" 对象的类型:"+children[i].nodeType);
//}
}
alert("第一个子节点:"+bodyNode.firstChild.nodeName);
alert("最后一个子节点:"+bodyNode.lastChild.nodeName);
//找兄弟节点
*/
var inputNode = document.getElementById("userName");
alert("下个兄弟节点:"+inputNode.nextSibling.nodeName); //下一个兄弟节点。
alert("上一个兄弟节点:"+inputNode.previousSibling.nodeName);
</script>
</html>
创建节点、插入节点(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
创建字节入插入节点、设置节点的属性。
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
*/
var num = 1;
function add(){
var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。
//setAttribute:设置节点的属性
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按钮"+num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode); //appendChild 添加子节点。
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" οnclick="add()" value="添加"/>
</body>
</html>
增加附件(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
插入目标元素的位置
elt.insertBefore(newNode, oldNode); 添加到elt中,child之前。
注意: elt必须是oldNode的直接父节点。
elt.removeChild(child) 删除指定的子节点
注意: elt必须是child的直接父节点。
*/
function addFile(){
//先要创建一个tr对象
var trNode = document.createElement("tr");
//创建td对象
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
//
tdNode1.innerHTML ="<input type='file'/>";
tdNode2.innerHTML = "<a href='#' οnclick='delFile(this)' >删除附件</a>";
//把td的节点添加到tr节点上
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
var tbodyNode = document.getElementsByTagName("tbody")[0];
var lastRow = document.getElementById("lastRow");
tbodyNode.insertBefore(trNode,lastRow);
}
//删除附件
function delFile(aNode){
var trNode = aNode.parentNode.parentNode;
var tbodyNode = document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td><input type="file"/></td><td><a href="#" οnclick="delFile(this)" >删除附件</a></td>
</tr>
<tr id="lastRow">
<td colspan="2"><input οnclick="addFile()" type="button" value="添加附件"/></td>
</tr>
</table>
</body>
</html>
城市联动框(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function showCity(){
//维护一个二维数组存储省份对应的城市
var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];
//获取省份对应的节点
var provinceNode = document.getElementById("province");
//获取省份选中的选项
var selectIndex = provinceNode.selectedIndex;
//获取对应的城市
var cityDatas = citys[selectIndex];
//找到city节点
var cityNode = document.getElementById("city");
/*
//先清空city框所有option
var children = cityNode.childNodes;
for(var i = 0; i<children.length ; ){
cityNode.removeChild(children[i]);
}
*/
//设置options的个数。
cityNode.options.length = 1 ;
//遍历对应的所有城市然后创建对应的option添加到city上。
for(var index = 0; index<cityDatas.length ; index++){
var option = document.createElement("option");
option.innerHTML = cityDatas[index];
cityNode.appendChild(option);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
省份<select id="province" οnchange="showCity()">
<option>省份</option>
<option>广东</option>
<option>湖南</option>
<option>广西</option>
</select>
城市<select id="city"><option>城市</option></select>
</body>
</html>
时间联动框(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
年份: 1900年 到今天
月份: 1~12
日: 根据每月算出对应的天数(包含有闰年)
*/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
年<select></select>月<select></select>日<select></select>
</body>
</html>
操作css样式(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//产生一个四位的验证码。
function createCode(){
var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7 长度8
var code = "";
for(var i = 0 ; i<4; i++){
//随机产生四个索引值
var index = Math.floor(Math.random()*datas.length); // random 0.0-1.0(不包括1.0)
code+=datas[index];
}
var spanNode = document.getElementById("code");
spanNode.innerHTML = code;
spanNode.style.fontSize ="24px";
spanNode.style.color = "red";
spanNode.style.backgroundColor="gray";
spanNode.style.textDecoration = "line-through";
}
function ready(){
createCode();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body οnlοad="ready()">
<span id="code"></span><a href="#" οnclick="createCode()">看不清,换一个</a>
</body>
</html>
正则表达式(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
正则表达式的创建方式:
""
方式1:
/正则表达式/模式
方式2:
new RegExp("正则表达式",模式);
正则表达式对象常用的方法:
test() 使用正则对象去匹配字符串 如果匹配成功返回ture,否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。
模式:
g (全文查找出现的所有 pattern)
i (忽略大小写)
var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
alert("匹配吗?"+reg.test(str));
查找出三个字符组成的单词。
*/
var str ="da jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi;
var line ="";
while((line = reg.exec(str))!=null){
document.write(line+"<br/>")
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
横条跑动广告条(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>
<marquee><font color="#FF0000" size="24">广告来了...</font></marquee>
<img src="4.jpg" width="400px" height="300px"/>
</div>
</body>
</html>
人物信息表单提交-正则表达式(案例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//检查用户名
function checkName(){
var inputNode = document.getElementById("userName");
var spanNode = document.getElementById("userId");
//获取输入框的内容
var content = inputNode.value;
//用户名的规则: 六位的英文与数字组成。数字不能开头
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(content)){
//符合规则
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}else{
//不符合规则
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}
//检查邮箱
function checkEmail(){
var email = document.getElementById("email").value;
var spanNode = document.getElementById("emailspan");
//编写邮箱的正则 13456@qq.com 13456@qq.net 13456@qq.com.cn
var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;
if(reg.test(email)){
//符合规则
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}else{
//不符合规则
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}
function checkAll(){
var userName = checkName();
var email = checkEmail();
if(userName&&email){
return true;
}else{
return false;
}
}
/*
表单提交的时候是会触发onsubmit事件的,如果onsubmit事件的方法返回是true,那么该表单允许提交,如果返回的是false,该表单不允许提交。
*/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
</head>
<body>
<form action="success.html" method="get" οnsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交,如果返回的是true允许提交 -->
<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:</td>
<td>
<input type="text" name="userName" id="userName" οnblur="checkName()"/>
<span id="userId"></span>
</td>
</tr>
<tr>
<td >密码:</td><td>
<input type="password" name="pwd" id="pwd" οnblur="checkPass()"/>
<span id="passId"></span>
</td>
</tr>
<tr>
<td>确认密码:</td><td>
<input type="password" name="ensurepwd" id="ensurepwd" οnblur="ensurepass()" /> <span id="ensure"></span>
</td>
</tr>
<tr>
<td>邮箱</td><td>
<input type="text" name="email" id="email" οnblur="checkEmail()"/>
<span id="emailspan"></span>
</td>
</tr>
<tr>
<td>性别</td><td>
<input type="radio" checked="ture" name="gender" id="male" value="male"/>
男
<input type="radio" name="gender" value="female"/>
女</td>
</tr>
<tr>
<td>爱好:</td><td>
<input type="checkbox" name="like" />
eat
<input type="checkbox" name="like" />
sleep
<input type="checkbox" name="like"/>
play
<span id="hobbySpan"></span>
</td>
</tr>
<tr>
<td>城市</td><td>
<select name="city" id="city">
<option value=""> 请选择</option>
<option value="bj"> 北京 </option>
<option value="gz"> 广州 </option>
<option value="sh"> 上海 </option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><!--提交按钮-->
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>