兩分鐘了解jQuery與JavaScript、JS 三者間的差異

#兩分鐘了解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";

jQuery：

#

abc.val("test");

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 p = document.getElementByID("one");

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

範例：

var p = $("#one");

2. 根據class取元素[在陣列裡面如果要取DOM物件使用索引的方式，如果要取JQUERY物件使用eq()] # JS:取到的是一個陣列
例：

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

JQUERY:

範例：

var p = $(".test");

3. 根據name取元素# JS：傳回的是一個陣列
例：

var bd = document.getElementsByName(uid);

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

範例：

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

4. 依照標籤名稱取元素 JS：傳回的也是一個陣列
範例：

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

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

例：

$("p");

Eg:指定子目錄元素物件取得：var p = $("p span") ;——有很多組合方式

操作內容

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();

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

新增屬性：##

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中文網其他相關文章！