#兩分鐘了解jQuery與JavaScript、JS 三者間的差異
JavaScript 、jQuery、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定位
$("p") 通过标签定位
注意：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";
#
abc.val("test");6 取得表單的值
JS：
alert(abc.value);
alert(abc.val());
7 設定元素不可用 JS：
abc.disabled = true;
abc.attr("disabled", true);8 修改元素樣式 JS：
abc.style.fontSize=size;
abc.css('font-size', 20);
abc.className="test";
abc.removeClass();
abc.addClass("test");9 判斷複選框是否選取 jQuery
if(abc.attr("checked") == "checked")# JS與JQUERY的差異
1. 根據ID取元素# JS:取到的是一個DOM物件。
例：
var p = document.getElementByID("one"); 範例：
var p = $("#one");2. 根據class取元素[在陣列裡面如果要取DOM物件使用索引的方式，如果要取JQUERY物件使用eq()] # JS:取到的是一個陣列
例：
var p = document.ElementsByClassName("test"); 範例：
var p = $(".test");3. 根據name取元素# JS：傳回的是一個陣列
例：
var bd = document.getElementsByName(uid);
範例：
$("[name='uid']");4. 依照標籤名稱取元素 JS：傳回的也是一個陣列
範例：
var p = document.getElementsByTagName("p"); 例：
$("p");操作內容
1. 非表單元素（如果是文字就用text方法，如果是html程式碼就用html方法)
範例： 1.1. 無參數的情況下是取值
p.text();
p.html();
1.2.有參數的情況下是賦值
p.text("aaaa");
p.html("aaaa");
2. 表單元素 JS：
2.1. 取值
p.value;
2.2. 賦值
p.value = 'xxx';
JUQERY：
2.3. 取值
p.val() ;
3.4. 賦值
p.val('xxx');
#操作屬性
##JS操作屬性
# 設定|修改屬性：
p.setAttribute("","");p.removeAttribute("");p.getAttribute();
新增屬性：##
p.attr("width","20%");p.removeAttr("width"); 取得屬性：
p.attr("width");操作样式
JS操作样式-关键字是[style]
例：
p.style.backgroundColor = "red";
JQUERY里面操作样式的关键字是css
例：
p.css("background-color","yellow");——把这个p的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的
感谢大家的阅读，希望大家收益多多。
本文转自：https://blog.csdn.net/dalei9243/article/details/79804789
推荐教程：《JS教程》
以上是兩分鐘了解jQuery與JavaScript、JS 三者間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！
