圖文詳解JavaScript和jQuery的區別
- yulia原創
- 2018-10-30 17:13:343631瀏覽
JavaScript是前端開發在不可或缺的一部分，jQuery因為使用方便快速也被廣泛使用，兩者都可以實現頁面的效果，那你知道JavaScript和jQuery的區別在哪裡嗎？這篇文章就跟大家講說JavaScript和jQuery的差別，有興趣的朋友可以參考一下。
一、本質上的差異
JavaScript 是一種解釋型腳本語言，這門語言可用於HTML 和web，更可廣泛用於伺服器、PC 、筆記型電腦、平板電腦和智慧型手機等設備。
JQuery是JavaScript的一個函式庫，也可以說是JavaScript的一種框架。
JavaScript程式碼直接寫在標籤中
jQuery的程式碼也寫在標籤中，但一定要在HTML程式碼前引入jQuery函式庫。如下圖所示：
二、語法上的差異
JavaScript與jQuery在操作元素節點，屬性節點，文本節點，點擊事件等方面都有所不同，以下以操作元素節點為例，看看他們有什麼不同。
範例1：根據ID名稱取得標籤元素
描述：
在頁面中建立兩個p標籤，並給他們一個類名和ID名。便於接下來用JavaScript和jQuery進行取得。
用JavaScript和jQuery取得ID為first的元素，具體程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p class="pp" id="first">1</p>
<p class="pp">2</p>
</body>
<script type="text/javascript">
var first = $("#first");
var first = document.getElementById("first");
</script>
</html>範例2：根據class取得標籤元素
var pp = $(".pp");//返回的是一个jQuery对象，通过pp[i]能取到具体元素
var pp = document.getElementsByClassName("pp");//返回的是元素列表，通过pp[i]能取到具体元素範例3：根據標籤名稱取得標籤元素
var p = $("p");//返回的是一个jQuery对象，通过p[i]能取到具体元素
var p = document.getElementsByTagName("p");//返回的是元素列表，通过p[i]能取到具体元素JavaScript和jQuery在語法上還有很多區別，這裡不做太多示範，不清楚的小夥伴可以參考PHP中文網的效果文章，或是存取 JavaScript影片教學。
總結JavaScript與jQuery的差別：
#1、沒有javascript就沒有jquery,他們是父子關係
2、jquery是javascript的一種封裝，jQuery比JavaScript更簡潔
3、jquery是javascript更簡單應用的腳本，在寫腳本時，javascript與jquery語法基本上相容
以上給大家介紹了JavaScript與jQuery的區別，希望對你有幫助！
更多相關教學請造訪 JavaScript中文參考手冊
#以上是圖文詳解JavaScript和jQuery的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！