文章目录
这是关于JavaScript的学习，并不做的一些笔记，深刻感受到了用 js来做网页的美妙，特别是那些定时器的应用，以及DOM事件的应用，让网页变得多姿多彩！
一、JavaScript
1.1 JavaScript 简介
- 概念：一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行了
- 功能：
- 可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些动态的效果，增强用户的体验。
1.2 JavaScript发展史
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： c – ，后来更名为：ScriptEase
- 1995年，NetScape（网景）公司，开发了一门客户端脚本语言：LiveScript 。后来，请来SUN公司的专家，修改LiveScript ,命名为 JavaScript
- 1996 年，微软抄袭JavaScript 开发出JScript语言
- 1997 年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript , 就是统一了所有客户端脚本语言的编码方式。
- JavaScript = ECMAScript + JavaScript 自己特有的东西（Bom + Dom）
1.3 ECMAScript : 客户端脚本语言的标准
1.3.1 基本语法
-
与HTML结合方式
- 内部JS :
- 定义
- 内部JS :
<html>
<head>
<meta charset="UTF-8"/>
<title>JavaScript变量</title>
<script type="text/javascript">
// 定义变量
/*var a = 3;
alert(a);
a = "abc";
alert(a);*/
// 定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
// 输出到页面上
document.write(num + "--" + typeof(num) + "<br>");
document.write(num2 + "<br>");
document.write(num3 + "<br>");
// 定义string类型
var str = "abc";
var str1 = 'ff';
document.write(str + "<br>");
document.write(str1 + "<br>");
// 定义boolean
var flag = true;
document.write(flag + "<br>");
// 定义null，undefined
var obj = null;
var obj2 = undefined;
var obj3 ;
document.write(obj + "<br>");
document.write(obj2 + "<br>");
document.write(obj3 + "<br>");
</script>
</head>
<body>
</body>
</html>
-
运算符
-
一元运算符：只有一个运算数的运算符
++，–，+（正号） -（负号）
- ++ – ： 自增（自减）
- ++（–）在前，先自增（自减），再运算
- ++（–）在后，先运算，再自增（自减）
- +（-）：正负号
- 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
- 其他类型转换number：
- string转number：按照字面值转换。如果字面值不是数字，则转换为NaN（不是数字的数字）
- boolean转number：true转为1，false转为0
- 其他类型转换number：
- ++ – ： 自增（自减）
-
比较运算符：
- 比较方式
- 类型相同：直接比较
- 字符串：按照字典顺序比较，知道得出大小为止。
- 类型不同：先进行类型转换，再比较
- === 全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
- 类型相同：直接比较
- 比较方式
-
逻辑运算符：
- &&：与（短路）
- || ：或（短路）
- ！：非
- 其他类型转boolean：
- number ：0或NaN为假，其他为真
- string：除了空字符串（""）,其他都是true
- null & undefined : 都是false
- 对象：所有对象都为true
- 其他类型转boolean：
-
三元运算符
? : 表达式
var a = 3;
var b = 4:
var c = a > b ? 1 : 0;
- 语法：
- 表达式 ? 值1 ：值2；
- 判断表达式的值，如果是true则取 值1，如果是false则取 值2；
- 语法：
-
-
特殊语法
- 语句以 ; 结尾，如果一行只有一条语句，则 ; 可以省略（不建议）
- 变量的定义使用var关键字，也可以不使用
- 用：定义的变量是局部变量
- 不用：定义的变量是全局变量（不建议）
-
流程控制语句
-
if … else…
-
switch :
-
在 java 中，switch 语句可以接受的数据类型：byte int short char,枚举（1.5）,String(1.7)
-
switch (变量)：
case 值：
-
在 js 中，switch语句可以接受任意的原始数据类型
-
-
-
while
-
do … while
-
for
-
-
小练习 ： 9*9 乘法表
<html>
<head>
<title>99乘法表</title>
<meta charset="UTF-8"/>
<style type="text/css">
td{
border: 1px solid;
top: 50;
position: relative;
}
</style>
<script type="text/javascript">
// 1.完成基本的for循环，展示乘法表
document.write("<table align='center'>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for(var j = 1; j <= i; j++){
document.write("<td>");
document.write(j + "*" + i + "=" + (i*j) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
1.3.2 基本对象
-
Function : 函数（方法）对象
-
创建：
-
var fun = new Function(形式参数列表，方法体)；
-
function 方法名称（形式参数列表）{
方法体
}
-
var 方法名 = function（形式参数列表）{
方法体
}
-
-
方法：
-
属性：length：代表形参的个数
-
特点：
- 方法定义是，形参的类型不用写，返回值类型也不写。
- 方法是一个对象，如果定义名称相同的方法，会覆盖
- 在JS 中，方法的调用只与方法的名称有关，和参数列表无关
- 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
-
调用：
方法名称（实际参数列表）；
<html> <head> <title>Function对象</title> <meta charset="UTF-8"/> <script type="text/javascript"> function add(){ var sum = 0; for(var i = 0;i < arguments.length;i++){ sum += arguments[i]; } return sum; } var sum = add(1,2,3,4); alert(sum); </script> </head> <body> </body> </html> -
-
Array ：数组对象
-
创建：
- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
-
方法：
jion（参数）：将数组中的元素按照指定的分割符拼接为字符串
-
属性：
length：数组长度
-
特点：
- JS中，数组元素的类型可变的。
- JS中，数组长度可变的。
-
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Array数组对象</title> <script type="text/javascript"> var arr1 = new Array(1,2,3); var arr2 = new Array(5); var arr3 = [1,2,3,4]; var arr4 = new Array(); document.write(arr1 + "<br>"); document.write(arr2 + "<br>"); document.write(arr3 + "<br>"); document.write(arr4 + "<br>"); var arr = [1,"abc",true]; document.write(arr + "<br>"); document.write(arr[0] + "<br>"); document.write(arr[1] + "<br>"); document.write(arr[3] + "<br>"); arr[10] = "嘻嘻嘻"; document.write(arr[10] + "<br>"); document.write(arr.length + "<br>"); document.write(arr.join("**") + "<br>"); </script> </head> <body> </body> </html> -
-
Boolean
-
Date ：日期对象
-
创建：
var date = new Date();
-
方法：
tolocaleString() : 返回当前date 对象对应的时间本地字符串格式
get Time() : 获取毫秒值。返回当前日期对象描述的时间1970年1月1日零点毫秒值
<script type="text/javascript"> var date = new Date(); document.write(date + "<br>"); document.write(date.toLocaleString() + "<br>"); document.write(date.getTime() + "<br>"); </script>
-
-
Math ： 数学对象
-
创建：
- 特点：Math对象不用创建，直接使用。Math.方法名（）；
-
方法：
random() : 返回 0 ~ 1 之间的随机数。含0不含1 [0,1)
ceil(x) : 对数进行向上舍入。
floor(x) : 对数进行向下舍入。
round(x) : 把数四舍五入为最近的整数。
-
属性：
PI
<script type="text/javascript"> document.write(Math.PI + "<br>"); document.write(Math.random() + "<br>"); document.write(Math.ceil(3.14) + "<br>"); document.write(Math.floor(3.14) + "<br>"); // 取 1 ~ 100 之间的随机整数 document.write(Math.floor(Math.random() * 100) + 1); </script> -
-
Number
-
String
-
RegExp : 正则表达式对象
-
正则表达式：定义字符串的组成规则。
-
单个字符串：[ ]
-
如：[][][a] [ab] [a-zA-Z0-9]
-
特殊符号代表特殊含义的单个字符：
/d : 单个数字字符 [0-9]
/w ：单个单词字符 [a-zA-Z0-9]
-
-
量词符号：
? : 表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
m 如果缺省：{，n}：最多n次
n 如果缺省：{m，}：最少m次
-
开始结束符号
^ : 开始
$ : 结束
-
-
正则对象：
-
创建
- var reg = new RegExp(“正则表达式”);
- var reg = /正则表达式/;
-
方法
<script type="text/javascript"> // 1. var reg = new RegExp("\\w{6,12}$"); // 2. var reg2 = /^\w{6,12}$/; /*alert(reg); alert(reg2);*/ var username = "zhangsan"; // 验证 var flag = reg.test(username); alert(flag) </script> -
-
-
Global
-
特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名（）；
-
方法：
encodeURL() : url编码
decodeURL() : url解码
encodeURLComponent() : url编码，编码的字符更多
encodeURLComponent() : url解码
parseInt() : 将字符串转为数字
-
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN() : 判断一个值是否是NaN
- NaN六亲不认，连自己都不认。NaN参与的 == 比较全部为 false
eval() : 讲 JavaScript 字符串，并把它作为脚本代码来执行。
-
-
URL编码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Global对象</title> <script type="text/javascript"> var str = "http://www.baidu.com?wd=河南科技学院"; var encode = encodeURI(str); document.write(encode + "<br>"); var s = decodeURI(encode); document.write(s + "<br>"); // http://www.baidu.com?wd=%E6%B2%B3%E5%8D%97%E7%A7%91%E6%8A%80%E5%AD%A6%E9%99%A2 // http://www.baidu.com?wd=河南科技学院 var str = "http://www.baidu.com?wd=河南科技学院"; var encode = encodeURIComponent(str); document.write(encode + "<br>"); var s = decodeURIComponent(encode); document.write(s + "<br>"); // http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E6%B2%B3%E5%8D%97%E7%A7%91%E6%8A%80%E5%AD%A6%E9%99%A2 // http://www.baidu.com?wd=河南科技学院 var str = "s12po"; var number = parseInt(str); alert(number + 1); </script> </head> <body> </body> </html> -
二、 BOM
2.1 概念：Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成为对象。
2.2 组成
-
Window : 窗口对象
三、 DOM
3.1 DOM简单学习：为了满足案例要求
- 功能：控制HTML文档的内容
- 代码：获取页面标签（元素）对象 Element
- document.getElementById(“id值”)：通过元素id获取元素对象
- 操作Element对象：
- 修改属性值：
- 明确获取的对象是哪一个？
- 查看API文档，找其中有哪些属性可以设置
- 修改标签体内容：
- 修改属性值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM简单学习</title>
</head>
<h1 id="title">河南科技学院</h1>
<script type="text/javascript">
var title = document.getElementById("title");
alert("变！");
title.innerHTML = "河南科技大学";
</script>
<body>
</body>
</html>
3.2 事件简单学习
-
功能：某些组件被执行了某些操作后，触发某些代码的执行。
-
如何绑定事件
- 直接在和HTML标签上，指定事件的属性（操作），属性值就是 js 代码
- 事件：onclick — 单击事件
- 通过 js 获取元素对象，指定事件属性，设置一个函数
- 直接在和HTML标签上，指定事件的属性（操作），属性值就是 js 代码
嘻嘻嘻
啊哈哈哈
-
案例：灯泡开关
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>03-灯泡开关</title> </head> <body> <img src="img/off.jpg"/ id="light"> <script type="text/javascript"> // 1.获取图片对象 var light = document.getElementById("light"); var flag = false; // 2.绑定单击事件 light.onclick = function(){ if(flag){// 判断如果灯是开的，则灭掉 light.src = "img/off.jpg"; flag = false; }else{// 判断如果灯是关闭的，则打开 light.src = "img/on.jpg"; flag = true; } } </script> </body> </html>
3.3 DOM
- 概念：Document Object Model 文本对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
-
W3C DOM 标准被分为 3 个不同的部分：
-
核心 DOM - 针对任何结构化文档的标准模型
-
Document : 文档对象
-
创建（获取）：在HTML dom 模型中可以使用window对象来获取
- window.document
- document
-
方法：
-
获取 Element 对象：
- getElementById() : 根据 id 属性值获取元素对象。id 属性值一般唯一
- getElementsByTagName() : 根据元素的名称获取元素的对象们。返回值是一个数组
- getElementsByClassName() : 根据 Class 属性值获取元素的对象们。返回值是一个数组
- getElementsByName() : 根据 name 属性值获取元素对象们。返回值是一个数组
- 演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>10-创建BOM对象</title> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div class="cls1"></div> <div class="cls2"></div> <input type="text" id="" name="username" /> <script type="text/javascript"> // 根据元素的名称获取元素的对象们。返回值是一个数组 var divs = document.getElementsByTagName("div"); // alert(divs.length); // 根据 Class 属性值获取元素的对象们。返回值是一个数组 var div_cls = document.getElementsByClassName("cls1"); // alert(div_cls.length); // 根据 name 属性值获取元素对象们。返回值是一个数组 var cls_username = document.getElementsByName("username"); alert(cls_username.length); </script> </body> </html> -
创建其他 DOM 对象：
createAttribute(name)
createComment()
createElement()
var table = document.createElement(“table”);
alert(table);createTextNode()
-
-
属性
-
-
Element : 元素对象
- 获取/创建：通过document来获取和创建
- 方法：
- removeAttribute() : 删除属性
- setAttribute() : 设置属性
-
Attribute : 属性对象
-
Text : 文本对象
-
Comment : 注释对象
-
-
Node：节点对象，其他5个的父对象
- 特点：所有dom对象都可以被认为是一个节点
- 方法：
- CRUD dom树：
- appendChild() : 向节点的子节点列表的结尾添加新的子节点
- removeChild() : 删除（并返回）当前节点的指定子节点
- replaceChild() : 用新节点替换一个子节点
- 属性：
- parentNode 返回节点的父节点
- CRUD dom树：
演示 1：动态表格案例
// 1.获取按钮 document.getElementById("btn_add").onclick = function(){ // 2.获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; // 获取table var table = document.getElementsByTagName("table")[0]; // 追加一行 table.innerHTML += "<tr>\n" + "<td>"+id+"</td>\n" + "<td>"+name+"</td>\n" + "<td>"+gender+"</td>\n" + "<td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" + "</tr>"; } // 删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } -
-
XML DOM - 针对 XML 文档的标准模型
-
HTML DOM - 针对 HTML 文档的标准模型
-
标签体的设置和获取：innerHTML
-
使用HTML元素的属性
-
控制样式
-
使用元素的style属性来设置
-
提前定义好类选择器的样式，通过元素的className 属性来设置其 class 属性值
演示：HTMLDOM-样式控制
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>13-HTMLDOM-样式控制</title> <style type="text/css"> .d1{ border: 1px solid red; width: 100px; height: 100px; } .d2{ border: 1px solid blue; width: 200px; height: 200px; } </style> </head> <body> <div id="div1"> div1 </div> <div id="div2"> div2 </div> <script type="text/javascript"> var div1 = document.getElementById("div1"); div1.onclick = function(){ // 修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; div1.style.fontSize = "20px"; } var div2 = document.getElementById("div2"); div2.onclick = function(){ div2.className = "d2"; } </script> </body> </html> -
-
四、 事件监听机制
4.1 概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如：按钮 文本输入框…
- 监听器：代码
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
4.2 常见的事件
- 点击事件：
- onclick：单击事件
- ondblclick：双击事件
- 焦点事件
- onblur：失去焦点
- onfocus：元素获得焦点
- 加载事件
- onload：一张页面或一幅图像完成加载。
- 鼠标事件：
- onmousedown 鼠标按键被按下
- onmouseup 鼠标按键被松开
- onmousemove 鼠标被移动
- onmouseover 鼠标移到某元素之上
- onmouseout 鼠标从某元素移开
- 键盘事件：
- onkeydown 某个键盘按键被按下
- onkeyup 某个键盘按键被松开
- onkeypress 某个键盘按键被按下并松开
- 选择和改变
- onchange 域的内容被改变
- onselect 文本被选中
- 表单事件
- onsubmit 确认按钮被点击
- onreset 重置按钮被点击
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13-HTMLDOM-样式控制</title>
<style type="text/css">
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
div1.onclick = function(){
// 修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.fontSize = "20px";
}
var div2 = document.getElementById("div2");
div2.onclick = function(){
div2.className = "d2";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12-动态表格案例</title>
<style type="text/css">
table{
border: 1px solid;
margin-left: 30%;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 20px;
margin-left: 30%;
}
.over{
background-color: yellow;
}
.out{
background-color: white;
}
</style>
<script type="text/javascript">
/*
分析：
1. 全选：
* 获取所有的checkbox
* 遍历cb，设置每一个cb的状态为选中 checked
*/
// 1.在页面加载完后绑定事件
window.onload = function(){
// 2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function(){
// 全选
// 1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
// 2.遍历
for (var i = 0; i < cbs.length; i++) {
// 3.设置每一个cb的状态为选中 checked
cbs[i].checked = true;
}
}
document.getElementById("unselectAll").onclick = function(){
// 全不选
// 1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
// 2.遍历
for (var i = 0; i < cbs.length; i++) {
// 3.设置每一个cb的状态为未选中 checked
cbs[i].checked = false;
}
}
document.getElementById("selectRev").onclick = function(){
// 反选
// 1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
// 2.遍历
for (var i = 0; i < cbs.length; i++) {
// 3.设置每一个cb的状态为相反状态
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function(){
// 第一个cb点击
// 1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
// 2.遍历
for (var i = 0; i < cbs.length; i++) {
// 3.设置每一个cb的状态和第一个cb的状态一样
cbs[i].checked = this.checked;
}
}
// 给所有tr绑定鼠标到元素之上和移出元素事件
var trs = document.getElementsByTagName("tr");
// 2.遍历
for (var i = 0; i < trs.length; i++) {
// 移到元素之上
trs[i].onmouseover = function(){
this.className = "over";
}
// 移出元素
trs[i].onmouseout = function(){
this.className = "out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"/></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"/></td>
<td>1</td>
<td>周杰伦</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"/></td>
<td>2</td>
<td>薛之谦</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"/></td>
<td>3</td>
<td>陈粒</td>
<td>女</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" value="全选" id="selectAll"/>
<input type="button" value="全不选" id="unselectAll"/>
<input type="button" value="反选" id="selectRev"/>
</div>
</body>
</html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8"/>
<style type="text/css">
.error{
color: red;
}
</style>
<script type="text/javascript">
/*
分析：
1. 给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true
如果有一个为false，则监听器方法返回false
2. 定义一些方法分别校验各个表单项。
3. 给各个表单项绑定onblur事件。
*/
window.onload = function(){
// 1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function(){
// 调用用户校验方法 chekUsername();
// 调用密码校验方法 checkPassword();
return checkUsername() && checkPassword();
}
// 校验用户名
function checkUsername(){
// 1.获取用户名的值
var username = document.getElementById("username").value;
// 2.定义正则表达式
var reg_username = /^\w{6,12}$/;
// 3.判断值是否符合正则的规则
var flag = reg_username.test(username);
// 4.提示信息
var s_username = document.getElementById("s_username");
if(flag){
// 提示绿色对勾
}else{
// 提示红色用户名有误
s_username.innerHTML = "用户名有误";
}
return flag;
}
// 校验密码
function checkPassword(){
// 1.获取密码的值
var password = document.getElementById("password").value;
// 2.定义正则表达式
var reg_password = /^\w{6,12}$/;
// 3.判断值是否符合正则的规则
var flag = reg_password.test(password);
// 4.提示信息
var s_password = document.getElementById("s_password");
if(flag){
// 提示绿色对勾
}else{
// 提示红色用户名有误
s_password.innerHTML = "密码有误";
}
return flag;
}
// 给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
</script>
</head>
<body>
<h3>注册页面</h3>
<hr />
<form action="#" method="get" id="form">
<table border="1px" cellspacing="0" cellpadding="5px">
<tr height="35px">
<td width="70px">用户名:</td>
<td width="300px">
<input type="text" name="uname" id="username" value="" />
<span id="s_username" class="error"></span>
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password" name="pwd" id="password" value="" />
<span id="s_password" class="error"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text" name="mail" id="" value="" />
<span id=""></span>
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text" name="phone" id="phone" value="" />
</td>
</tr>
<tr height="35px">
<td>性别：</td>
<td>
男<input type="radio" name="sex" id="sex" value="1" checked="checked" />
女<input type="radio" name="sex" id="sex" value="0" />
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
唱歌<input type="checkbox" name="fav" id="fav" value="1" />
跳舞<input type="checkbox" name="fav" id="fav" value="2" />
弹吉他<input type="checkbox" name="fav" id="fav" value="3" />
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="address">
<option value="1">洛阳</option>
<option value="2">新乡</option>
<option value="3">偃师</option>
</select>
</td>
</tr>
<tr height="35px">
<td>个人简介：</td>
<td>
<textarea name="intro" rows="5" cols="20"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="agree" id="agree" value="1" />是否同意本公司的协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
