jQuery里面的addClass讲解

先来举个简单的简单的nav里面常用的鼠标经过小例子！这个是在body里面写的

    <ul>
        <li class="li1">1</li>
        <li class="li1">2</li>
        <li class="li1">3</li>
        <li class="li1">4</li>
        <li class="li1">5</li>
    </ul>

接下下来在css里面写下它的样式

 1         *{
 2             margin: 0;
 3             padding: 0;
 4         }
 5         ul{
 6             width: 1000px;
 7             height: 200px;
 8             margin: 0 auto;
 9         }
10         .li1{
11             width: 200px;
12             height: 200px;
13             background-color: #FC0BF5;
14             float: left;
15             text-align: center;
16             line-height: 200px;
17             font-size: 50px;
18             list-style: none;
19         }
20         .li2{
21             width: 200px;
22             height: 200px;
23             background-color: #17FE03;
24         }
25         .lili{
26             width: 200px;
27             height: 200px;
28             background-color: #17FE03;
29         }

里面有2个空的class属性

现在的页面是这样的

现在让我们通过addClass里给他们加上这个效果

<script type="text/javascript">
        $(".li1").eq(0).addClass("lili")
     
        $(".li1").mouseenter(function () {
            $(this).addClass("li2")
        }).mouseleave(function () {
            $(this).removeClass("li2")
        })

    </script>

这就是鼠标移上去的效果 这个第一个块是绿色是因为$(".li1").eq(0).addClass("lili") 我们给了他个默认样式！

现在通过以上的JS代码可以实现鼠标移上去就会给这个li加上你想加的属性，当我鼠标滑过的话就会加上这个属性 鼠标离开就会{removeClass("li2")}，清楚这个属性！要注意的是我上面的是在加载了jQuery的这个插件才可以的！

第一次发！希望大家多多批评指教！

转载于:https://www.cnblogs.com/slhdry/p/5917253.html