圖文詳解JavaScript和jQuery的區別-js教程-PHP中文網

圖文詳解JavaScript和jQuery的區別

yulia

發布： 2018-10-30 17:13:34

原創

3673 人瀏覽過

JavaScript是前端開發在不可或缺的一部分，jQuery因為使用方便快速也被廣泛使用，兩者都可以實現頁面的效果，那你知道JavaScript和jQuery的區別在哪裡嗎？這篇文章就跟大家講說JavaScript和jQuery的差別，有興趣的朋友可以參考一下。

一、本質上的差異

JavaScript 是一種解釋型腳本語言，這門語言可用於HTML 和web，更可廣泛用於伺服器、PC 、筆記型電腦、平板電腦和智慧型手機等設備。

JQuery是JavaScript的一個函式庫，也可以說是JavaScript的一種框架。

JavaScript程式碼直接寫在標籤中

jQuery的程式碼也寫在標籤中，但一定要在HTML程式碼前引入jQuery函式庫。如下圖所示：

圖文詳解JavaScript和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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

圖文詳解JavaScript和jQuery的區別