JavaScript與jQuery的區別：

JavaScript：

javaScript的簡寫形式就是JS，一種廣泛用於客戶端Web開發的指令碼語言，常用來給HTML網頁新增動態功能（其編寫的程式可以被嵌入到HTML或XML頁面中，並直接在瀏覽器中解釋執行）。

• 組成部分：

核心（ECMAScript）、文件物件模型（Document Object Model，簡稱DOM）、瀏覽器物件模型（Browser Object Model，簡稱BOM）

jQuery：

jQuery是一個快速的，簡潔的javaScript庫，使使用者能更方便地處理HTML documents、events、實現動畫效果。

• 特點：

jQuery是當前很流行的一個JavaScript框架，使用類似於CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴充套件性，擁有不少外掛。

一、本質區別：

1、javaScript是通過<script></script>標籤插入到html頁面中，支援當前所有主流瀏覽器的輕量級的程式語言。

2 、jQuery是一個javaScript函式庫（javaScript框架），使用jQuery，需要在html頁面開始引入jQuery庫。

例： <script src="js/jquery.min.js"></script>

簡單總結：
1、javaScript(JS)是一門前端語言。
2、jQuery是一個框架，它對javaScript進行了封裝，使其更方便使用。
 

二、語法上的差異：

1、操作元素節點：

JavaScript使用：（getElement系列和query系列）

 var first = document.getElementById('first');
 var cls = document.getElementsByClassName('cls');
 var li = document.getElementsByTagName('li');
 var naName = document.getElementsByName('na');
 var queryContent = document.querySelector('#a3');
 var queryContents = document.querySelectorAll('.cls');
 

jQuery的使用：

$('.cls')
$('#first')
$("li type[name='na']")
$('li')

2、操作屬性節點：

JavaScript使用：

var firstProp = document.getElementById('first').getAttribute('id');
document.getElementById('first').setAttribute('name', 'one');
document.getElementById('first').removeAttribute('name');

jQuery的使用：

var id=$('#first').attr('id')
$('#first').attr('name' ,'one');
$('#first').removeAttr('name');
​
// prop獲取操作屬性節點
$('#first').prop('id')
$('#first').prop("id",'propSet');
$('#propSet').prop("id",'first');

注：在使用prop設定時，只能設定已經存在於屬相的屬性值

ps：
jquery中attr和prop的區別：
  1、 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
  2、對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

3、操作文字節點：

JavaScript使用：

1、innerHTML：取到或設定一個節點的HTML程式碼,可以取到css，以文字的形式返回

2、innerText：取到或設定一個節點的HTML程式碼，不能取到css

3、value:取到input[type='text']輸入的文字

<ul>
   <li id="i1" ><span style="color: chartreuse">嘿嘿</span></li>
   <li id="i2" ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名：<input type="text" id="input" value="222333">
</body>
// JavaScript 方法
<script type="text/javascript">
   console.log('i1', document.getElementById('i1').innerHTML);
   document.getElementById('i1').innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
   console.log('i1 text', document.getElementById('i1').innerText);
   document.getElementById('i1').innerText = '123';
   console.log('sdfads',document.getElementById("input").value);
</script>

結果為：

i1 <span style="color: chartreuse">嘿嘿</span>
i1 text 呵呵
sdfads 222333

jQuery的使用：

1、.html()取到或設定節點中的html程式碼2、.text()取到或設定節點中的文字3、.val()取到或設定input的value屬性值

$('#i1')
$('#i1').html()
$('#i1').text()
$('#i1').html("<span style='color: #ff3a29'>呵呵</span>")
$('#i1').text('123')
$('input').val('3333')

4、操作css樣式：

JavaScript使用：

    // childNodes獲取當前節點的所有子節點
   console.log('firstChildNodes',document.getElementById('first').childNodes);
   // children 獲取當前節點的所有元素子節點
   console.log('divChildren', document.getElementById('div').children);
   // parentNode:獲取當前節點的父節點下的所有節點
   console.log('parentNode', document.getElementById('ab').parentNode);
   // #text (文字節點的 nodeName 永遠是 #text) [獲取第一個元素節點，包括回車等文字節點]
   console.log('firstChild', document.getElementById('div').firstChild);
   // 獲取第一個元素節點，不包括回車節點
   console.log('firstElementChild', document.getElementById('div').firstElementChild);
   // lastChild、lastElementChild 同理
   console.log('previousSibling', document.getElementById('div').previousSibling);
   console.log('previousElementSibling', 
   document.getElementById('div').previousElementSibling);
   // nextSibling、nextElementSibling同理

jQuery的使用：

console.log('jQuery first-child',$('.cls:first-child'));

6、給一個節點繫結事件：

JavaScript使用：

document.getElementById('first').onclick = function (ev) {
  alert('123');
}

jQuery的使用：

①：事件繫結的快捷方式

$('#first').click(function () {
   alert('456');
})

②：使用on進行事件繫結（可以使用on同時給同一物件繫結多個事件**）

$('#ab').on('click', function () {
   alert('111');
})

③ :使用on，給一個物件繫結多個事件

$("button:eq(0)").on({
     "click":function () {
       console.log("click");
     },
     "mouseover":function () {
       console.log("mouseover");
     },
     "mouseover":function () {
       console.log("mouseover2");
     }
   });

④ :使用on給回撥函式傳參，要求是物件格式，傳遞的引數可以在e.data中取到；jquery中的e只能通過引數傳進去，不能用window.event

$("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
     console.log(e);
     console.log(e.data);
     console.log(e.data.name);
     console.log(e.data.age);
     console.log(window.event);//js中的事件因子
​
   });

7、JQuery的文件就緒函式和window.onload的區別：

①：window.onload必須等待網頁資源（包括圖片等）全部載入完成後，才能執行； 而文件就緒函式只需要等到網頁DOM結構載入完成後，即可執行。

②：window.onload在一個頁面中，只能寫一次，寫多次會被最後一次覆蓋；而文件就緒函式在一個頁面中可以有N個。

三、JavaScript物件和JQuery物件的方法不能混用

1、JavaScript物件和JQuery物件：

①：使用$("")取到的節點為JQuery物件，只能呼叫JQuery方法，不能呼叫JavaScript方法；

$("#div").click(function(){})√
$("#div").onclick = function(){}× 使用JQuery物件呼叫JavaScript方法

ps:同理，使用、document.getElement系列函式取到的物件為JavaScript物件，也不能呼叫JQery函式

2、JavaScript物件和JQuery物件互轉：

①：JQuery ---> JavaScript :使用get(index)或者[index]選中的就是JavaScript物件

$("div").get(0).onclick = function(){}
$("div").[0].onclick = function(){}

②：JQuery ---> JavaScript :使用get(index)或者[index]選中的就是JavaScript物件(JQuery不管獲得幾個物件都是一個數組，可以直接給整個陣列都新增某一事件)：

var div = document.getElementById("div");
$(div).click(function(){});