使用jQuery制作图书简介

最新推荐文章于 2024-08-06 14:46:01 发布

晓姌

最新推荐文章于 2024-08-06 14:46:01 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/liuyan11223/article/details/125631056

本文介绍了如何利用jQuery配合HTML5和CSS3，创建具有动态效果的图书简介。通过示例代码展示了从HTML结构到CSS样式，再到JavaScript交互的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery制作图书简介

html5代码如下：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8" />
		<title>图书简介</title>
		<link rel="stylesheet" href="css/bookStyle.css" />
		<script src="lib/jquery-3.6.0.js"></script>
	</head>
	<body>
		<section id="book">
			<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店" /></div>
			<div class="textRight">
				<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
				<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
				<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
				<div class="price">
					<div id="jdPrice">
						京东价： <span class="red">￥24.10</span> [6.9折]
						<p class="dd">[定价：<span>￥35.00</span>]</p>
						(降价通知)
					</div>
					<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
					<dl>
						<dt>以下促销可在购物车任选其一</dt>
						<dd><span class="fff">加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
						<dd><span class="fff">满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
					</dl>
					<p id="ticket">领 券：<span class="fff">105-6</span> <span class="fff">200-16</span></p>
				</div>
			</div>
		</section>
		<script src="js/index.js"></script>
	</body>
</html>

css3代码如下：

body,
h1,
h2,
h3,
p,
ul,
li,
dl,
dt,
dd,
div,
section {
	margin: 0;
	padding: 0;
}
body {
	font-family: "微软雅黑";
	font-size: 12px;
	line-height: 28px;
}
#book {
	margin: 5px auto 0 auto;
	width: 650px;
	overflow: hidden;
}
.imgLeft {
	float: left;
	width: 210px;
}
.imgLeft img {
	width: 200px;
}
.textRight {
	float: right;
	width: 440px;
}
#book h1 {
	font-size: 16px;
	line-height: 50px;
}
.textRight dl {
	padding-left: 5em;
}
.textRight dl dd {
	display: none;
}
#jdPrice p {
	display: inline;
}

js代码如下：

$(document).ready(function () {
	$(".intro").css("color", "red");
	$(".red").css({ color: "red", fontSize: "20px", fontWeight: "700" });
	$(".dd").css({ color: "#ccc" });
	$(".dd span").css({ textDecoration: "line-through" });
	$("dl dt,dd").css({ color: "red" });
	$(".fff").css({ color: "#fff", backgroundColor: "red", padding: "2px", border: "1px solid red" });
	$("dl dt").click(function () {
		$(".textRight dl dd").css({ display: "block" });
	});
});