使用JQuery快速高效制作网页交互特效第十章课程总复习阶段1~5

本篇博客回顾了使用JQuery进行网页交互特效制作的第十章课程,涵盖从阶段一到阶段五的重要内容。主要讨论了样式应用和代码实现,通过实例深入解析JQuery在网页特效中的应用。
摘要由CSDN通过智能技术生成

阶段一
样式



* {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> &gt; <a href="#">我的淘宝</a> &gt; 我的购物车</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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值