jQuery第5章上机练习3(使用jQuery变换网页效果)

ps:在此之前,讲明两个注意点:

上机练习3的参考解决方案里,同样使用next()来获取下一个元素,但是我做的就是不成功,当然,我和书本上的参考代码有所出入.代码中,当点击"你是我人间是四月天"文字a标签时,设置$("#a").click(function{ (this).css("color":"blue"),"font−size":"24px")(原先,我设置的字体是27px)而当加上(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>

jQuery第5章上机练习3(使用jQuery变换网页效果)相关推荐

JAVA数据库第四章上机3_Java第二至第四章上机练习题
Java第二章~第四章上机题以下页码见第8版教材 1.完成P53页2.14题 2.完成P53页2.15题,请使用循环编程.输入分别为半年,一年. 3.同上题描述进行编程,问要存多少个月,获得的利息大 ...
4-1 :input表单选择器 jQuery第四章很关键好像刚好可以解决微信自动回复...
jQuery第四章很关键好像刚好可以解决微信自动回复 $("#frmTest :input") //冒号之前一定要有空格 :input表单选择器如何获取表单全部元素? ...
【0基础学java】教学日志：javaSE-面向对象6-面向对象前4章上机作业点评，主要涉及继承、封装、多态三个章节的内容
目录一.面向对象第一章上机作业参考答案(略) 二.面向对象第二章上机作业参考答案: 三.面向对象第三章上机作业参考答案: 1.上机练习1已在第三章博客中编写,请参考: 2.上机练习2 四.面向对象第 ...
C#第四章上机练习2
C#第四章上机练习2 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
c井语言和SQL第一章上机1,第一章 SQL Server 数据库基础复习内容（上机）
上机课程总目标在本学期中,将模拟开发一套学员信息管理系统,用来管理学员的个人基本资料,老师资料,学生成绩,课程信息等教学相关内容,以实现学校的信息自动化,提高工作效率. 该系统包括学生档案管理.学生 ...
Java 北大青鸟第一学期第二章上机练习
Java 北大青鸟第一学期第二章上机练习手中牌互换华氏度摄氏度银行定期储蓄业务数据类型源文件下载手中牌互换 public static void main(String[] args ...
Python程序设计与算法基础教程（第二版）微课版第四章上机实践答案
Python程序设计与算法基础教程(第二版)微课版第四章上机实践答案 2. def generate(L) : #生成杨辉三角的一行List = [1]for x in range(1,len(L) ...
Python 程序设计与算法基础教程（第二版）第四章上机实践
第四章上机实践部分参考答案 2.格式化杨辉三角 3.求直角三角形周长和面积 4.随机数 5.党费 6.袖珍计算器 7.判断三边构成三角形 8.鸡兔 9.计算e的x次方近似值 10.平方根 11.余数 ...
jQuery入门第一章（jQuery初体验）
JQ 基本概念 jQuery 其实就是别的团队封装好的一个 JS 文件. 常见错误没有引入 jQuery 文件,引入失败,请检查 jquery.js 文件的路径. JQ 对象和 DOM 对象互相转 ...
好记心不如烂笔头之jQuery学习,第一章
jQuery对象和DOM对象的转换: 1.jquery对象是对象数组,于是乎: var $cr = $('#cr');var cr = $cr[0]; 2.使用jquery的自带函数: var $cr ...

jQuery第5章上机练习3(使用jQuery变换网页效果)

jQuery第5章上机练习3(使用jQuery变换网页效果)相关推荐

最新文章

热门文章