使用jQuery快速高效制作网页交互特效第八章 使用jQuery操作DOM 课后作业

最新推荐文章于 2024-06-26 10:23:17 发布
最新推荐文章于 2024-06-26 10:23:17 发布
阅读量473 收藏 2
点赞数 2
文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq2104418373/article/details/118355020
版权

课后作业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:block;

    float:left; 

    margin:15px;

}

dd{

    font-size:14px;

    color:#0066ff; 

}



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>



</body>

<script src="js/jquery.min.js"></script>

<script>

    $(function(){

        //删除事件

        $("#listbox .del").live("click",function(){

            var index = $(".del").index(this);

            $("dl:eq("+index+")").remove();

        });

        //新增游戏点击事件

        $(".add").live("click",function(){

            var $dl = $("<dl><dt><img src='images/p4.jpg' /></dt><dd>大航海家OL</dd><dd><a class='del' href='javascript:void(0);'>删除</a></dd></dl>");

            $("#listbox dl:last").after($dl);

        })

    })

</script>

</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(images/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='images/p1.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 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>



</body>

<script src="js/jquery.min.js"></script>

<script>

    $(function(){

        //鼠标移入事件

        $(".box img").hover(function(){

               //添加class开关

            $(this).toggleClass("transparent_class");

        })

    })

</script>

</html>

Andy丶小海
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSPro08.rar使用jQuery快速高效制作网页交互特效第八章，上机+课后+上课实例代码
05-29
JSPro08.rar使用jQuery快速高效制作网页交互特效第八章，上机+课后+上课实例代码
S2 使用jQuery快速高效制作网页交互特效 第八章 使用jQuery操作DOM 知识点
weixin_44269168的博客
07-10 726
8.1 DOM操作 8.1.1 DOM操作分类 JS操作分为三类—DOM Core(核心)、HTML—DOM和CSS—DOM 8.2 样式操作 设置和获取样式值 设置样式： 语法格式：$(selector).css(name,value) //设置单个属性 KaTeX parse error: Expected 'EOF', got '#' at position 191: …可以是...
web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
最新发布
VX_WJ88950106的博客
06-26 749
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
第8章课后作业
华少的博客
04-08 631
第1题   图形打印import java.util.Scanner;public class HomeWork8_2 { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.print("请输入行数:"); int rows = input.nextInt()...
第八章课后作业
Liyiming85的博客
04-08 356
import java.util.Scanner;public class xuexiao { public static void main(String[] args) { Scanner s=new Scanner(System.in); System.out.println("请输入你想输出的菱形行数,请输入奇数行"); int n=s.nextInt(); int n1=n/2+1;  ...
js-day06-jQuery事件和DOM操作-练习题
01-19 225
jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. 　　<button onclick="alert(1);">点我</button>方式2:获取元素对象,再设置onXxx事件属性. 　　<button id="btn">点我</button&...
ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第三章
03-03
总之，"ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第三章"是一门全面介绍jQuery交互特效的课程，无论你是初学者还是有一定经验的开发者，都能从中受益匪浅。通过学习，你将能够熟练运用jQuery，为你的网页...
ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第八章
03-03
总之，"ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第八章"是一门全面介绍jQuery的课程，涵盖了DOM操作、事件处理、动画效果以及Ajax交互等关键内容。通过系统学习和实践，学员将能够利用jQuery创建出富有吸引...
ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第十章
03-03
在本课程"ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第十章"中，我们将深入探讨如何使用jQuery这一强大的JavaScript库来为网页增添丰富的交互性和动态效果。jQuery以其简洁的API和广泛的社区支持，成为了前端...
ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第七章
03-03
在本课程"ACCP 8.0\S2\使用jQuery快速高效制作网页交互特效 第七章"中，我们将深入探讨如何使用jQuery库来创建引人入胜、响应式的网页交互效果。jQuery是一款强大的JavaScript库，它简化了JavaScript的许多复杂操作...
ACCP8.0S2的使用jQuery快速高效制作网页交互特效
02-27
北大青鸟ACCP8.0S2的使用jQuery快速高效制作网页交互特效完整版，请下载
使用jQuery快速高效制作网页交互特效教程
02-25
使用jQuery快速高效制作网页交互特效教程，比较详细的教程
基于Jquery的网站设计
12-27
该部分内容是本作者基于Jquery和Bootstrap制作的课程设计，内容包括五个页面和相关的JS代码。
jquery经典教程第八章节
06-11
jquery经典教程第八章节jquery经典教程第八章节jquery经典教程第八章节jquery经典教程第八章节jquery经典教程第八章节jquery经典教程第八章节jquery经典教程第八章节
北大青鸟ACCP8.0使用jQuery快速高效的制作网页交互特效 第七章 上机+课后+上课实例代码
05-29
北大青鸟ACCP8.0使用jQuery快速高效的制作网页交互特效 第七章 上机+课后+上课实例代码
web网页基础设计大作业 html+css+纯jquery
01-04
网页基础设计大作业 欢迎共享，讨论
第八章——课后作业
qq_41882685的博客
07-25 712
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】第六课——使用jQuery操作DOM对象
王迪
09-22 755
知识点：会用jQuery操作CSS样式、会用jQuery操作文本与属性值内容、会用jQuery操作DOM节点、会用jQuery遍历DOM节点、会用jQuery操作CSS-DOM。 1、DOM操作 DOM 为文档提供了一种结构化的表示方式，通过操作 DOM 可以改变文档（如 HTML、XML 等）的内容和展现形式。在实际运用中，DOM 更像是一座桥梁，通过它可以实现跨平台、...
使用jquery快速高效制作网页交互特效
06-28
使用jQuery可以快速高效地制作网页交互特效。jQuery是一个流行的JavaScript库，它提供了许多方便的方法和函数，可以轻松地操作HTML元素、CSS样式和事件处理等。通过使用jQuery，可以快速实现各种动态效果，如滑动、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值