jquery程式碼寫法與原生js寫法的差異詳解

要使用jQuery，首先要在HTML程式碼最前面加上jQuery函式庫的引用，例如：

<script language="javascript" src="/js/jquery.min.js"></script>

函式庫檔案既可以放在本地，也可以直接使用知名公司的CDN，好處是這些大公司的CDN比較流行，用戶造訪你網站之前很可能在造訪別的網站時已經快取在瀏覽器中了，所以能加快網站的開啟速度。另一個好處是顯而易見的，節省了網站的流量頻寬。

jquery程式碼寫法與原生js寫法的差異如下所示：

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

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. Ajax
JS
自己建立物件，自己處理瀏覽器相容等亂七八糟的問題，略去不表
jQuery

$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);

function recall(result) {
alert(result);
//如果返回的是json，则如下处理
//result = eval('(' + result + ')'); 
//alert(result);
}

10. 判斷複選框是否選取
jQuery
if(abc.attr("checked") == "checked")

以上是jquery程式碼寫法與原生js寫法的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！