练习-节点移动

最新推荐文章于 2024-04-21 17:14:51 发布

奋斗中的切图猿

最新推荐文章于 2024-04-21 17:14:51 发布

阅读量99

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/weixin_44573096/article/details/108935583

版权

jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
        }
        .div1{
            background-color:red;
        }
        .div2{
            background-color:blue;
        }
        .div3{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <!-- 要求：做3个不同颜色的方块,鼠标移入第一个方块时,调换后两个方块的位置并让第二个div的内容变成第二个,点击时调换回来并让第三个div内容变成第三个 -->
    <!-- 解决办法：先看题目判断要控制的元素是哪个。然后得判断在移动元素的过程中返回的是哪个对象，即判断控制哪个元素是谁，就把谁放在前面 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(".div1").mouseover(function(){
            $(".div3").insertBefore($(".div2")).html("第二个")
        })
        $(".div1").click(function(){
            $(".div3").insertAfter($(".div2")).html("第三个");
        })
    </script>
</body>
</html>

奋斗中的切图猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习-节点移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ w
复制链接

扫一扫