jQuery图片的前添加和后追加

最新推荐文章于 2022-04-09 10:21:01 发布

西红柿炒番茄AB

最新推荐文章于 2022-04-09 10:21:01 发布

阅读量2.1k

点赞数 2

分类专栏：前端 jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/a_sid/article/details/53470915

版权

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文详细介绍了如何使用jQuery库在现有图片元素之前添加新的图片，以及如何在其后追加新的图片。通过实例代码展示了jQuery的高效和便利性，适合前端开发者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./jquery-2.2.4.min.js">
        </script>

        <style>
            #did {
                width: 400px;
                height: 300px;
                border: 1px solid #ddd;
            }

            #mid img {
                border: 2px solid #fff;
                margin: 5px;
            }

            #mid img:hover {
                border: 2px solid #f0c;
            }

            #mid img.hover {
                border: 2px solid red;
            }
        </style>
        <script type="text/javascript">
        $(function(){
            //获取每一张图片并设置点击事件
            $("#mid img").click(function(){
                //获取每一张图片并将类名去掉
                $("#mid img").removeClass("hover");
                //当点击一张图片的时候增加类名是hover
                $(this).addClass("hover");
            });

            //获取button并设置点击事件
            $("button").click(function(){

                //获取button的内容，并进行操作
                switch ($(this).html()){
                    case "前添加":
                    $("#mid img.hover").removeClass("hover").clone().prependTo("#did");
                        break;
                    case "后追加":
                    $("#mid img.hover").removeClass("hover").clone().appendTo("#did");
                        break;
                }


            });
        });
        </script>
    </head>

    <body>
        <h2 id="hid">jQuery实例--图片的前添加和后追加</h2>
        <div id="did"></div>
        <div id="mid">
            <img src="./images/11.jpg" width="70" />
            <img src="./images/22.jpg" width="70" />
            <img src="./images/33.jpg" width="70" />
            <img src="./images/44.jpg" width="70" />
        </div>
        <button>前添加</button>
        <button>后追加</button>
    </body>

</html>

这里写图片描述