您的位置：首页 > Web前端 > JQuery

JQuery入门案例讲解

2017-05-03 21:50 387 查看
我是做后台的，但是有时候得必须看一些前端的东西，非常头痛，我就在这总结一下常用的小案例，来供大家参考：

01_使用jQuery完成首页定时弹出广告图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}

#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#product{
border: 1px solid red;
width: 99%;
height: 554px;
}
#product_top{
border: 1px solid red;
width: 100%;
height: 50px;
}
#product_bottom{
border: 1px solid blue;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 1px solid blue;
width: 185px;
height: 497px;
float: left;
}
#product_bottom_right{
border: 1px solid blue;
width: 1128px;
height: 497px;
float: left;
}
#big{
border: 1px solid black;
width: 560px;
height: 248px;
float: left;
}
.small{
border: 1px solid black;
width: 184px;
height: 248px;
text-align: center;
float: left;
}
#bottom{
text-align: center;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
</style>

</head>

<body>
<!--第一步导入我们需要的JQuery架包-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

<script>
/*定时弹出广告的实现:
1 设置显示广告图片定时操作
2 执行完定时操作后,解除定时操作
3 设置清除图片定时操作
4 执行完定时操作后,解除定时操作*/
$(function() {
id = setInterval("showAD()",5000);
})

function showAD() {
$("#id_ad").show();
clearInterval(id);
id = setInterval("inAD()" ,5000);
}

function inAD() {
$("#id_ad").hide();
clearInterval(id);
}

</script>
<div>
<!--定义一个广告弹出图片的div-->
<div>
<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="99%" style="display: none;" id="id_ad"/>
</div>
<!--1.logo部分的div-->
<div>
<!--切分为3个小的div-->
<div class="top">
<img src="img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登录</a>
<a href="../案例三：使用JS对注册页面进行简单的校验/注册页面重新布局.html">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div id="clear">

</div>
<!--2.导航栏部分的div-->
<div id="menu">
<ul>
<li >首页</li>
<li >电脑办公</li>
<li >手机数码</li>
<li >孕婴保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.轮播图的div-->
<div>
<img src="img/1.jpg" width="99%" id="img1"/>
</div>
<!--4.热门商品的div-->
<div id="product">
<!--文字+图片部分的div-->
<div id="product_top">
<span style="font-size:25px ;">热门商品   <img src="img/title2.jpg"/></span>
</div>
<!--商品图片的div-->
<div id="product_bottom">
<!--划分左右两个div-->
<div id="product_bottom_left">
<img src="img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="clear"></div>
<div id="big">
<img src="img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
</div>
</div>
</div>
<!--5.广告图片的div-->
<div id="">
<img src="img/ad.jpg" width="99%" />
</div>
<!--6.热门商品的div-->
<div id="product">
<!--文字+图片部分的div-->
<div id="product_top">
<span style="font-size:25px ;">热门商品   <img src="img/title2.jpg"/></span>
</div>
<!--商品图片的div-->
<div id="product_bottom">
<!--划分左右两个div-->
<div id="product_bottom_left">
<img src="img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="clear"></div>
<div id="big">
<img src="img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="i
4000
mg/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
<div class="small">
<img src="img/small03.jpg" width="100%" height="60%"/>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥499</font></p>
</div>
</div>
</div>
</div>
<!--7.广告图片的div-->
<div id="">
<img src="img/footer.jpg" width="99%" />
</div>
<!--8.超链接与版权信息的div-->
<div id="bottom">
<a href="#">关于我们 </a>
<a href="#">联系我们 </a>
<a href="#">招贤纳士 </a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服务声明 </a>
<a href="#">广告声明 </a>
<p>Copyright © 2005-2016 传智商城 版权所有 </p>
</div>
<div>
<a href="BOM对象学习/02_history对象.html">go</a>
</div>
</div>
</body>
</html>

02_使用jQuery完成表格隔行变色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>

</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>

/*我们通过jq的选择器来实现该操作
我们首先使用层级选择器来查找到内容行，在选择出所有的基数行进行遍历，并修改其属性改变颜色

* */
$(function() {
var a = $("tbody tr:even").css("background-color","yellow");;
})
</script>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>



03_使用jQuery完成复选框的全选和全不选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>

</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
/*当点击全选是,设置单选按钮的状态为全选按钮的状态*/
$(function() {
$("#select").click(function() {
$("tbody input").attr("checked", this.checked);
});
})
</script>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select"></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>

04_使用jQuery完成省市二级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成省市二级联动</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}

#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}

</style>
<script src="../js/check1.js"></script>

