ps:在此之前,讲明两个注意点:
-
上机练习3的参考解决方案里,同样使用next()来获取下一个元素,但是我做的就是不成功,当然,我和书本上的参考代码有所出入.代码中,当点击"你是我人间是四月天"文字a标签时,设置$("#a").click(function{ ( t h i s ) . c s s ( " c o l o r " : " b l u e " ) , " f o n t − s i z e " : " 24 p x " ) ( 原 先 , 我 设 置 的 字 体 是 27 p x ) 而 当 加 上 (this).css({"color":"blue"),"font-size":"24px"}) (原先,我设置的字体是27px) 而当加上 (this).css("color":"blue"),"font−size":"24px")(原先,我设置的字体是27px)而当加上(this).next().css(“color”,“green”);时,文本不会显示绿色 后来,我将a标签同样的放在p标签中,设置id为b 将代码改成 $("#b").next().css(“color”,“green”);时,文字a标签点击后会变成蓝色,字体会变小,而文本颜色也会变成绿色. 我想,只有在同类标签 (这里所提及的是"p标签") 里,next()设置样式才会显示吧. (个人观点,你可以一试,不介意你来打脸我!)
-
我将要显示的内容简介放在id为five的div盒子模型里,当点击"查看全部"a标签时,内容简介会显示. 但是,如果你是在style里设置div属性display为none,而在script里设置$("#c").click(function () { $(".five").show(); }) 那么,效果不显示. 原因是因为,在script里,你设置了点击后,内容显示的效果,却没有在script里,设置点击前内容不显示的状态,而这些,都应发生在网页加载时,服务器接收后,显示出来的效果,不是在style样式里设置不显示! ! !
-
所以,如图! ! ! ! ! !
接下来,放代码和效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery变换网页效果</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.one {
display: inline-block;
}
.two {
display: inline-block;
}
h2 {
font-family: 宋体;
font-size: 27px;
}
#a {
color: gray;
text-decoration: none;
}
.title {
margin-top: 12px;
}
.two a:nth-last-child(1) {
color: darkgray;
}
.three {
border: 1px solid white;
height: 34px;
width: 1534px;
color: white;
background-color: gray;
font-weight: bold;
padding: 11px 0px 0px 24px;
}
.four p:nth-of-type(1) {
color: #4D4D4D;
}
.two a:nth-child(1) {
font-size: 28px;
}
</style>
<script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="title">
<div class="one">
<img src="../../images/1111111111111.jpg" alt="" width="204px" height="340px">
</div> <!--one-->
<div class="two">
<p id="b"><a href="#" id="a">你是人间的四月天</a></p>
<p>
笑响点亮了四面风;<br>
轻灵在春的光艳中交舞着变 <br>
你是四月早天里的云烟,<br>
黄昏吹着风的软,<br>
星子在无意中闪,<br>
细雨点洒在花前。<br>
鲜妍百花的冠冕你戴着,<br>
你是天真,庄严,<br>
你是夜夜的月圆。<br>
柔嫩喜悦,<br>
水光浮动着你梦期待中白莲。<br>
你是一树一树的花开,<br>
是燕在梁间呢喃,<br>
——你是爱,是暖,是希望,<br>
<a href="#" id="c">查看全部</a>
</p>
</div> <!--two-->
<div class="five">
<div class="three">内容简介</div> <!--three-->
<div class="four">
<p>
这首诗发表于1934年4月的《学文》1卷1期上。关于这首诗有两种说法:一是为悼念徐志摩而作,
一是为儿子的出生而作,以表达心中对儿子的希望和儿子的出生带来的喜悦 <br>
梁从诫先生在《倏忽人间四月天》中说:“父亲曾告诉我,《你是人间的四月天》是母亲在我出生后的喜悦中
为我而作的,但母亲自己从未对我说起过这件事。”对于这首诗的创作意图,梁先生说得很客观。故这首诗一方面
是一首情诗,是为已在天国的徐志摩而作。另一方面,林徽因是一个母亲,有着对孩子强烈的母爱,为孩子写一首
这样轻快灵动的诗也是是绝对可能的。<br>《你是人间的四月天》的一至四节句式结构基本相同,形成复沓,
构成对称的乐章,将心中的爱以一幅幅四月天丰美的画面作比,节奏明快"排比的句式将画面连接,
情感如水面涟漪层层叠叠荡漾起伏,作品不仅美而且易于吟咏,朗朗动人"诗的第五节/你是爱,是暖,
是希望,/你是人间的四月天!”是收束的乐章,以抽象的爱、暖、希望来比喻心中的你,极尽盛赞,
美不胜收“你是人间的四月天”与诗的开篇呼应,重复中有变化,诗情回旋而流转,毫无滞涩之感。
<br>作为诗歌最为形式化的表达上,此诗的节奏、韵律与语词的选取都处于语词的中性状态,没有大红大紫、
纯黑纯白的俗艳与锋利,在声音上,也是温和的、静雅的,甚至走向旖旎和慵懒;十一个“你”字,既突出了主题,
又起到了“衬韵”的作用,在诗歌运行的过程中,“你”字的每一次出现,就像乐队演奏中的节点,
以“频率”的方式突出了“我”的指向,这是一种形式美感与内容美感的深层次结合,是一种
尚未被人们研究和认识的精妙之处。歌颂四月天,其实都是在向“你”倾诉,全诗只有一处破折号,
这一处破折号写着:“你是爱,是暖,是希望”,什么样的希望呢?联系林徽因的知识背景,
我们会更加明确这首诗艳丽的画面背后,有着理性主义表达的节制和书写的雅致,完全能够体现出
古典英国诗歌的高贵气象。
</p>
</div> <!--four-->
</div> <!--five-->
</div> <!--title-->
<script type="text/javascript">
$(document).ready(function () {
$(".five").css("display", "none");
$("#c").click(function () {
$(".five").show();
})
$("#a").click(function () {
$(this).css({"color": "blue", "font-size": "24px"});
$("#b").next().css("color", "green");
})
})
</script>
</body>
</html>