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里面写下它的样式

        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 1000px;
            height: 200px;
            margin: 0 auto;
        }
        .li1{
            width: 200px;
            height: 200px;
            background-color: #FC0BF5;
            float: left;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            list-style: none;
        }
        .li2{
            width: 200px;
            height: 200px;
            background-color: #17FE03;
        }
        .lili{
            width: 200px;
            height: 200px;
            background-color: #17FE03;
        }

里面有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的这个插件才可以的！

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