Melvin的部落格: JavaScript的基本概念(五) JavaScript 與 JQuery 差異 & JQuery 的基本概念(一)

在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已經全部載入，如下所示。