eq()函数的两种写法的区别

不同eq()函数的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>操作样式</title>
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
        <style>
            .newStyle1{
                font-family: "微软雅黑";
                font-size: 14px;
                background-color: #4169E1;
                /*list-style: none;*/
            }
            .liStyle{
                list-style:none;
                background-color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="liStyle">我是li元素</li>
            <li class="liStyle">我是li元素</li>
            <li class="liStyle">我是li元素</li>
            <li>我是li元素</li>
            <li >我是li元素</li>
            <li>我是li元素</li>
        </ul>
        <button id="change">切换样式</button>
        <script type="text/javascript">
            $(document).ready(function (){
                var index = 1;
                $("li").addClass("newStyle1");
//              1.移除样式使用  .eq()方法获取元素移除他的类
//              $("li").eq(1).removeClass("liStyle");

//              2.移除样式使用  :eq()方法获取元素移除他的类,要注意的是,如果:eq()里面的是变量,不能:eq(index);这样使用,因为他会把它当做字符串
                $("li:eq("+ index +")").removeClass("liStyle");
            });
            $("#change").click(function (){
                $("li").toggleClass("liStyle");
            });
        </script>
    </body>
</html>

1.移除样式使用 .eq()方法获取元素移除他的类,使用.eq()方法,里面放变量或者是数字都可以,相比较而言,更方便一些。

var index = 3;
$("li").eq(index).removeClass("liStyle");

$("li").eq(1).removeClass("liStyle");

2.移除样式使用 :eq()方法获取元素移除他的类,要注意的是,如果:eq()里面的是变量,不能:eq(index);这样使用,因为他会把它当做字符串

使用方法:


$("li:eq("+ index +")").removeClass("liStyle");
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章