jQuery操作dom对象小练习

最新推荐文章于 2022-09-19 19:43:35 发布

原创最新推荐文章于 2022-09-19 19:43:35 发布 · 221 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

这篇博客介绍了使用jQuery进行DOM操作的实战技巧，包括点击事件响应下实现图片更换、添加配置项及元素克隆等功能。通过示例代码详细解析了每个操作的实现过程。

1.点击添加一张新图实现换图如下

2.实现点击添加配置如下

3.实现点击克隆如下

实现代码如下：


<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>手机详情页-节点属性操作</title>
    <script src="../jquery.js"></script>
    <style type="text/css">
        body,
        input,
        div,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 25px;
        }

        .content {
            width: 600px;
            margin: 30px auto;
        }

        .content img {
            float: left;
            width: 180px;
        }

        .r {
            float: right;
            width: 400px;
        }

        input[name="changephone"] {
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }

        input[name="size"] {
            width: 50px;
            margin: 0 5px;
            text-align: center;
        }

        #replace {
            border: 1px solid rgb(179, 179, 179);
            height: 60px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
<div class="content">
    <img src="../img/pro1.jpg" alt="1+8Plus" id="phoneimg" />
    <div class="r">
        产品名称：
        <span id="phone">1+8 Plus</span> <br>
        <input name="changephone" value="添加一张新的手机图片" type="button" onclick="addImage();" />
        <input name="changephone" type="button" value="添加手机配置" onclick="addPhoneInfo()" />
        <input name="changephone" type="button" value="克隆手机图片" onclick="clonePhoneImg()" /><br>
        规格选择：
        <div id="info">
            <input name="size" type="text" value="64G" />
            <input name="size" type="text" value="128G" />
            <input name="size" type="text" value="256G" />
            <input name="size" type="text" value="512G" /><br/>
        </div>
        <p id="replace">Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待 活动页限量</p>
    </div>
</div>


</body>
<script type="text/javascript">
    function addImage() {
        $('#phoneimg').attr('src','../img/pro2.jpg');
    }

    function addPhoneInfo() {
        var node=$("<input name=\"size\" type=\"text\" value=\"1TB\"/>")
        $("#info").append(node)
    }
    function clonePhoneImg() {
    var node=$("#phoneimg").clone(true);
   $(".content").append(node)
    }
</script>

</html>