jQuery學習筆記(2)——jQuery物件 & 靜態物件和例項物件 & each()方法
阿新 • • 發佈：2018-12-21
四、jQuery物件——偽陣列
當我們呼叫jQuery核心函式時，無論傳入的引數是函式、字串或DOM元素，最終都會返回一個jQuery物件。
jQuery物件可以看作是一個“偽陣列”。所謂“偽陣列”，就是像陣列一樣含有"length"屬性，並且含有索引從0到length-1的子項。
如下所示，建立三個div元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.4.js"></script> <script> $(function(){ var $div = $("div"); console.log($div); }) </script> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
F12進入控制檯檢視，如下圖所示。 返回的jQuery物件中包括索引0到2的3個div元素，並且含有值為3的length屬性。是不是和陣列很相似？
五、靜態方法和例項方法
-
靜態方法 jQuery中的靜態方法就是直接新增給類的方法，靜態方法必須通過類名呼叫。
<script> //定義一個類 function ClassA(){ } //給類ClassA新增一個靜態方法 ClassA.staticMethod = function(){ alert("這是一個靜態方法"); } //通過類名呼叫靜態方法 ClassA.staticMethod(); </script> -
例項方法 jQuery中的例項方法是新增給類的原型的方法，例項方法必須通過類的例項呼叫。
<script> //定義一個類 function ClassA(){ } //給類ClassA的原型新增一個例項方法 ClassA.prototype.instanceMethod = function(){ alert("這是一個例項方法"); } //建立一個例項(建立一個物件) var a = new ClassA(); //通過例項呼叫例項方法 a.instanceMethod(); </script>
六、each方法——與原生js中forEach()方法的區別
-
原生js中的forEach()方法
<script> //定義一個數組 var arr = [1,3,5,7,9]; //遍歷列印陣列（注意傳參順序） //第一個引數：遍歷到的元素 //第二個引數：遍歷到的索引 arr.forEach(function(value,index) { console.log(index,value); }); </script>開啟瀏覽器F12檢視控制檯，如下圖所示，左邊為陣列中的索引，右邊為陣列中各個元素的值。
注意： 原生js中的forEach()方法只能遍歷陣列，不能遍歷“偽陣列”。
<script> //定義一個“偽陣列”（物件） var obj = {0:1,1:3,2:5,3:7,4:9}; //遍歷列印“偽陣列” obj.forEach(function(value,index) { console.log(index,value); }); </script>開啟瀏覽器F12檢視控制檯，如下圖所示，控制檯會返回報錯資訊，表示沒有這個方法。
-
jQuery中的each()方法 使用jQuery中的each()靜態方法遍歷陣列
<script> //定義一個數組 var arr = [1,3,5,7,9]; //遍歷列印陣列（注意傳參順序） //第一個引數：遍歷到的索引 //第二個引數：遍歷到的元素 $.each(arr,function(index,value){ console.log(index,value); }) </script>開啟瀏覽器F12檢視控制檯，如下圖所示，左邊為陣列中的索引，右邊為陣列中各個元素的值。
那麼，jQuery中的each()方法能不能遍歷“偽陣列”呢？
<script> //定義一個“偽陣列”（物件） var obj = {0:1,1:3,2:5,3:7,4:9}; //遍歷列印“偽陣列”（物件） //第一個引數：遍歷到的索引 //第二個引數：遍歷到的元素 $.each(obj,function(index,value){ console.log(index,value); }) </script>開啟瀏覽器F12檢視控制檯，如下圖所示，左邊為陣列中的索引，右邊為陣列中各個元素的值。
結論： jQuery中的each()方法，不僅能夠遍歷陣列，同時也能夠遍歷“偽陣列”（即物件）。