一起來聊聊jQuery、JavaScript與JS三者間的差別-js教程-PHP中文網

首頁

web前端

js教程

一起來聊聊jQuery、JavaScript與JS三者間的差別

烟雨青岚

Jun 30, 2020 pm 01:08 PM

javascriptjqueryjs差別

一起來聊聊jQuery、JavaScript與JS三者間的差別

JavaScript：是瀏覽器中常見的腳本語言,以此來實現網頁的動態以及和後端（資料庫）的互動。

jQuery：是JavaScript整合後的類別庫，透過操作jQuery可以減少原生JavaScript語句的使用，進而提高效率。

JS：則是JavaScript的一種簡稱。

差異摘要：

1.JQuery極大的簡化了JavaScript，最大程度上做到了以最少程式碼完成更多功能的艱鉅任務。

2.JavaScript對DOM的載入只載入一次，JQuery會載入多次。

3.JQuery對DOM的操作更方便。如節點的獲取。 Eg：$()

說明：提升對原生JavaScript和封裝後的JQuery兩者理解最直接的方式就是在頁面中不引入JQuery來實現前後端的基礎交互作用。

以下內容是為了區別理解jQuery與JS所整理的紀要：

jQuery-與原生Javascript寫法：

1 定位元素

JS：

document.getElementById("abc")

jQuery ：

$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("div") 通过标签定位

注意：JS回傳的結果是這個元素，jQuery回傳的結果是一個JS的物件。以下例子中假設已經定位了元素abc。

2 改變元素的內容

JS：

abc.innerHTML = "test";                //现在的项目中有用到

jQuery：

abc.html("test");

3 顯示隱藏元素

JS：

abc.style.display = "none";              //现在的项目中有用到
abc.style.display = "block";

jQuery：

abc.hide(); 
abc.show();
abc.toggle();         //在显示和隐藏之间切换、

4 獲得焦點

JS和jQuery是相同的，都是abc.focus();

5 為表單賦值

JS：

abc.value = "test";

jQuery：

abc.val("test");

##1 # 6 取得表單的值

JS：

alert(abc.value);

jQuery：

alert(abc.val());

7 設定元素不可用

JS：

abc.disabled = true;

jQuery：

abc.attr("disabled", true);

8 修改元素樣式

JS：

abc.style.fontSize=size;

jQuery：

abc.css(&#39;font-size&#39;, 20);

JS：

abc.className="test";

JQuery：

abc.removeClass(); 
abc.addClass("test");

9 判斷複選框是否選取

jQuery

if(abc.attr("checked") == "checked")

注意：網路上說的.attr("checked") == true其實不能用，上面這個測試過能用

JS和JQUERY的差別

#1 . 根據ID取元素

JS:取到的是一個DOM物件。

範例：

var div = document.getElementByID("one");

JQUERY:取到的是一個JQUERY物件。

範例：

var div = $("#one");

2. 根據class取元素[在陣列裡面如果要取DOM物件使用索引的方式，如果要取JQUERY物件使用eq()]

JS:取到的是一個陣列

範例：

var div = document.ElementsByClassName("test");

JQUERY:

例：

var div = $(".test");

3. 根據name取元素

例：

var bd = document.getElementsByName(uid);

3. 根據name取元素

JS：回傳的是一個陣列

例：

$("[name=&#39;uid&#39;]");

JQUERY：的方式是用方括號，屬性=一個值，不限制非要依照name來取值，JQUERY是根據屬性來取元素

範例：

var div = document.getElementsByTagName("div");

4. 根據標籤名稱取元素

### JS：傳回的也是一個陣列###### 範例：## #

$("div");

### JQUERY：和樣式表裡面給所有div加樣式的方法一樣，在雙引號內直接寫標籤名###### 例：###

div.text();
div.html();

###Eg:指定子目錄元素對象取得：var div = $("div span");——有很多組合方式#########操作內容######### 1. 非表單元素（如果是文字就用text方法，如果是html程式碼就用html方法）###### 範例：###### 1.1. 無參數的情況下是取值###