前言:
承接前面的内容,跟着尚硅谷继续学习javaweb。
jQuery
jQuary内容多而杂,我可能介绍的不会很详细,手册分享
链接:https://pan.baidu.com/s/14uo9RuF6Urzt8WZjNUlvOQ
提取码:6xfh
了解
jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库
jQ的核心思想就是:write less,do more(写的更少,做的更多),所以他实现了很多浏览器的兼容问题。
初体验
在IDEA中新建一个静态网页项目。
新建一个html文件
引入jQuery类库需要使用一条命令
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
更多版本的引入可以参考这个网页
然后我们可以 alert($) ,如果 $ 的值是一个函数,说明引入成功。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//这里相当于window.onload,页面加载完成后表现
$(function () {
//$("#btnID")返回一个jQuery对象
//jQuery默认$符开头
var $btnobj=$("#btnID");
$btnobj.click(function () {
alert("Hello World");
})
});
</script>
</head>
<body>
<button id="btnID">SayHello</button>
</body>
- $(function(){ }):相当于 window.onload,页面加载完后的函数
- jQuery对象一定要加 $
- click 是一个函数,可以将一个方法绑定
核心函数
$ 是jQuery的核心函数,因为jQuery的大部分功能都离不开这个符号,并且它会根据传入参数的不同而起到不同的作用
- 传入参数为函数时,表示页面加载完成之后。相当于window.onload=function(){}
- 传入html字符串时,会对我们创建的这个html标签对象
-
<head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //这里相当于window.onload,页面加载完成后表现 $(function () { $(" <div>" + " <span>div-span1</span>" + " </div>").appendTo("body"); }); </script> </head>
-
- 传入参数是选择器字符串时,根据选择器查询对象
- $(“#id选择器”):id选择器,根据id
- $(“标签名”):标签名选择器,根据标签名
- $(“.类选择器”):类型选择器,根据class属性
- 传入参数是DOM对象时,会把DOM对象转换为jQuery对象
jQuery对象的本质
jQuery对象时dom对象的数组+jQuery提供的一系列功能函数
jQuery对象和DOM对象使用区别
- jQuery对象不能使用DOM对象的属性和方法
- DOM对象不能使用jQuery对象的属性和方法
jQuery对象和DOM对象的相互转换
dom对象转化为jQuery对象
- 先有DOM对象
- $(DOM对象)就可以转换为jQuery对象
jQuery对象转化为DOM对象
- 先有jQuery
- jQuery对象通过下标去除相应的DOM对象:var dom=$obj[下标]
选择器
元素的筛选
常见
- eq() 筛选指定索引号的元素
- first() 筛选出第一个匹配的元素
- last() 筛选出最后一个匹配的元素
- hasClass() 检查匹配的元素是否含有指定的类
- filter() 筛选出与指定表达式匹配的元素集合
- is() 检查元素是否参数里能匹配上的
- map()
- has() 筛选出包含指定子元素的元素
- not() 排除能够被参数中匹配的元素
- slice() 从指定索引开始,截取指定个数的元素
- children() 筛选获取指定元素的资源
- closest() 从当前元素开始,返回最先匹配到的符合条件的父元素
- find() 从指定元素中查找子元素
- next() 获取指定元素的下一个兄弟元素
- nextAll() 获取其后的所有兄弟元素
- nextUntil() 获取其后的元素,直到参数能匹配上的为止,不包括结束条件那个
- offsetPosition() 返回第一个用于定位的祖先元素,即查找祖先元素中position为relative或absolute的元素。
- parent() 获取指定元素的直接父元素
- parents() 获取指定元素的所有祖先元素,一直到<body></body>
- parentsUntil() 获取指定元素的祖先元素,知道参数里能匹配到的为止
- prev() 获取指定元素的前一个兄弟元素
- prevAll() 获取指定元素前面的所有兄弟元素
- prevUntil() 获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配
- siblings() 获取指定元素的兄弟元素,不分前后
- add() 将选中的元素添加到jQuery对象集合中
- andSelf() 将自身加到选中的jQuery集合中,以方便一次性操作
- end() 将改变当前选择器选中的操作回退为上一个状态。
属性操作
- html():设置和获取起始标签和结束标签中的内容,就和dom属性中的innerHTML一样
- text():设置和获取其实标签和结束标签中的文本,跟dom属性innerText一样。
- val():设置和获取标签项的value属性值,跟dom属性value一样。
- attr():可以设置和获取属性的值(传一个参数是获取,传两个参数是设置)
- prop():可以设置和获取属性的值
attr和prop的区别:如果用attr去尝试获取没有设置的属性,那么会返回undefine,官方不希望这样,所以有了prop,prop会返回true(存在时),false(不存在时)。根据这个限制,以下一般建议使用prop而不是attr:checked、readOnly、selected、disabled等等。
示例(全选、全不选、反选)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//给全选绑定单机事件
$("#checkedAllBtn").click(function(){
$(":checkbox").prop("checked",true)
})
//全不选绑定单机事件
$("#checkedNoBtn").click(function(){
$(":checkbox").prop("checked",false)
})
//反选
$("#checkedRevBtn").click(function(){
//过滤出来球类的筛选框
$(":checkbox[name='items']").each(function () {
//在each遍历的function函数中,有一个this对象,这就是当前遍历到的dom对象
this.checked=!this.checked
});
//检查是否满选
//获取全部的球类个数
var allCount=$(":checkbox[name='items']").length
//选中的球类个数(表单选择器:checkbox+表单对象属性:checked)
var checkCount=$(":checkbox[name='items']:checked").length
$("#checkedAllBox").prop("checked",allCount==checkCount)
})
//提交
$("#sendBtn").click(function () {
//获取选中的球类的复选框
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
})
})
//全选/全不选 绑定
$("#checkedAllBox").click(function(){
//得到上面这个复选框的状态
//在事件的function函数中,有一个this对象,这个对象是正在响应事件的dom对象
$(":checkbox[name='items']").prop("checked",this.checked)
})
$(":checkbox[name='items']").click(function () {
//检查是否满选
//获取全部的球类个数
var allCount=$(":checkbox[name='items']").length
//选中的球类个数(表单选择器:checkbox+表单对象属性:checked)
var checkCount=$(":checkbox[name='items']:checked").length
$("#checkedAllBox").prop("checked",allCount==checkCount)
})
})
</script>
<style type="text/css">
span{
color: #DC143C;
}
</style>
</head>
<body bgcolor="#B0E0E6" >
<form method="post" >
你爱好的运动是?<br/>
<input type="checkbox" id="checkedAllBox" /> <b>全选/全不选</b>
<br/>
<ul>
<li><input type="checkbox" name="items" value="足球" /><span>足球</span></li>
<li><input type="checkbox" name="items" value="羽毛球"/><span>羽毛球</span></li>
<li><input type="checkbox" name="items" value="乒乓球"/><span>乒乓球</span></li>
<li><input type="checkbox" name="items" value="篮球" /><span>篮球</span></li>
</ul>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
上面示例的提交使用弹窗的方式呈现了,想玩的高级点的朋友可以开个node服务器接收post请求,示例node代码:
var http=require('http')
var querystring = require('querystring');
var onRequest=function(request,response){
var data=""
request.on("error",function(err){
console.error(err)
}).on("data",function(chunk){
data+=chunk
}).on("end",function(){
data=querystring.parse(data)
console.log(data)
})
}
console.log("服务器监听在3001")
http.createServer(onRequest).listen(3001)
node index.js启动
前端这边,在上面的代码的基础上,将“提交”按钮的type改为submit(上面绑定的响应弹窗就可以删了),form 标签设置好 action=”http://127.0.0.1:3001″ ,其他没啥了,注意复选框要有value哦。
DOM的增删改
增
- a.appendTo(b):把a插入到b所有子元素末尾,成为最后一个子元素
- a.prependTo(b):把a插到b所有子元素的前面,成为第一个子元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("<h1>有意思</h1>").appendTo("div")
})
</script>
</head>
<body bgcolor="#B0E0E6" >
<div>
<span>1234</span><br/>
<span>5678</span>
</div>
<div>
<span>9abc</span><br/>
<span>defg</span>
</div>
</body>
如果把script里面的内容换了
$(function(){ $("<h1>有意思</h1>").prependTo("div") })
这两个方法是在指定标签的子元素中操作,如果是要在同级下操作,就用
$(function(){ $("<h1>有意思</h1>").insertAfter("div") })
这样就是平级操作。
删
- remove()
- a.remove():删除a标签
- empty()
- a.empty():清空a标签里面的内容
改
- replaceWith()
- a.replaceWith(b):用b替换掉a
- replaceAll()
- a.replaceAll(b):用a替换所有的b
具体操作我就不弄了,我分享的那个手册里面都有示例。
jQuery增、删练习
从左到右、从右到左
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//选中添加到右边
$("button:eq(0)").click(function(){
$("select:eq(0) option:selected").appendTo($("select:eq(1)"))
})
//全部添加到右边
$("button:eq(1)").click(function(){
$("select:eq(0) option").appendTo($("select:eq(1)"))
})
//选中添加到左边
$("button:eq(2)").click(function(){
$("select:eq(1) option:selected").appendTo($("select:eq(0)"))
})
//全部添加到左边
$("button:eq(3)").click(function(){
$("select:eq(1) option").appendTo($("select:eq(0)"))
})
})
</script>
</head>
<body bgcolor="#B0E0E6" >
<span id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
<option value="opt09">选项9</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</span>
<span id="right">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</span>
</body>
动态添加、删除表格记录
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//添加新的员工还有给a标签绑定事件都会用到这个函数
var deleteTest=function(){
//得到tr
var tarObj=$(this).parent().parent()
//confirm是js提供的一个确认提示框函数
//你给它传什么,他就提示什么(类似于alert)
//当用户点击了确定就返回true、反之false
if(confirm("是否删除成员"+tarObj.find("td:first").text())){
tarObj.remove()
}
//防止跳转
return false
}
//submit按钮 绑定单机事件
$("#addEmyButton").click(function(){
//获取输入框、姓名、邮箱、工资的内容
var name=$("#empName").val()
var email=$("#empEmail").val()
var salary=$("#empSalary").val()
//创建一个行标签对象,添加到显示数据的表格当中
var $trObj=$(" <tr>\n" +
" <td align='center'>"+name+"</td>\n" +
" <td align='center'>"+email+"</td>\n" +
" <td align='center'>"+salary+"</td>\n" +
" <td><a href=\"deleteEmp?id=001\">Delete</a></td>\n" +
" </tr>")
//添加到显示数据的表格当中
$trObj.appendTo($("#employeeTable"))
//给新添加的行的a标签榜上事件
$trObj.find("a").click(deleteTest)
})
//给删除的a标签绑定单机事件
$("a").click(deleteTest)
})
</script>
</head>
<body bgcolor="#B0E0E6" >
<table id="employeeTable" align="center">
<tr>
<th align='center'>Name</th>
<th align='center'>Email</th>
<th align='center'>Salery</th>
<th></th>
</tr>
<tr>
<td align='center'>Tom</td>
<td align='center'>tom@TOM.com</td>
<td align='center'>5000</td>
<td align='center'><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td align='center'>Jerry</td>
<td align='center'>jerry@sohu.com</td>
<td align='center'>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td align='center'>Bob</td>
<td align='center'>bob@tom.com</td>
<td align='center'>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div align="center" id="formDiv" style="border: 5px solid sandybrown">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">Email:</td>
<td class="inp">
<input type="text" name="empEmail" id="empEmail" />
</td>
</tr>
<tr>
<td class="word">Salary:</td>
<td class="inp">
<input type="text" name="empSalary" id="empSalary" />
</td>
</tr>
<tr>
<td colspan="2" align="center" >
<button id="addEmyButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
CSS样式操作
主要是用的方法:
- addClass():添加样式
- removeClass():删除样式
- toggleClass():有就删除,没有就添加样式
- offset():获取和设置元素的坐标
示例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style type="text/css">
div{
width:100px;
height:260px;
}
<!--限定选择器仅对div起作用-->
div.whiteborder{
border:2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript">
$(function(){
var $divEle=$('div:first')
$('#btn01').click(function(){
//addClass() 向被选中元素添加一个或多个类
//添加红色背景和蓝色边框
$divEle.addClass('redDiv blueBorder')
})
$('#btn02').click(function(){
//removeClass() 从被选元素删除一个或多个类
$divEle.removeClass('redDiv')
})
$('#btn03').click(function(){
//toggleClass() 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass('redDiv')
})
$('#btn04').click(function(){
//offset() 返回第一个匹配元素相对于文档的位置
//可以理解为获取坐标位置
var pos=$divEle.offset()
//console.log(pos)
$divEle.offset({
top:pos.top+10,
left:pos.left+10
})
})
})
</script>
</head>
<body bgcolor="#F0F8FF" >
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
</body>
jQuery 动画
基本动画
- show( )
- hide( )
- toggle( )
淡入淡出动画
- fadeln( )
- fadeOut( )
- fadeTo( )
- fadeToggle( )
学个英语:fade:变淡、变暗、主键消失
jQuery事件操作
$(function(){})和window.onload=function(){}
$(function(){})、window.onload=function(){},这两个都可以理解为页面加载完成之后的时间方法。
- 执行顺序:这两个事件的执行顺序是:jQuery的页面加载完成 先执行,然后才是原生js,原因:
- 原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载完成(比如iframe小窗口的加载、img图片的加载等)。
- 执行次数:原生js的页面加载完成之后,只会执行最后一个加载(因为这是个赋值操作,会将前面的内容覆盖),执行一次;jQuery不是这样,它会将你注册的先记录,然后页面加载完成后依次执行,执行多次。
$(function(){ })的完整写法是 $(document).ready(function(){ })
常用的事件处理方法
- click( ):绑定单机事件,以及触发单机事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
//传function是为点击事件添加方法
$("h5").click(function () {
alert("h5单机事件==click方法绑定")
})
$("button").click(function () {
//不传function相当于直接触发点击事件
$("h5").click()
})
})
</script>
</head>
<body bgcolor="#F0F8FF" >
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库。
</div>
</div>
<button type="button">按钮</button>
</body>
- mouseover( ):绑定鼠标移入事件,或者触发鼠标移动事件
- mouseout( ):绑定鼠标移出事件,或者触发鼠标移出事件
$(function () {
//传function是为 事件添加方法
$("h5").mouseover(function () {
alert("h5鼠标移入事件")
})
$("button").click(function () {
//不传function相当于直接触发事件
$("h5").mouseover()
})
})
- bind( ):可以跟元素一次性绑定一个或多个事件(中间用空格隔开)
$(function () {
//传function是为点击事件添加方法
$("h5").bind("click mouseover",function () {
console.log("这是bind绑定的事件")
})
})
- one( ):使用上和bind一样。但是one方法绑定的事件只会响应一次(每个事件都只会响应一次)
$(function () {
//传function是为点击事件添加方法
$("h5").one("click mouseover",function () {
console.log("这是one绑定的事件")
})
})
- unbind( ):跟bind方法相反,取消这个事件(如果传多个事件名,就用空格隔开,如果不传事件名,那么就会全部删除bind的事件)
$(function () {
//传function是为点击事件添加方法
$("h5").bind("click mouseover",function () {
console.log("这是bind绑定的click事件")
})
$("h5").unbind("click")
})
事件的冒泡
什么是事件的冒泡?
事件的冒泡是指,父子元素同时监听同一个事件,当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。
那么如何组织事件冒泡呢?
在事件函数体内,return false,可以阻止事件的冒泡传递。
事件对象
jQuery中存在一个事件对象:事件对象就是一个封装有触发的事件信息的一个javascript对象。
如何获取javascript的事件对象呢?
在给元素绑定事件的时候,在事件的function(event) 参数列表中添加一个参数,这个参数名,我们习惯取名为 event,这个event就是 javascript 传递参事件处理函数的事件对象。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//js原生获取事件对象
// window.onload=function () {
// document.getElementById("areadiv").onclick=function (event) {
// console.log(event)
// }
// }
//jQuery获取事件对象
$(function () {
$("#areadiv").click(function (event) {
console.log(event)
})
})
</script>
</head>
<body bgcolor="#F0F8FF" >
<div id="areadiv">点我</div>
</body>
javascript事件对象的利用
<script type="text/javascript">
$(function () {
$("#areadiv").bind("mouseover mouseout",function (event) {
if(event.type=="mouseover"){
console.log("鼠标移入")
}else if(event.type=="mouseout"){
console.log("鼠标移出")
}
})
})
</script>
根据参数进行判断
jQuery练习:图片跟随
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#small").bind("mouseover mouseout mousemove",function(event){
if(event.type=="mouseover"){
$("#showBig").show()
}else if (event.type=="mouseout"){
$("#showBig").hide()
}else if (event.type=="mousemove"){
$("#showBig").offset({
//这里之所以加个数据,是避免移除鼠标时发生闪烁。
//避免鼠标向右下角滑动的时候直接进入大图片触发消失函数
left:event.pageX+30,
top:event.pageY+30
})
}
})
})
</script>
</head>
<body bgcolor="#F0F8FF" >
<img id="small" src="123.jpg" />
<div id="showBig">
<img src="123.jpg">
</div>
</body>
关于jQuery到此就结束了,下面是一个大的示例的第一部分。
项目实践—表单验证的实现
我们新建一个项目,然后新建一个模块(static web),我这里起名叫疯人院了,因为我想弄个精神病院的网页,希望大家不要嫌弃,跟我继续。
项目我打包了:https://pan.baidu.com/s/1j0-yj1CiIzn2d98CmU6Dnw
提取码:b0k4
主要是这个regist.html的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎加入疯人院 +_+ </title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//给提交按钮绑定单机事件
$("#sub_btn").click(function () {
//开始验证用户的填写是否规范
//用户名:字母、数字、下划线,长度5-12
var usernameText=$("#username").val()
var usernamePatt=/^\w{5,12}$/
if(!usernamePatt.test(usernameText)){
$("span.errorMsg").text("用户名不合法")
return false
}
//密码:字母、数字、下划线,长度5-12
var passwordText=$("#password").val()
var passwordPatt=/^\w{5,12}$/
if(!passwordPatt.test(passwordText)){
$("span.errorMsg").text("密码不合法")
return false
}
//确认密码:和密码相同
var reqwdText=$("#repwd").val()
if(reqwdText!=passwordText){
$("span.errorMsg").text("确认密码和密码不一致")
return false
}
//邮箱验证:xxxxx@xxx.com
var emailText=$("#email").val()
var emailPatt=
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
if(!emailPatt.test(emailText)){
$("span.errorMsg").text("邮箱格式不合法")
return false
}
//验证码:现在只需要验证用户已输入,暂不需要了解验证码的生成
var codeText=$("#code").val()
//去掉验证码中的空格
codeText=$.trim(codeText)
if(codeText==null||codeText==""){
$("span.errorMsg").text("请填写验证码")
return false
}
//填写正确就清空错误提示内容
$("span.errorMsg").text("")
})
})
</script>
<style type="text/css">
.login_form{
height:420px;
/*距离最上面的距离大小*/
margin_top:25px;
}
</style>
</head>
<body bgcolor="black">
<div id="login_header">
<img class="logo_img" alt="这里本来有个美女图片" src="../../static/img/hally.png"/>
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">生活本该如此</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>注册疯人院成员</h1>
<span class="errorMsg"></span>
</div>
<div class="form">
<form action="regist_success.html" >
<input type="hidden" name="action" value="regist">
<label>用户名称:</label>
<input class="itxt" type="text" placeholder="请输入用户名"
autocomplete="off" tabindex="1" name="username" id="username" />
<br />
<br />
<label>用户密码:</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1" name="password" id="password" />
<br />
<br />
<label>确认密码:</label>
<input class="itxt" type="password" placeholder="确认密码"
autocomplete="off" tabindex="1" name="repwd" id="repwd" />
<br />
<br />
<label>电子邮件:</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址"
autocomplete="off" tabindex="1" name="email" id="email" />
<br />
<br />
<label>验证码:</label>
<input class="itxt" type="text" name="code" style="width: 150px;" id="code" />
<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px" />
<br />
<br />
<input type="submit" value="注册" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
商业转载 请联系作者获得授权,非商业转载 请标明出处,谢谢