第八章 使用jQuery操作DOM

最新推荐文章于 2021-11-19 13:54:37 发布
最新推荐文章于 2021-11-19 13:54:37 发布
阅读量2k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangMye/article/details/81179330
版权

1，增加游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加游戏</title>
    <style>
        *{
            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 src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var img=new Array("p1.jpg","p2.jpg","p3.jpg","p4.jpg");
        var name=new Array("街机三国","霸域","斗破乾坤","大航海家OL");
      $(".add").click(function () {

          var num=Math.floor(Math.random()*4);
          var deo="<dl><dt><img src=images/"+img[num] +"></dt><dd>"+name[num]+"</dd><dd><a class='del' href='javascript:void(0);'>删除</a></dd></dl>"
            $(deo).insertBefore(".clear");
            $(".del").click(function () {
                $(this).parent().parent().remove();
            })
      })
        $(".del").click(function () {
            $(this).parent().parent().remove();
        })
        })
</script>
</body>
</html>

2，男生地带

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>男生地带</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            font-size:12px;
        }
        #boxlist{
            height:526px;
            width:996px;
            background:#fff url(images/bg1.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>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("img").mouseover(function () {
            $(this).addClass("transparent_class")
    })
        $("img").mouseout(function () {
            $(this).removeClass("transparent_class");
        })
    })
</script>
</body>
</html>

 

