第8章 课后作业

最新推荐文章于 2024-05-14 16:45:56 发布
最新推荐文章于 2024-05-14 16:45:56 发布
阅读量395 收藏 1
点赞数 1
分类专栏： 第8章 使用jQuery操作 DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41880408/article/details/81180202
版权

第4题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏推荐 </title>
    <style type="text/css" >
        *{
            margin:0px;
            padding:0px;
            font-size:12px;
        }
        #listbox{
            margin:10px;
            padding:15px;
            border:1px solid #CCCCCC;
            color:#0066FF;
        }
        dl{
            display:inline-block;
            margin:15px;
        }
        dd{
            font-size:14px;
            color:#663300;
        }

        dd a{
            text-decoration:none;
            font-size:14px;
            color:#FF3300;
        }
        dd a:hover{
            text-decoration:underline;
        }
        .clear{
            clear:both;
            height:0px;
        }
    </style>
</head>
<body>
<div id='listbox'>
    <dl>
        <dt><img src="images/p1.jpg" /></dt>
        <dd>街机三国</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <dl>
        <dt><img src="images/p2.jpg" /></dt>
        <dd>霸域</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <dl>
        <dt><img src="images/p3.jpg" /></dt>
        <dd>斗破乾坤</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <div class='clear'></div>
    <input type="button" value='新增游戏'  class='add'/>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(".add").click(function () {
        var num = Math.round(Math.random()*3)+1
        var newDl=$("<dl></dl>")
        var newDt = $("<dt><img src='images/p"+num+".jpg' /></dt>")
        if(num==1){
            var newDd = $("<dd>街机三国</dd>")
        }else if (num==2){
            var newDd = $("<dd>霸域</dd>")
        }else if (num==3){
            var newDd = $("<dd>斗破乾坤</dd>")
        }else {
            var newDd = $("<dd>大航海家OL</dd>")
        }
        var newDd2 = $("<dd><a class='del'>删除</a></dd>")
        $(newDl).append(newDt)
        $(newDl).append(newDd)
        $(newDl).append(newDd2)
        $(".clear").before(newDl)
        $(".del").click(function () {
            $(this).parent().parent().remove()
        })
    })
    $(".del").click(function () {
        $(this).parent().parent().remove()
    })
</script>
</body>
</html>

第5题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>男生地带 </title>
    <style type="text/css" >
        *{
            margin:0px;
            padding:0px;
            font-size:12px;
        }
        #boxlist{
            height:526px;
            width:996px;
            background:#fff url(img/bg.jpg) no-repeat 0px 0px;
        }
        .main{
            margin-left:278px;
            border:1px solid #CCC;
        }
        .box{
            width:168px;
            padding:23px 5px;
            border-right:1px solid #CCC;
            border-bottom:1px solid #CCC;
            float:left;
            cursor:pointer;
        }
        .transparent_class{
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
            filter:alpha(opacity=60);
            opacity:0.6;
        }

    </style>
</head>
<body>
<div id='boxlist'>
    <div style='height:43px;' ></div>
    <div class='main'>
        <div class='box'>
            <dl>
                <dt><img src='img/p1.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='img/p1.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='images/p2.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='images/p3.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='images/p4.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='images/p4.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='images/p2.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='images/p1.gif' /></dt>
                <dd>
                    简约色彩系列带低帮帆布鞋12 黑色
                    <s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div style='clear:both;'></div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(".box").mouseover(function () {
        $(this).css("opacity","0.6")
    })
    $(".box").mouseout(function () {
        $(this).css("opacity","1")
    })
