制作图书简介页面（JavaScript）

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

今天我学习

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

阅读量5.6k

点赞数 11

分类专栏： Web2课设 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48112113/article/details/119036797

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 6 订阅

订阅专栏

Web2课设

8 篇文章 0 订阅

订阅专栏

1. 任务要求

1）熟悉jQuery的选择器；

2）掌握jQuery的基本选择器；

3）掌握jQuery对象的click()方法；

4）掌握jQuery对象的css()方法；

2. 需求说明

使用基本选择器和层次选择器获取页面元素，实现如下图所示的页面效果，具体要求如下：

（1）“自营图书几十万……”一行的字体颜色为红色；

（2）“￥24.10”的字体大小为24px，红色加粗显示；

（3）“[定价：￥35.00]”的字体颜色为#ccc（灰色），带有中划线；

（4）<dl>标签中的字体颜色均为红色；

（5）单击“以下促销……”链接，显示隐藏的内容，如下图所示，此部分字体颜色均为红色；

（6）“加购价”“满减”“105-6”“200-16”的字体颜色为白色，背景颜色为红色。

3. 实现思路

1）主要使用选择器$(“ ”).css(“ ”)，对字体颜色、大小、粗细等进行改变。

2）类选择器根据给定的class匹配元素。例：$(“.intro”).css(“ ”)。

3）Id选择器根据给定的id匹配元素。例：$(“#jdPrice”).css(“ ”)。

4）层次选择器通过DOM元素之间的层次关系来获取元素。例：$(“dl>dd”).css(“ ”)对dl元素下的dd元素进行改变。$(“#jdPrice span”).css(“ ”)对jdPrice元素里的所有<span>进行选取。

5）同辈选择器用来选取目标元素之后的所有同辈元素。例：$(“dt~dd”).css(“ ”)。

4. 实现代码

<script type="text/javascript">
	$(document).ready(function(){
		//$("#book span").css("color","red");
		$(".intro").css("color","red");
		$("dl>dd").css("color","red");
		$("#jdPrice span").css({"font-size":"24px","color":"red","font-weight":"blod"});
		$("#jdPrice p").css({"color":"#cccccc","font-size":"13px"});
		$("#jdPrice p span").css({"color":"#cccccc","text-decoration":"line-through","font-size":"13px"});
		$("dt").css("color","red");
		$("dt~dd").css("display","none");
		$("dt").click(function(){
			$("dd").css("display","block");
			$("dl").css("line-height","25px");
		})
		$("dd span").css({"color":"white","background":"red","padding":"1px 5px","margin-right":"5px"});
		$("#ticket span").css({"color":"white","background":"red","padding":"1px 5px","margin-right":"5px"});
	})
</script>

5. 运行结果

6. 全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
    <script language="javascript" src="js/jquery-1.12.4.js"></script>
    <script language="javascript" src="../Untitled-1.js"></script>
</head>
<body >
<section id="book">
    <div class="imgLeft"><img src="img/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>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
	<script type="text/javascript">
		$(document).ready(function(){
			//$("#book span").css("color","red");
			$(".intro").css("color","red");
			$("dl>dd").css("color","red");
			$("#jdPrice span").css({"font-size":"24px","color":"red","font-weight":"blod"});
			$("#jdPrice p").css({"color":"#cccccc","font-size":"13px"});
			$("#jdPrice p span").css({"color":"#cccccc","text-decoration":"line-through","font-size":"13px"});
			$("dt").css("color","red");
			$("dt~dd").css("display","none");
			$("dt").click(function(){
				$("dd").css("display","block");
				$("dl").css("line-height","25px");
			})
			$("dd span").css({"color":"white","background":"red","padding":"1px 5px","margin-right":"5px"});
			$("#ticket span").css({"color":"white","background":"red","padding":"1px 5px","margin-right":"5px"});
		})
	</script>
</section>
</body>
</html>