JQuery中eq()和get()的區別


大家好,好久沒寫博客了,今天興致不錯,就來說說JQuery中eq()與get()方法的區別!

下來我們就開門見山吧,相信大家在工作中經常會用到這兩個方法吧,那么他們的區別是什么了?

眾所周知,eq()方法返回的是一個JQuery對象,也就是[object Object];

             get()方法返回的是DOM對象組成的數組,也就是[object HTMLLIElement];

我們用一個例子說明一下:

首先引入JQuery庫文件,

html

<body>
<ul id="ul">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
<input type="button" value="click" id="b1">
</body>

js

<script>
$("#b1").on("click",function(){
     var $obj  =  $("#ul li");
     $obj.eq(1).css("color","yellow");
     $obj.get(2).css("color","red");
})
</script>

此時,點擊按鈕第二個li,即item2字體變為黃色,但是item3沒有變為紅色,且報如下錯誤:

報錯的意思是,$obj沒有get()方法,因為它是一個DOM對象組成的數組,它是沒有get()方法,那么我們怎樣把它變為JQuery對象了?

只需將$obj.get(2)改為$($obj.get(2))即可,

<script>
$("#b1").on("click",function(){
     var $obj  =  $("#ul li");
     $obj.eq(1).css("color","yellow");
     $($obj.get(2)).css("color","red");
})
</script>

關於JQuery對象與DOM對象的轉換可以參考http://blog.csdn.net/jueshengtianya/article/details/8823091

再次點擊按鈕時,就會呈現如下的畫面:

驗證完畢,經過這個例子相信大家對於eq()與get()方法會有所了解了。

最后在來個擴展吧,還是基於上面的html

<script>
$("#b1").on("click",function(){
      var $obj = $("#ul li");
      var obj1 = $obj.get(1);
      var obj2 = $obj[1];
      if(obj2===obj1){
            alert(111);
        }else{
            alert(222);
        }
})
</script>

大家可以猜猜看,彈出那個了?

經過本人驗證彈出的是111,那么可以得出一個結論:$obj.get(1)和$obj[1],在這里可以互相替換使用。

以上是個人見解,有不到之處還望大家指正。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM