关于jQuery中attr方法无效的问题

Question

关于jQuery中attr方法无效的问题

代码如下：

        <script src="./Jquery/jquery-3.6.1.min.js"></script>
        <script>
            $("div").on("click",(e)=>{
                $("div").attr("left","100px");
                $("div").attr("top","100px");
                // $("div").attr({
                //     left:"100px",
                //     top:"100px"
                // });
                // $("div").css("left","100px");
                // $("div").css("top","100px");
            })
        </script>

div {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 100px;
                height: 100px;
                background-color: aquamarine;
            }

运行结果及报错内容 ：
无报错，但是这里无法使用jQuery对象的attr方法更改div属性

我的解答思路和尝试过的方法 ：
jQuery的CSS方法可以成功更改这个div的left和top的值，利用原生JS也ok，但是使用这个attr方法就不行。
在网上查找了一下attr方法的语法好像也没什么问题。
然后试了一下prop方法也不行。
现在就挺迷惑的。CSS中也有个div设置定位

Answer 1

$("div").attr 这个值针对标签的属性才能用
如果你要用这个
那就得是这样了

$("div").attr("style","left:100px;top:100px;")

但是这样做会有一个问题，就是如果本身style属性还有其他的样式就会没有了哦
否则就只能用

$("div").css("left","100px");
$("div").css("top","100px");