第一篇web学习文章-jQuery【案例-五星好评】

王~~~

已于 2022-08-02 18:32:11 修改

阅读量237

点赞数

分类专栏： web前端全栈学习文章标签：前端学习 jquery

于 2022-08-02 17:10:47 首次发布

本文链接：https://blog.csdn.net/weixin_59445620/article/details/126126077

版权

jQuery 交互效果五星好评鼠标事件 CSS样式

关键词由CSDN通过智能技术生成

web前端全栈学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

没有正经的写过文章，第一次写，如有错误请斧正。

本次主要是练习了jQuery的简单用法，刚开始学习使用。不多废话了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五星好评</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 100px auto 0;
            width: 310px;
            height: 40px;
        }

        .dd {
            margin-top: 0;
            padding-left: 10px;
            width: 300px;
        }

        p {
            width: 36px;
            height: 36px;
            border-radius: 36px;
            border: 2px solid red;
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }

        .dd p {
            width: 20px;
            height: 20px;
            border-radius: 20px;
            margin: 10px 30px 10px 0;
            border: none;
        }

        span {
            float: left;
            margin-left: 20px;
            width: 36px;
            height: 36px;
            border: 2px solid #0627c6;
            text-align: center;
            color: #c91818;
            line-height: 36px;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
             //1.给p 注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
            $(".comment>p").on("mouseenter", function () {
                //判断有没有dianJi这个添加的标识，第一次进入的时候没有之后，有标识后进入执行else
                if ($(this).attr("class") != "dianJi") {
                    $(this).css("backgroundColor", "red");
                    $(this).prevAll().css("backgroundColor", "red");
                    $(this).nextAll().css("backgroundColor", "");

                } else {
                    $(this).css("backgroundColor", "red");
                    if ($(this).index() + 1 == $("span").text()) {
                        $(this).nextAll().css("backgroundColor", "");
                    }

                }

            });
            //3. 给comment注册鼠标离开事件
            // 两种情况：
            //  1、没单击离开，则让所有的p都变成空心
            //  2、单击离开了，则单击的p与前边的p需要变实心
            $(".comment").on("mouseleave", function () {
            //  1、让所有的p都变成空心
                $(this).children().css("backgroundColor", "");
            //再做一件事件，找到dianJi，让dianJi变成实心就行。
                $("p.dianJi").css("backgroundColor", "red").prevAll().css("backgroundColor", "red");
            });
            //2. 给p注册点击事件
            $(".comment>p").on("click", function () {
            // 当一个p被单击时，需要添加一个dianJi类标识自己是被单击的，
            // 前面的兄弟也被标记，后面的其它的兄弟要删除此类。
                $(this).addClass("dianJi").css("backgroundColor", "red").prevAll().addClass("dianJi").css("backgroundColor", "red");
                $(this).nextAll().removeClass("dianJi").css("backgroundColor", "");

                //后面方框中的值
                $("span").text($(this).attr("class", "dianJi").index() + 1);
                //下面的跟随点
                $(".dd>p").eq($(this).index()).css("backgroundColor", "red").prevAll().css("backgroundColor", "");
                $(".dd>p").eq($(this).index()).nextAll().css("backgroundColor", "");
            });

        });
    </script>
</head>
<body>
<div class="comment">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <span></span>
</div>
<div class="dd">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
</body>
</html>

运行效果如下：