JS——jquery的事件案例

最新推荐文章于 2024-07-30 03:35:05 发布

SSSkyCong

最新推荐文章于 2024-07-30 03:35:05 发布

阅读量291

点赞数

分类专栏： Js H5 学习-总结-转载

本文链接：https://blog.csdn.net/qlwangcong518/article/details/86537817

版权

学习-总结-转载同时被 3 个专栏收录

136 篇文章 0 订阅

订阅专栏

127 篇文章 2 订阅

订阅专栏

111 篇文章 1 订阅

订阅专栏

描述：

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>