在JavaScript的基本概念文章系列中，主要透過一些範例實作來了解HTML、CSS、JavaScript基本概念與相關語法，而這些鋪成都是為了準備撰寫JQuery所做的準備(w3school 網站裡寫很清楚，學習JQuery前必須具備有的相關知識)。然而，直接從JavaScript語法轉跳到寫JQuery語法過程中，相信會有不少人搞得暈頭轉向，因此本篇會先整理一下JavaScipt 與JQuery方法呼叫的差異，之後再慢慢介紹JQuery的相關應用。
程式範例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- jQuery Library 導入 (google CDN 提供 or JQuery官網下載)-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<!-- 同樣一個監聽是件，名稱寫法略有不同(去掉on便是jquery寫法)
onchange for JavaScript
change for jquery
-->
<select id="choose" onchange="choose_what()">
<option value="a">a</option>
<option value="b">b</option>
<!--預設選取選項"c-->
<option value="c" selected >c</option>
<option value="d">d</option>
</select>
</body>
</html>
<!--1.JavaScript 寫法 -->
<script>
/*
//1.1:一般的寫法
var ch = document.getElementById("choose").value;
console.log(ch);
*/
/*
//1.2 建立方法，呼叫使用它
function choose_what() {
console.log(document.getElementById("choose").value);
}
choose_what();
*/
/*
//1.3:系統事件--整個網頁完全載入後，執行(匿名)事件處理函數
window.onload = function () {
var ch = document.getElementById("choose").value;
console.log(ch);
};
*/
/*
//1.4:系統事件--整個網頁完全載入後，執行(匿名)事件處理函數，在執行choose_what()方法
window.onload = function () {
choose_what();
};
function choose_what() {
console.log("" + document.getElementById("choose").value);
}
*/
</script>
<!-- 2.jQuery 寫法 -->
<script>
/* $:jquery用法
#:id選擇器 */
/*
//2.1 JQuery傳統寫法
//等同於javaScript系統事件--整個網頁完全載入後，執行(匿名)事件處理函數
$(document).ready(function () {
$("#choose").change(
console.log("你選了" + $("#choose").val())
);
});
*/
//2.2 JQuery常用寫法(較簡潔)
//等同於javaScript系統事件--整個網頁完全載入後，執行(匿名)事件處理函數
//$(function(){})
$(function () {
$("#choose").change(
console.log("你選了" + $("#choose").val())
);
});
</script>
<script>
jQuery(document).ready(function () {
//程式碼
});
/*上述jQuery程式碼事由「jQuery」開始，也可以用錢字號「$」來替代*/
$(document).ready(function () {
//程式碼
});
/*$()函數括號內的參數是指定想要取用哪一個物件，接著是想要jQuery執行甚麼方法或處理甚麼事件，例如.read()方法。
Ready方法括號內則是事件處理的函數程式碼，多數情況下，也就是上述程式碼裡的function() {}*/
$(function () {
//程式碼
});
$(選擇器).動作()
//例如: $("p").hide();
$("p")
$("#test")
$(".test")
</script>
呈現效果:
認識jQuery
jQuery 是一套 JavaScript 的 Library，因此，你必須稍具 JavaScript 的基礎，至少寫過一些 JavaScript 才比較容易上手，並且看得懂後續的教學。jQuery 主要是用在 DOM(Document Object Model,文件物件模型) 文件的操作，包含「快速選取元素(Element)」並且「做一些事情」，快速選取元素可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。
以上看得出來 jQuery 是針對 JavaScript 內在不足的地方加以增進，你仍然需要自己寫一些程式來完成你需要的各種功能，不同的是，正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來
引用 jQuery 函數庫
一般來說引 jQuery 方式有兩種，一種是直接去 jQuery 官網下載JS檔載入，另一種是使用CDN來載入程式庫，接著將JS檔加入網頁HTML的<head>標籤之間。(本範例使用Google CDN 提供的 JS 來使用)
內容傳遞網路（Content delivery network或Content distribution network，縮寫：CDN）是指一種透過網際網路互相連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。
jQuery 基本架構
jQuery 必須等到瀏覽器載入HTML 的 DOM 物件之後才能執行，可以透過.ready()方法來確定DOM已經全部載入，如下所示。
由於document ready 是很常用的方法，jQuery 有提供了更簡潔的寫法讓我們更容易使用，如下所示。
jQuery基本語法
jQuery的使用非常簡單，只要指定作用DOM元件及執行甚麼樣的動作，與法如下。
上述語法是找出HTML元件中所有的<p>物件並且隱藏起來。
jQuery 選擇器
jQuery選擇器是用來選擇HTML元件，我們可以透過HTML標籤名稱、id屬性、class等等來取得元件。
標籤名稱選擇器
標籤名稱選擇器是直接取HTML元件標籤，例如想要選擇所有的<p>元件，可以寫成:
id選擇器(#)
id選擇器是透過元件的id屬性來取得元件，只要在id屬性前加上「#」號就可以了，例如想要選擇id屬性為test的元件，可以寫成:
class選擇器(.)
class選擇器是透過元件的class屬性來取得元件，只要在class屬性前加上「.」號就可以了，例如想要選擇class屬性為test的元件，可以寫成:
.