JiangMye
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第八章：使用jQuery操作DOM ——课后作业：
gz98411的博客
07-24 8202
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" &
jQuery基础教程第八章学习
u012248889的专栏
11-06 682
构建功能型表单 刚开始看代码就发现了一个从来没见过的标签，，这个标签是专门用来修饰表单元素的，当表单在这个标签里面时，浏览器就会以特殊的方式来显示它们，它们可能有特殊的边界之类的。 .end()方法，将当前状态向后退一步，返回最后一个遍历方法执行之前的那一组元素，用于平时扩展连缀的灵活度，同时也减少选择器的使用。 .replace()方法的正则表达式：例，/^\((.+)\)
第八章 JQuery操作DOM
weixin_30832983的博客
06-19 368
一.jQuery操作样式 /* 单个样式 */$("li:first").css("color","#009933");/* 多个样式 */$("li:eq(1)").css({"color":"#FFFF00","background":"#FFCCCC"});/* 添加样式，引用style的.xxxxx */$("li:eq(2)").addClass("lis")...
第八章 使用jQuery操作DOM
weixin_30347009的博客
06-18 158
DOM操作： 　　jQuery中提供了一系列操作DOM强有力的方法，它们不仅简化了传统JavaScript操作DOM时繁冗的代码，更加解决了令开发者苦不堪言的跨平台浏览器的兼容。 　　它还让有页面元素真正动起来，动态的增减修改数据，令用户与计算机交互更加便捷，交互形式更加多样。 JavaScript操作DOM时分类： 　　　　　　　　　　DOM Core(核心) 　　　　　　　　　　HT...
用jQuery操作DOM
wdnmdq_66的博客
11-19 76
第八章：使用jQuery操作DOM jQuery对javascript中的DOM操作进行封装jQuery中的DOM操作 1：样式操作 2：内容及value的操作 3：节点操作 4：节点属性操作 5：节点便利 6：css Dom操作 样式操作 设置单个样式css: .css("属性名称","属性值") 设置多个样式css: .css({"属性名称1":"属性值1","属性名称2":"属性值2"}) 获取样式值: .
jQuery 使用jQuery操作DOM
qq_36074088的博客
05-03 253
&lt;html&gt; &lt;head&gt; &lt;title&gt;day0100.html&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.11.1.js"&gt;&lt;/script&gt; &lt;script type="text/jav
JSPro08.rar使用jQuery快速高效制作网页交互特效第八章，上机+课后+上课实例代码
05-29
JSPro08.rar使用jQuery快速高效制作网页交互特效第八章，上机+课后+上课实例代码
jQuery中DOM树操作之复制元素的方法
10-24
在jQuery中，DOM树操作是页面动态更新和交互的核心部分，而复制元素是其中一个重要的功能。这篇文章主要讨论了如何在jQuery中复制DOM元素，并详细解释了`.clone()`方法的使用技巧。 首先，`.clone()`方法允许开发者...
第10章 jQuery的基本操作_jquery_
09-29
本章我们将深入探讨jQuery的基本操作，包括元素选取、属性操作、样式调整以及动画效果的实现。 1. **元素选取** jQuery提供了一系列方法来选取HTML元素，如`$()`函数，它是jQuery的核心，可以接受CSS选择器、HTML...
jQuery练习
03-20
1：导航菜单弹出二级菜单 博文链接：https://justsee.iteye.com/blog/798405
jQuery选择器上机练习题及答案.rar
12-02
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）查找id号为tigerLily的元素 （2）查找拥有类myList的元素 （3）查找所有的input元素 （4）查找所有img元素和tr元素 （5）查找id号为coffeePot和id号为someDiv的元素 （6）选择具有id属性的所有元素 （7）选择具有id属性的input元素 （8）选择其value属性等于A的元素 （9）选择其value属性等于A或等于C的元素 （10）选择其title属性值中含有dog的img元素 （11）选择其href属性值以http开头的a元素 （12）选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （13）选择元素li，该元素作为拥有myList类的ul元素的直接子元素 （14）选择id号为radioA的input元素后面的第一个input兄弟元素 （15）选择id号为radioA的input元素后面的所有input兄弟元素 （16）选择dom sample页面中第3个tr元素 （17）选择其type属性值checkbox且索引为偶数的input元素 （18）选择非最后一行的tr元素 （19）选择所有的checkbox元素 （20）选择所有被选中的表单元素 （21）选择含有1972的td元素 （22）选择包含有sapn元素的div元素 （23）选择表格中每行的第一个单元格和最后一个单元格 （24）选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面，该页面中内嵌有几个CSS类：.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）将拥有alt属性的倒数第二个图片元素应用yellow类 （2）将第一个checkbox表单元素应用.green样式 （3）求id值为checkbox3的元素在所有表单元素里的顺序号 （4）用一条链式语句完成：先对所有img元素应用seeThrough样式，再为所有img元素和tr元素应用yellow样式 （5）用filter方法实现：选择单元格内容为Java或Smalltalk的单元格 （6）取图片集中的第2,3,4张图片 （7）用has方法实现:选择那些包含有ul元素的li元素 （8）将tbody每个单元格里的文字设为：我爱jQuery （9）查找form元素的后代元素中标签为label的元素 （10）查找表单元素中是否有id值为checkbox5的元素 提示： 为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
北大青鸟Javascript第8章在线培训作业参考
06-05
2.在给出的“贵美网站首页”中实现对相应的特效。 （1）带数字导航的横幅广告 （2）无缝垂直向上滚动特效 （3）漂浮广告 （4）设为首页，收藏本站（仅ie有效） （5）屏蔽鼠标右键
论坛发帖的实现
09-04
基于web的开发，结合jsp，功能已经基本实现，同学们可以拿去参考，是和初学者的
jQuery常见面试题之DOM操作详析
10-19
**jQuery DOM操作详解** 在JavaScript中，DOM（Document Object Model）是HTML和XML文档的结构化表示，jQuery库提供了一套简洁高效的API来操作DOM。本文将深入探讨jQuery中的常见DOM操作面试题，帮助理解其核心概念...
jQuery操作DOM解析
04-28
**jQuery操作DOM解析** 在Web开发中，DOM（Document Object Model）是HTML或XML文档的结构化表示，它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作，提供了丰富的API来处理...
JQuery 常见DOM操作练习1
汉南最後の読書人
11-06 1888
1.管理选择器(size()方法)所得的结果 size()方法 <!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF0
第八章 上机2
qq_36074093的博客
11-20 1338
INSERT INTO Address_IS(Id,SName,Phone,Address,Email) SELECT GradeId,StudentName,Phone,Address,Email FROM Student SELECT Student.GradeId,StudentName,Phone,Address,Email INTO Address_SI FRO
JQuery 常见DOM操作练习2
汉南最後の読書人
11-06 642
1.插入元素节点 size()方法 <!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF00; margin
jQuery：DOM操作的简化函数库解析
"jQuery是一个由第三方开发的DOM操作函数库，它通过极简化的API使得JavaScript的DOM操作变得更加简便。jQuery并非最简单的解决方案，且主要适用于PC端项目，因此其使用逐渐减少。在PC端的许多框架如Bootstrap的底层...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值