jquery课后练习
练习1：制作今日团购模块
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>今日团购模块 </title>
<link rel="stylesheet" href="css/shopping.css">
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="pruduce">
<div class="top"></div>
<div class="main">
<div class="box">
<dl>
<dt><img src="images/pic1.jpg" /></dt>
<dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd>
</dl>
<div class="btprice_1"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic2.jpg" /></dt>
<dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
</dl>
<div class="btprice_2"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic3.jpg" /></dt>
<dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
</dl>
<div class="btprice_3"></div>
</div>
</div>
</div>
<script>
$(".box").mouseover(function () {
$(this).children().addClass("hoverstyle")
}).mouseout(function () {
$(this).children().removeClass("hoverstyle")
})
</script>
</body>
</html>
练习2：制作QQ简易聊天框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ简易聊天框</title>
<link rel="stylesheet" href="css/chat.css">
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<section id="chat">
<div class="chatBody"></div>
<div><img src="images/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script>
$(function(){
var $imgs=new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");
var $name=new Array("时尚伊人","六月奇迹","松松");
$("#send").click(function(){
var $people = parseInt(Math.random() * 3);
var $text =$(".chatText").val();
if($text.length==""){
return;
}else{
var $currentstr=$(".chatBody").append("![]("</span><span class="token operator">+</span>$imgs<span class="token punctuation">[</span>$people<span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">")
"+$name[$people]+"
"
+$text+"");
$(".chatBody p").addClass("a");
$("textarea").val("");
}
});
});
</script>
</body>
</html>
练习3：制作课工场论坛发贴
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>课工场论坛列表</title>
<link href="css/bbs.css" rel="stylesheet">
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="bbs">
<header><span>我要发帖</span></header>
<section>
<ul></ul>
</section>
<div class="post">
<input class="title" placeholder="请输入标题（1-50个字符）">
所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
<textarea class="content"></textarea>
<input class="btn" value="发布">
</div>
<div class="bbsList">
<ul></ul>
</div>
</div>
<script>
$(function() {
var i=0;
$("header").click(function(){
if(i>0){
$(".post").hide();
i=0;
}else{
$(".post").show();
i=1;
}
});
$(".btn").click(function(){
//1.创建li
var $li = $("");
//2.创建img
var tou = new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
var r = parseInt(Math.random() * tou.length);//随机数0 1 2 3
var $img = $("![](images/"</span)
+tou[r]+" />");
$li.append($img);
//3.创建h1
var $h1 = $(""
+$(".title").val()+"");
$li.append($h1);
//4.创建p
var date = new Date();
//年
var year = date.getFullYear();
//月
var month = date.getMonth()+1;
//日
var day = date.getDate();
//时
var hour = date.getHours();
//分
var minute = date.getMinutes();
//秒
var second = date.getSeconds();
//时间
var time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
//版块信息+发布时间
var $p = $(""
+$("select").val()+"发布时间："+time+"");
$li.append($p);
$(".bbsList ul").prepend($li);//插入到前面
$(".post").hide();
$(".title").html("");
$("select").html("");
$("textarea").html("");
});
});
</script>
</body>
</html>
练习4：制作凡客诚品帮助中心页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 凡客诚品帮助中心页面</title>
<link rel="stylesheet" href="css/vancl.css">
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="bodyDiv">
<!-- 输入框 -->
<input type="text" value="请输入要查询的问题" name='search' class='search'/>
<!-- 左边导航 -->
<div id='nav'>
<ul>
<li>
<div class='first'>账号管理</div>
<ul class='second'>
<li>账号注册</li>
<li>找回密码</li>
<li>账户关联登录</li>
<li>账号常见问题</li>
</ul>
</li>
<li>
<div class='first'>购物指南</div>
<ul class='second'>
<li>购物流程</li>
<li>服务条款</li>
<li>积分计划</li>
<li>取消订单</li>
</ul>
</li>
<li>
<div class='first'>配送方式</div>
<ul class='second'>
<li>国内配送</li>
<li>订单拆分</li>
<li>商品验货与签收</li>
<li>配送常见问题</li>
</ul>
</li>
<li>
<div class='first'>支付方式</div>
<ul class='second'>
<li>在线支付</li>
<li>货到付款</li>
<li>VANCL礼品卡</li>
<li>发票制度</li>
</ul>
</li>
</ul>
</div>
<!-- 流程 -->
<div class="tab">
<div id="tab_bg" class="tab_bg0">
<div class="tab_current">
<a name="index_gwlc_1" class="track" href="#">1.新用户注册</a>
</div>
<div class="tab_common">
<a name="index_gwlc_2" class="track" href="#">2.挑选商品</a>
</div>
<div class="tab_common">
<a name="index_gwlc_3" class="track" href="#">3.确认下单</a>
</div>
<div class="tab_common">
<a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a>
</div>
<div class="tab_common">
<a name="index_gwlc_5" class="track" href="#">5.验货签收</a>
</div>
</div>
</div>
<!-- 提交问题 -->
<div class="jiejue2">
<h3>这条帮助是否解决了您的问题？</h3>
<div class="qiehuan">
<input name="IsAvail" type="radio" value="1" checked="checked" /> 已解决
<input name="IsAvail" type="radio" value="0" /> 未解决
<input id="ContID" type="hidden" value="1"/>
</div>
<div class="wenti" style="display:none">
<p>问题没解决？请选择原因:</p>
<p><select name="TrackID" id="TrackID" >
<option value="1">文字太多，阅读困难</option>
<option value="2">内容复杂，看不懂</option>
<option value="3">描述不清楚</option>
<option value="99">其他原因</option>
</select></p>
<div id="TrackContentDiv" style=" display:none;">
<p>也可以直接填写原因:</p>
<p><textarea name="TrackContent" id="TrackContent" cols="45" rows="5" ></textarea></p>
</div>
</div>
<p class="wenti_result"><a href=" "><img src="images/submit_bt.jpg"/></a></p>
</div>
</div>
<script>
$(".first").on("mousedown",function () {
$(this).next().slideToggle()
})
$.each($("#tab_bg").children(),function (i,o) {
$(this).hover(function () {
if ($(this).attr("class")!="tab_current"){
$(this).toggleClass("tab_current")
switch (i) {
case 0:
$("#tab_bg").removeClass($("#tab_bg").attr("class")).addClass("tab_bg0")
break;
case 1:
$("#tab_bg").removeClass($("#tab_bg").attr("class")).addClass("tab_bg1")
break;
case 2:
$("#tab_bg").removeClass($("#tab_bg").attr("class")).addClass("tab_bg2")
break;
case 3:
$("#tab_bg").removeClass($("#tab_bg").attr("class")).addClass("tab_bg3")
break;
case 4:
$("#tab_bg").removeClass($("#tab_bg").attr("class")).addClass("tab_bg4")
break;
default:
break;
}
}
},function () {
$(this).removeClass("tab_current")
$(this).addClass("tab_common")
})
})
$("input[name='IsAvail']").change(function () {
if ($(this).val() == 0){
$(".wenti").toggle()
}else {
$(".wenti").toggle()
}
})
</script>
</body>
</html>