Jquery 实现对DOM文档节点进行操作

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jqueryjquery.js"></script>
</head>
<body>
    <h1>选择你的爱好</h1>
    <input type="checkbox" value="唱歌">唱歌
    <input type="checkbox" value="跳舞">跳舞
    <input type="checkbox" value="听歌">听歌
    <input type="checkbox" value="看电影">看电影
    <hr>
    <input type="button" value="显示图片路径"><br>
    <input type="button" value="显示爱好"><br>
    <input type="button" value="改变图片"><br>
    <input type="button" value="增加图片"><br>
    <input type="button" value="删除图片"><br>
    <div>
        <img id="x" src="img/img1.jpg" alt="" srcset="">
       
    </div>

    <script>
        $(function(){
            $("[value*='路径']").click(function(){
                // alert($("#x").prop("src")); //完整路径
                alert($("#x").attr("src"));//写入img路径
            })

            $("[value*='改变']").click(function(){
                $("#x").attr("src","img/img2.jpg"); //改变图片
                alert($("#x").attr("src"));//写入img路径（改变图片后的路径）
                //改变多个值
                // $("#x").attr({
                //     "src":"img/img2.jpg",
                //     "title":"DOM练习"
                // })
                
            })

            $("[value*='显示']").click(function(){
                var str=""//初始化
                $("[type='checkbox']:checked").each(function(){
                    str=str+$(this).val()+"
";
                })
                alert(str);
            })

            $("[value*='增加']").click(function(){
                $("#x").before($("<img src='img1.jpg'>"));
                $("#x").before($("<img src='img/img2.jpg' class='y'>"));
                // var $newNode=$("<span>img/img3.jpg</span>")
                // // $("#x").attr("src","img/img3.jpg"); //改变图片
                // $("#x").before($newNode);//前
                // $("#x").after($newNode);//后
            })

            $("[value*='删除']").click(function(){
                // $("#x").remove();//删除
                // $(".y:eq(0)").remove();//删除
                // $("hr:last").before("#x");
                var $new = $(".y:last").detach();//删除
                $("input:eq(0)").before($new);

            })
        })
    </script>



</body>
</html>
Jquery 实现对DOM文档节点进行操作

编写代码

运行结果
