jQuery和JavaScript有什么不同點(diǎn)？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括江門網(wǎng)站建設(shè)、江門網(wǎng)站制作、江門網(wǎng)頁(yè)制作以及江門網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，江門網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到江門省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

JavaScript：是瀏覽器中一種常見的腳本語言,以此來實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)以及和后端（數(shù)據(jù)庫(kù)）的交互。

jQuery：是JavaScript整合后的類庫(kù)，通過操作jQuery可以減少原生JavaScript語句的使用，從而提高效率。

JS：則是JavaScript的一種簡(jiǎn)稱。

區(qū)別概要：

  1.JQuery極大的簡(jiǎn)化了JavaScript，最大程度上做到了以最少代碼完成更多功能的艱巨任務(wù)。

  2.JavaScript對(duì)DOM的加載只加載一次，JQuery會(huì)加載多次。

  3.JQuery對(duì)DOM的操作更加方便。如節(jié)點(diǎn)的獲取。Eg：$()

說明：提升對(duì)原生JavaScript和封裝后的JQuery兩者理解最直接的方式就是在頁(yè)面中不引入JQuery來實(shí)現(xiàn)前后端的基礎(chǔ)交互。

以下內(nèi)容是為了區(qū)別理解jQuery與JS所整理的紀(jì)要：

jQuery-和原生Javascript寫法：

1 定位元素

  JS：

document.getElementById("abc")

  jQuery ：

$("#abc") 通過id定位 
$(".abc") 通過class定位 
$("div") 通過標(biāo)簽定位

  注意：JS返回的結(jié)果是這個(gè)元素，jQuery返回的結(jié)果是一個(gè)JS的對(duì)象。以下例子中假設(shè)已經(jīng)定位了元素abc。

2 改變?cè)氐膬?nèi)容

  JS：

abc.innerHTML = "test";                //現(xiàn)在的項(xiàng)目中有用到

  jQuery：

abc.html("test");

3 顯示隱藏元素

  JS：

abc.style.display = "none";              //現(xiàn)在的項(xiàng)目中有用到
abc.style.display = "block";

  jQuery：

abc.hide(); 
abc.show();
abc.toggle();         //在顯示和隱藏之間切換、

4 獲得焦點(diǎn)

JS和jQuery是一樣的，都是abc.focus();

5 為表單賦值

  JS：

abc.value = "test";

jQuery：

abc.val("test");

6 獲得表單的值

JS：

alert(abc.value);

jQuery：

alert(abc.val());

7 設(shè)置元素不可用

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 判斷復(fù)選框是否選中

jQuery

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

  注意：網(wǎng)上說的.attr("checked") == true實(shí)際上不能用，上面這個(gè)測(cè)試過能用

JS和JQUERY的區(qū)別

1. 根據(jù)ID取元素

  JS:取到的是一個(gè)DOM對(duì)象。

  例：

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

  JQUERY:取到的是一個(gè)JQUERY對(duì)象。

  例：

var div = $("#one");

2. 根據(jù)class取元素[在數(shù)組里面如果要取DOM對(duì)象使用索引的方式，如果要取JQUERY對(duì)象使用eq()]

  JS:取到的是一個(gè)數(shù)組

  例：

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

  JQUERY:

  例：

var div = $(".test");

3. 根據(jù)name取元素

  JS：返回的是一個(gè)數(shù)組

  例：

var bd = document.getElementsByName(uid);

  JQUERY：的方式是用 方括號(hào)，屬性=一個(gè)值，不限制非要根據(jù)name來取值，JQUERY是根據(jù)屬性來取元素

  例：

$("[name='uid']");

4. 根據(jù)標(biāo)簽名取元素

  JS：返回的也是一個(gè)數(shù)組

  例：

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

  JQUERY：和樣式表里面給所有div加樣式的方法一樣，在雙引號(hào)內(nèi)直接寫標(biāo)簽名

  例：

$("div");

Eg:指定子目錄元素對(duì)象獲取：var div = $("div span");——有很多組合方式

操作內(nèi)容

  1. 非表單元素（如果是文本就用text方法，如果是html代碼就用html方法）

  例：

  1.1. 無參數(shù)的情況下是取值

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

  1.2. 有參數(shù)的情況下是賦值

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

2. 表單元素

  JS：

  2.1. 取值

div.value;

  2.2. 賦值

div.value = 'xxx';
JUQERY：

  2.3. 取值

div.val();

  3.4. 賦值

div.val('xxx');

操作屬性

  JS操作屬性

  設(shè)置|修改屬性：

div.setAttribute("","");

  刪除屬性

div.removeAttribute("");

  獲取屬性

div.getAttribute();

  JQUERY里面用來操作屬性的方法

  添加屬性：

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

  移除屬性：

div.removeAttr("width");

  獲取屬性：

div.attr("width");

操作樣式

  JS操作樣式-關(guān)鍵字是[style]

  例：

div.style.backgroundColor = "red";

  JQUERY里面操作樣式的關(guān)鍵字是css

  例：

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

——把這個(gè)div的背景色變?yōu)辄S色，在這里CSS里面所有的樣式和css樣式表里面的樣式是一模一樣的沒有任何變化

JS操作樣式的方法只能獲取內(nèi)聯(lián)樣式，不能取內(nèi)嵌的和外部的

JQUERY操作樣式的方法可以是內(nèi)聯(lián)的也可以是內(nèi)嵌的

關(guān)于jQuery和JavaScript有什么不同點(diǎn)問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。