JS——jquery的事件案例

版权声明:进击的葱 https://blog.csdn.net/qlwangcong518/article/details/86537817

描述:

jquery的dom操作,实现事件

效果:

点击后其他不变化,点击的变化

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<script>
    var bur=$("<li></li>")
        .width(36)
        .height(36)
        .css("border","1px solid #000000")
        .css("border-radius","36px")
        .css("border-radius-color","#000000")
        .css("float","left")
        .css("margin-left","5px")
        .on("click",function () {
            $(this).css("background-color","rgba(255,0,0,0.5)")
            $(this).siblings().css("background-color","rgba(255,0,0,0)")
        });
    
    for (var i=0;i<5;i++)
    $("body").append($(bur).clone(true));

    $("li").wrapAll($("<ul></ul>"));
    $("ul").css("list-style","none");

</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qlwangcong518/article/details/86537817