</script>
</body>
</html>
华少666
关注
专栏目录
第八章 使用jQuery操作DOM
JiangMye的博客
07-24 2096
1，增加游戏 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;增加游戏&lt;/title&gt; &lt;style&gt; *{ mar
第八章：使用jQuery操作DOM ——课后作业：
gz98411的博客
07-24 8229
1.新增游戏列表 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &
第八章——课后作业
qq_41882685的博客
07-25 715
1.删除增加游戏 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &gt; *{
使用jQuery高效制作网页特效 第八章习题
wsbbdbjay的博客
07-24 3973
1 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &gt;
jQuery游戏节点的动态新增和删除的实现
张晨光老师的播客
05-08 2351
第一步：页面的结构剖析 <!-- 页面结构，最外层的是一个div.盒子容器； 3个单独的dl,带有项目和描述的描述列表 dl的结构：包括一个dt（标题）若干个dd描述； 两个目标： 第一个：删除功能；删除游戏本身； 第二个：新增游戏;新增的是一个dl节点,包含了若干的html代码。 --> <div id='listbox'> <dl>...
html第八章课后作业京东轮播,仿京东js轮播图
weixin_36455001的博客
06-28 261
var aArr = document.getElementsByTagName("a");var liArr = document.getElementsByTagName("li");var spArr = document.getElementsByTagName("span");var box = document.getElementById("box");var count = 0;s...
第八章课后作业
m0_74842305的博客
05-14 257
本节以简单留言板为例，介绍项目的开发过程及代码实现.应用配置小程序代码实现的第一步是设置整个应用的配置，修改app.json,如下首页实现留言内容的显示、添加、修改、获取、添加。index.wxml代码如下index.css代码如下。
html第八章课后作业京东轮播,京东轮播图.html
weixin_36475420的博客
06-28 529
Title*{margin: 0;padding: 0;list-style: none;}#all{height: 340px;width: 790px;margin: 100px auto;position: relative;}#all li{display: none;position: absolute;}#all li:first-child{display: block;}#litt...
第八章课后作业题序号1
08-08
课后作业题序号通常涉及具体的数学问题、编程练习或者理论概念，但没有详细的问题文本，我无法展开详细的解答。如果能提供每个题目的具体内容或者相关章节的学习主题，比如涉及到的数据结构、编程语言、操作系统原理...
数字图像处理第8章课后作业答案
04-26
### 数字图像处理第八章课后习题解析 #### 题目背景 在数字图像处理领域，《数字图像处理》一书（冈萨雷斯版）是该领域的经典教材之一，深受广大师生的喜爱与推崇。本篇文章将针对该书中第八章的部分课后习题进行...
微机原理与接口技术第三章课后作业答案PPT课件.ppt
11-11
微机原理与接口技术第三章课后作业答案PPT课件 本文档对微机原理与接口技术第三章课后作业答案进行了详细的解释和分析，涵盖了寻址方式、指令系统、寄存器寻址、基址变址寻址、立即寻址、寄存器间接寻址、基址变址...
HTML5和CSS3开发第八章课后作业
suixinCaesar的博客
06-26 3243
3.制作SHOP今日推荐&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;style&gt; li{
基于java网上球鞋竞拍系统设计与实现.docx
09-19
基于java网上球鞋竞拍系统设计与实现.docx
基于bert实现关系三元组抽取python源码+数据集+项目说明.zip
最新发布
09-19
基于bert实现关系三元组抽取python源码+数据集+项目说明.zip基于bert实现关系三元组抽取python源码+数据集+项目说明.zip基于bert实现关系三元组抽取python源码+数据集+项目说明.zip基于bert实现关系三元组抽取python源码+数据集+项目说明.zip基于bert实现关系三元组抽取python源码+数据集+项目说明.zip 个人大四的毕业设计、课程设计、作业、经导师指导并认可通过的高分设计项目，评审平均分达96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 [资源说明] 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），供学习参考。
基于java的足球赛会管理系统设计与实现.docx
09-19
基于java的足球赛会管理系统设计与实现.docx
基于java的婚纱摄影网的设计与实现.docx
09-19
基于java的婚纱摄影网的设计与实现.docx
基于安卓的美颜相机，可以通过opencv加滤镜，并调整亮度和对比度，可以磨皮，但并不能瘦脸，磨皮时非常卡顿，暂无解决方法.zip
09-19
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用
基于java的农产品仓库管理系统系统设计与实现.docx
09-19
基于java的农产品仓库管理系统系统设计与实现.docx
基于Java swing +mysql(Oracle)实现的飞机订票系统项目（含毕业论文+答辩 ppt+双数据库版本源码+图）
09-19
【作品名称】：基于Java swing +mysql(Oracle)实现的飞机订票系统项目（含毕业论文+答辩 ppt+双数据库版本源码） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 系统功能需求 本系统用于远程机票预订，包括远程航班信息查询、机票预订与确认等；主要分为四大功能：查询、订票、退票和管理。 管理员登录、注销 到系统并进行插入、删除、更新以及查看机票后台数据库操作 插入：机票的插入可以按照航班号、班期、公司、座位号、起飞地以及抵达地等等插入数据库。 删除：机票可以按照航班号、起止城市、星期进行删除 3.1.1客户端系统功能 1.普通用户： 查询：根据航班号、航空公司以及目的地查询出票类信息 订票： 根据出发日期和第一航班号预订机票，机票类型分为单 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。不一定能够满足所有人的需求，需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
微机原理与接口技术：第4章汇编作业答案详解
微机原理与接口技术第4章主要关注汇编语言程序设计的相关知识点。本章内容涵盖以下几个部分： 1. 数据定义与存储：通过DB、DW和DD伪指令，学习如何在连续的8个存储单元中存放特定的十六进制数据。例如，DB指令用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值