JS 和JQ之間的關聯，轉換，區別等

一、JS和jQuery加載模式的對比

1. 運行時機：
   window.onload: 頁面中DOM元素加載完畢，且圖片或者其他外部文件等都加載完畢才執行。
   $(document).ready: 頁面中DOM元素加載完畢就執行，但不會等到圖片或者其他外部文件加載完畢就會執行。
2. 編寫個數：
   window.onload: 同一頁面只能編寫一個。結果只能輸出一次。
   $(document).ready: 同一頁面能編寫多個。按順序執行。
3. 簡化代碼：
   window.onload: 無
   $(document).ready: $(function(){});

二、JS和querySelectorAll 獲取DOM的區別

1.類數組

querySelectorAll()獲取到的是NodeList類數組
getElementsByClassName()獲取到的是HTMLCollection類數組

2.獲取內容

querySelectorAll()只能獲取已經創建好的dom元素，而getElementsByClassName()能過去到之後新添加的dom元素。
例如：頁面有5個class=‘box’的div

//獲取class=‘box’的div
var s1 = document.querySelectorAll('.box2');
var s2 = document.getElementsByClassName('box2');
//新增.box元素
var a = document.createElement('div');
a.className = 'box2';
a.innerHTML = 'test';
document.body.appendChild(a);
//分別輸出div.box的個數
console.log(s1.length);  // 5
console.log(s2.length);  // 6

可以看到，querySelectorAll()獲取到5個，而getElementsByClassName()獲取到6個。

三、 jQuery對象和原生JS的dom對象轉換

JQ對象轉原生JS dom對象

   方法一 [index]
   var $as = $('.box')[0];  // 得到索引爲0的dom對象

   方法二 get(index)
   var $bs = $('.box').get(0);  // 得到單個dom對象
   var $cs = $('.box').get();  // 將集合中所有dom對象形成一個數組

原生JS dom對象轉JQ對象

   var d = document.getElementById("box1");  // 先得到要轉換的dom對象
   var $d = $(d);  // 再轉換成JQ對象

四、jQuery中each和原生JS的each有什麼不同?

JS：arr.forEach()

第一個參數：遍歷到的元素
第二個參數：當前遍歷到的索引
注意：原生的forEach方法只能遍歷數組，不能遍歷僞/類數組

var arr = [1,2，3,4，5];
arr.forEach(function(value, index)){
	console.log(index, value);
};

JQ：$.each()

第一個參數：當前遍歷到的索引
第二個參數：遍歷到的元素
注意：jQuery的each方法是可以遍歷僞數組的

var obj = {1:1, 2:3, 3:5, 4:7, 5:9};
$.each(obj, function(index, value)){
	console.log(index, value);  // 可以遍歷
};