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");
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章