一起來聊聊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('font-size', 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='uid']");

    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. 無參數的情況下是取值###

div.text("aaaa");
div.html("aaaa");

###    1.2. 有參數的情況下是賦值###

div.value;

###　　2. 表單元素######    JS：######    2.1. 取值###

div.value = 'xxx';
JUQERY：

###    2.2. 賦值###

div.val();

##2.3.取值###

div.val('xxx');

###    3.4. 賦值###

div.setAttribute("","");

######操作屬性###########    JS操作屬性#########    設定|修改屬性：###

div.removeAttribute("");

###    刪除屬性###

div.getAttribute();

###    取得屬性###

div.attr("width","20%");

######    JQUERY裡面用來操作屬性的方法########  # 新增屬性：###

div.removeAttr("width");

###    移除屬性：###

div.attr("width");

###    取得屬性：###

div.style.backgroundColor = "red";

######操作樣式##########    JS操作樣式-關鍵字是[style]######    例：###

div.css("background-color","yellow");

###    JQUERY裡面操作樣式的關鍵字是css######    例：###rrreee###—把這個div的背景色變成黃色，在這裡CSS裡面所有的樣式和css樣式表裡面的樣式是一模一樣的沒有任何變化#########    　　JS操作樣式的方法只能取得內聯樣式，不能取內嵌的和外部的！ ！ ！ ！ ！ ###

    　　JQUERY操作樣式的方法可以是內聯的也可以是內嵌的

感謝大家的閱讀，希望大家收益多多

本文轉自：https://blog.csdn .net/dalei9243/article/details/79804789

#推薦教學：《JS教學》

以上是一起來聊聊jQuery、JavaScript與JS三者間的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！