</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function() {
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function() {
$("#city").empty();
var a =this.value;
$.each(cities, function(i,j) {
if(a == i) {
$.each(cities[i], function(a,m) {
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
})
</script>
<body>
<div>

<!--1.logo部分的div-->
<div>
<!--切分为3个小的div-->
<div class="top">
<img src="img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div id="clear">

</div>
<!--2.导航栏部分的div-->
<div id="menu">
<ul>
<li >首页</li>
<li >电脑办公</li>
<li >手机数码</li>
<li >孕婴保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中间注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>

</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河南</option>
<option value="3">河北</option>
</select>
<select id="city">

</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
<!--4.广告图片的div-->
<div id="">
<img src="img/footer.jpg" width="99%" />
</div>
<!--5.超链接与版权信息的div-->
<div id="bottom">
<a href="#">关于我们 </a>
<a href="#">联系我们 </a>
<a href="#">招贤纳士 </a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服务声明 </a>
<a href="#">广告声明 </a>
<p>Copyright © 2005-2016 传智商城 版权所有 </p>
</div>
</div>
</body>
</html>

05_使用jQuery完成下拉列表左右选择

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>

</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>

$(function() {
/*一个去右边*/
$("#right").click(function() {
$("#one option:selected").appendTo($("#two"));
});

/*全部去右边*/
$("#allright").click(function() {
$("#one option:selected").appendTo($("#two"));
});

/*双击去右边*/

$("#one").dblclick(function() {
$("#one option:selected").appendTo($("#two"));
});

/*一个去左边边*/
$("#left").click(function() {
$("#two option:selected").appendTo($("#one"));
});

/*全部去左边*/
$("#allleft").click(function() {
$("#two option:selected").appendTo($("#one"));
});

/*双击去左边*/

$("#two").dblclick(function() {
$("#two option:selected").appendTo($("#one"));
});
})

</script>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分类名称
</td>
<td>
<input type="text" name="cname" value="手机数码"/>
</td>
</tr>
<tr>
<td>
分类描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
</td>
</tr>
<tr>
<td>
分类商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋体">已有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="one">
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="right">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="allright">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="two">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<p><a href="#" id="left"><<</a></p>
<p><a href="#" id="allleft"><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改"/>
</td>
</tr>
dac4
</table>
</body>
</html>

06_验证注册表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier{
border: 0px solid white;
width: 1300px;
margin: auto;
}

#top{
border: 0px solid white;
width: 100%;
height: 50px;
}
#menu{
border: 0px solid white;
height: 40px;
background-color: black;
padding-top: 10px;
margin-bottom: 15px;
margin-top: 10px;
}
.top{
border: 0px solid white;
width: 405px;
height: 100%;
float: left;
padding-left: 25px;
}
#top1{
padding-top: 15px;
}
#bottom{
margin-top: 13px;
text-align: center;
}

#form{
height: 500px;
padding-top: 70px;
background-image: url(img/regist_bg.jpg);
margin-bottom: 10px;
}
a{
text-decoration: none;
}

label.error{
background:url(img/unchecked.gif) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
}

label.success{
background:url(img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}

#father{
border: 0px solid white;
padding-left: 307px;
}

#form2{
border: 5px solid gray;
width: 660px;
height: 450px;
}

</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<div id="contanier">
<div id="top">
<div class="top">
<img src="img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="img/header.png" height="45px" />
</div>
<div class="top" id="top1">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="menu">
<a href="#"><font size="5" color="white">首页</font></a>    
<a href="#"><font color="white">电脑办公</font></a>    
<a href="#"><font color="white">手机数码</font></a>    
<a href="#"><font color="white">鞋靴箱包</font></a>
</div>
<div id="form">
<form action="#" method="get" id="registForm">
<div id="father">
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2" >
          
<font size="5">会员注册</font>   USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
      
      
   
<label for="user" >用户名</label>
</td>
<td>
<em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>
      
      
   
密码
</td>
<td>
<em style="color: red;">*</em>   <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
      
      
   
确认密码
</td>
<td>
<em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr>
<td>
      
      
   
Email
</td>
<td>
<em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>
      
      
   
姓名
</td>
<td>
<em style="color: red;">*</em>   <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>
      
      
   
性别
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>

</td>
</tr>
<tr>
<td>
      
      
   
出生日期
</td>
<td>
<em style="color: red;">*</em>   <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>
      
      
   
验证码
</td>
<td>
<em style="color: red;">*</em>   <input type="text" name="yanzhengma" />
<img src="img/yanzhengma.png" style="height: 18px;width: 85px;"/>
</td>
</tr>
<tr>
<td colspan="2">
      
      
      
      
      
      
<input type="submit" value="注 册" height="50px"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
<div>
<img src="img/footer.jpg" width="100%"/>
</div>
<div id="bottom">
<a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>


验证注册表单需要说一下，就是我们需要引入JQuery插件，也就是人家写好的包。格式我们就不说了。我想这些也算是实用的了，还有一点很常用的知识点，就是JQuery与Ajax交互，我会写另一片文章来阐述一下JQuery 对ajax的大致操作过程。还有就是鉴于本篇章过于长，其实主要代码块就是那么几部分，注意侧重点就行了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JQuery
相关文章推荐
新的分享
章节导航