本篇博客回顾了使用JQuery进行网页交互特效制作的第十章课程，涵盖从阶段一到阶段五的重要内容。主要讨论了样式应用和代码实现，通过实例深入解析JQuery在网页特效中的应用。
阶段一
样式
* {padding:0;margin:0;}
#header,#main{
width:600px;
margin:0 auto;
}
#main{
padding: 10px;
border: 1px #999999 solid;
border-radius: 8px;
overflow: hidden;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}
.userWidth{
width:110px;
}
dl dd div{
display: inline-block;
font-size:12px;
color:#000;
margin-left: 5px;
line-height: 18px;
}
dl{
clear:both;
line-height: 22px;
}
dt,dd{
float:left;
}
dt{
width:110px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
}
dl>dd:first-of-type{width: 170px;}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background:#fff2e5 url(../images/li_err.gif)5px 2px no-repeat;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat;
padding:2px 5px 0px 25px;
line-height:20px;
}
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易新用户注册页面</title>
<link rel="stylesheet" href="../css/register.css"/>
</head>
<body>
<div id="header"><img src="../images/register_logo.gif" alt="logo"/></div>
<div id="main">
<form id="registerForm" action="" method="post" name="myform">
<dl>
<dt>通行证用户名：</dt>
<dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd>
<dd>
<div id="userNameId"></div>
</dd>
</dl>
<dl>
<dt>登录密码：</dt>
<dd><input type="password" id="pwd" class="inputs"/></dd>
<dd>
<div id="pwdId"></div>
</dd>
</dl>
<dl>
<dt>重复登录密码：</dt>
<dd><input type="password" id="repwd" class="inputs"/></dd>
<dd>
<div id="repwdId"></div>
</dd>
</dl>
<dl>
<dt>性别：</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value=""/>女
</dd>
</dl>
<dl>
<dt>真实姓名：</dt>
<dd><input type="text" id="realName" class="inputs"/></dd>
</dl>
<dl>
<dt>昵称：</dt>
<dd><input type="text" id="nickName" class="inputs"/></dd>
<dd>
<div id="nickNameId"></div>
</dd>
</dl>
<dl>
<dt>关联手机号：</dt>
<dd><input type="text" id="tel" class="inputs"/></dd>
<dd>
<div id="telId"></div>
</dd>
</dl>
<dl>
<dt>保密邮箱：</dt>
<dd><input type="email" id="email" class="inputs"/></dd>
<dd>
<div id="emailId"></div>
</dd>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="../images/button.gif" class="btn"/></dd>
</dl>
</form>
</div>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#userName").blur(checkName);
$("#pwd").blur(checkPwd);
$("#nickName").blur(checkNick);
$("#tel").blur(checkTel);
$("#email").blur(checkEmail);
$("#").blur(checkPwd);
})
//通行证用户名
function checkName(){
var user=$("#userName").val();
var regUser = /^[a-zA-Z0-9][a-zA-Z0-9\-\._]{2,16}[a-zA-Z0-9]$/;
if(user=="pwd"){
$("#userNameId").html("用户名不能为空！");
$("#userNameId").addClass("error_prompt");
$("#userNameId").removeClass("ok_prompt");
return false;
}else if(regUser.test(user)==false){
$("#userNameId").html("1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18");
$("#userNameId").addClass("error_prompt");
$("#userNameId").removeClass("ok_prompt");
return false;
}
$("#userNameId").html("输入正确!");
$("#userNameId").addClass("ok_prompt");
$("#userNameId").removeClass("error_prompt");
return true;
}
//密码
function checkPwd(){
var pwd=$("#pwd").val();
var repwd=/\d{6,16}/;
if(pwd==""){
$("#pwdId").html("登录密码不能为空！");
$("#pwdId").addClass("error_prompt");
$("#pwdId").removeClass("ok_prompt");
return false;
}else if(repwd.test(pwd)==false){
$("#pwdId").html("密码长度必须为6到16字符！");
$("#pwdId").addClass("error_prompt");
$("#pwdId").removeClass("ok_prompt");
return false;
}
$("#pwdId").html("输入正确!");
$("#pwdId").addClass("ok_prompt");
$("#pwdId").removeClass("error_prompt");
}
//昵称
function checkNick(){
var nick=$("#nickName").val();
var regick=/^([\u4e00-\u9fa5]|\w|[!@#$%&*])+$/;
var len=nick.replace(/[\u4e00-\u9fa5]/g,"ab").length;
if(nick==""){
$("#nickNameId").html("昵称不能为空！");
$("#nickNameId").addClass("error_prompt");
$("#nickNameId").removeClass("ok_prompt");
return false;
}else if(regick.test(nick)==false){
$("#nickNameId").html("只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成！");
$("#nickNameId").addClass("error_prompt");
$("#nickNameId").removeClass("ok_prompt");
return false;
}else if(len<4||len>16){
$("#nickNameId").html("昵称为4-16个字符","error_prompt");
$("#nickNameId").addClass("error_prompt");
$("#nickNameId").removeClass("ok_prompt");
return false;
}
$("#nickNameId").html("输入正确！");
$("#nickNameId").addClass("ok_prompt");
$("#nickNameId").removeClass("error_prompt");
return true;
}
//手机号码
function checkTel(){
var tel=$("#tel").val();
var regtel=/^(13|15|18)\d{9}$/;
if(tel==""){
$("#telId").html("关联手机号不能为空！");
$("#telId").addClass("error_prompt");
$("#telId").removeClass("ok_prompt");
return false;
}else if(regtel.test(tel)==false){
$("#telId").html("关联手机号码输入不正确，请重新输入！");
$("#telId").addClass("error_prompt");
$("#telId").removeClass("ok_prompt");
return false;
}
$("#telId").html("输入正确");
$("#telId").addClass("ok_prompt");
$("#telId").removeClass("error_prompt");
return true;
}
//邮箱
function checkEmail(){
var email=$("#email").val();
var regemail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email==""){
$("#emailId").html("保密邮箱不能为空！");
$("#emailId").addClass("error_prompt");
$("#emailId").removeClass("ok_prompt");
return false;
}else if(regemail.test(email)==false){
$("#emailId").html("保密邮箱格式不正确，请重新输入！");
$("#emailId").addClass("error_prompt");
$("#emailId").removeClass("ok_prompt");
return false;
}
$("#emailId").html("输入正确");
$("#emailId").addClass("ok_prompt");
$("#emailId").removeClass("error_prompt");
return true;
}
</script>
</body>
</html>
阶段2~5
样式
@charset "gb2312";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#1965b3;
text-decoration: none;
}
a:hover{
color:#CD590C;
text-decoration:underline;
}
img{
border:0px;
vertical-align:middle;
}
#header{
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav{
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist{
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li{
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red{
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow{
background-color:#ff6600;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray{
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow{
background-color:#e4e4e4;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content{
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1{
text-align:center;
width:50px;
}
.title_2{
text-align:center;
}
.title_3{
text-align:center;
width:80px;
}
.title_4{
text-align:center;
width:80px;
}
.title_5{
text-align:center;
width:100px;
}
.title_6{
text-align:center;
width:80px;
}
.title_7{
text-align:center;
width:60px;
}
.line{
background-color:#a7cbff;
height:3px;
}
.shopInfo{
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input{
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
border-right:solid 1px #FFF;
}
.cart_td_3{
text-align:left;
}
.cart_td_4{
font-weight:bold;
}
.cart_td_7{
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand{
cursor:pointer;
}
.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝购物车页面</title>
<link href="../css/myCart.css" rel="stylesheet"/>
</head>
<body>
<div id="header"><img src="../images/taobao_logo.gif" alt="logo"/></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<form action="" method="post" name="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img
src="../images/taobao_relation.jpg" alt="relation"/></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
<td class="cart_td_2"><img src="../images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br/>
颜色：棕色 尺码：37<br/>
保障：<img src="../images/taobao_icon_01.jpg" alt="icon"/></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="../images/taobao_minus.jpg" alt="minus" class="hand" onclick="jian(0)"/> <input id="num_1"
type="text"
value="1"
class="num_input"
readonly="readonly"/>
<img src="../images/taobao_adding.jpg" alt="add" class="hand" onclick="add(0)"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img
src="../images/taobao_relation.jpg" alt="relation"/></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2"/></td>
<td class="cart_td_2"><img src="../images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br/>
保障：<img src="../images/taobao_icon_01.jpg" alt="icon"/> <img src="../images/taobao_icon_02.jpg"
alt="icon"/></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="../images/taobao_minus.jpg" alt="minus" class="hand" onclick="jian(1)"/> <input id="num_2"
type="text"
value="1"
class="num_input"
readonly="readonly"/>
<img src="../images/taobao_adding.jpg" alt="add" class="hand" onclick="add(1)"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img
src="../images/taobao_relation.jpg" alt="relation"/></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
<td class="cart_td_2"><img src="../images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br/>
保障：<img src="../images/taobao_icon_01.jpg" alt="icon"/> <img src="../images/taobao_icon_02.jpg"
alt="icon"/></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="../images/taobao_minus.jpg" alt="minus" class="hand" onclick="jian(2)"/> <input id="num_3"
type="text"
value="1"
class="num_input"
readonly="readonly"/>
<img src="../images/taobao_adding.jpg" alt="add" class="hand" onclick="add(2)"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img
src="../images/taobao_relation.jpg" alt="relation"/></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
<td class="cart_td_2"><img src="../images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br/>
保障：<img src="../images/taobao_icon_01.jpg" alt="icon"/></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="../images/taobao_minus.jpg" alt="minus" class="hand" onclick="jian(3)"/> <input id="num_4"
type="text"
value="2"
class="num_input"
readonly="readonly"/>
<img src="../images/taobao_adding.jpg" alt="add" class="hand" onclick="add(3)"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="3"><a id="deleteAll" href="javascript:void(0);" onclick="del()"><img src="../images/taobao_del.jpg"
alt="delete"/></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br/>
可获积分 <label class="yellow" id="integral"></label> 点<br/>
<input name=" " type="image" src="../images/taobao_subtn.jpg"/></td>
</tr>
</table>
</form>
</div>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//自动计算商品金额的函数productCount()
productCount();
//实现全选的功能
$("#allCheckBox").click(function () {
$(this).prop("checked",this.checked);
$(":checkbox[name='cartCheckBox']").prop("checked", this.checked);
productCount();
});
//给所有子复选框绑定click事件
$("input[name=cartCheckBox]").bind("click", function () {
var $attr = $(this).attr("checked");
if($attr != "checked"){
$(this).attr("checked","checked");
}else{
$(this).removeAttr("checked");
}
//定义临时变量
if($("input[name=cartCheckBox]").length==$("input[name=cartCheckBox]:checked").length){
$("#allCheckBox").prop("checked",this.checked);
}else{
$("#allCheckBox").removeAttr("checked");
}
});
$(".hand").bind("click", function () {
var count = $(this).prev().val();
$(this).prev().val(++count);
productCount();
});
$(".hand").bind("click", function () {
var count = $(this).next().val();
var result = count--;
if (result <= 1) {
alert("宝贝数量不可以小于0")
count = 1;
}
$(this).next().val(count);
productCount();
});
//删除
$(".cart_td_8").find("a").click(function(){
$(this).parent().parent().prev().remove();//删除前一<tr>
$(this).parent().parent().remove();//删除当前<tr>
productCount();
});
});
//删除所选
function del(){
$("#deleteAll").click(function(){
$("input[name=cartCheckBox]:checked").each(function () {
$(this).parents("tr").prev().remove();//删除前一<tr>
$(this).parents("tr").remove();//删除当前<tr>
productCount();
});
});
}
//自动计算每行商品的小计，商品总价和可获积分
function productCount() {
var summer= 0;
var integral = 0;
$("tr[id]").each(function (i, dom) {
//商品数量
var num = $(dom).children(".cart_td_6").find("input").val();
//商品小计
var price = num * $(dom).children(".cart_td_5").text();
//显示商品小计
$(dom).children(".cart_td_7").html(price);
//计算总价
summer+= price;
//计算积分
integral += $(dom).children(".cart_td_4").text() * num;
});
//商品总价
$("#total").html(summer);
//可获积分
$("#integral").html(integral);
}
//加
// function add(num){
// var count=parseInt(document.getElementsByName("num_input")[num].value)+1;
// document.getElementByClassName("num_input")[num].value=count;
// productCount();
//
// }
// //减
// function jian(num){
// var count=parseInt(document.getElementsByName("num_input")[num].value);
// if(count==1){
// alert("不能再减了，再减就没有啦！");
// }
// else{
// count=count-1;
// var totals=parseFloat(prices*count);
// document.getElementByClassName("num_input")[num].value=count;
// productCount();
// }
//
// }
</script>
</body>
</html>
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
