sos:JavaScript，jQuery代码设计

绘制一个正方形,宽和高的尺寸分别为100px，,正方形的背景色为红色,正方形中的文字为hello，居中显示;点击按钮,让该正方形向右移动30px并且背景色变成粉色。 这个用JavaScript，jQuery怎么设计呀

望采纳


如果要实现正方形，并在点击按钮时让正方形向右移动 30px 并且背景色变成粉色，可以使用 JavaScript 或 jQuery 来实现。

JavaScript 的代码如下：

<div id="square" style="width: 100px; height: 100px; background-color: red; text-align: center;">
    hello
</div>
<button onclick="moveAndChange()">Click me</button>
<script>
    function moveAndChange() {
        // 获取正方形元素
        var square = document.getElementById("square");
        // 获取正方形当前的 left 属性值
        var left = parseInt(square.style.left);
        // 设置正方形的 left 属性值为当前值加上 30
        square.style.left = left + 30 + "px";
        // 设置正方形的背景色为粉色
        square.style.backgroundColor = "pink";
    }
</script>

上面的代码会在页面中创建一个正方形和一个按钮，点击按钮会触发 moveAndChange() 函数，该函数会获取正方形元素并修改它的 left 和 background-color 属性值，从而实现正方形向右移动和背景色变换的效果。


如果要使用 jQuery 来实现上述效果，可以在页面中引入 jQuery 库，然后使用 jQuery 的 "click" 和 "css" 方法来实现。例如：

<div id="square" style="width: 100px; height: 100px; background-color: red; text-align: center;">
    hello
</div>
<button id="btn">Click me</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    // 在页面加载完成后，绑定点击事件处理函数
    $(document).ready(function() {
        $("#btn").click(function() {
            // 获取正方形元素
            var square = $("#square");
            // 获取正方形当前的 left 属性值
            var left = parseInt(square.css("left"));
            // 设置正方形的 left 属性值为当前值加上 30
            square.css("left", left + 30);
            // 设置正方形的背景色为粉色
            square.css("background-color", "pink");
        });
    });
</script>

上面的代码与 JavaScript 的实现方式类似，只是使用了 jQuery 的方法来实现点击事件处理函数和修改元素属性值的操作。