線上教室

學習程式語言(jQuery)

講義

jQuery 簡介
jQuery 致力於改變傳統 JavaScript 的思考與開發方式，相對於把時間花在 JavaScript 進階和複雜的語法，網頁設計人員可以運用他們熟悉的 CSS3 與原本就已經會的 JavaScript 知識，來直接處理網頁元素，讓網頁設計快速開發的理想成真。
* 簡約程式碼的效益
如果你需要在網頁中加入一些動態功能，應該會發現花過多的時間在經常做的事務上面，例如：選取一個或一組元素，然後在這些元素上進行操作。
如果直接撰寫 JavaScript 程式碼的話，這類的工作會產生一大堆程式碼，這時侯就可以考慮使用 jQuery 了。 jQuery 創造者在開發函式庫時，特別把一些經常性的操作變得簡單直覺。例如：在使用 JavaScript 處理單選按鈕群組(radio group)時，基本上要找出單選按鈕中是否有選取項目並取得 value 屬性，這是件麻煩的事。首先，你必須先找出單選按鈕在哪裡？然後檢查所有取得的單選按鈕陣列中的每個元素，看看是否有設定 checked 屬性，接著才可以取得屬性。
JavaScript 程式碼，如下：
```
var checkedValue;
var elements = document.getElementsByTagName('input');
for (var n=0; n<elements.length; n++) {
   if (elements[n].type == 'radio' &&
       elements[n].name == 'someRadioGroup' &&
       elements[n].checked) {
     checkedValue = elements[n].value;
   }
}
```
jQuery 程式碼，如下：
```
var checkedValue = $('[name="someRadioGroup"]:checked').val();
```
JQury 1.3 下載
Lesson1
【實作一：打雷】
```
<!DOCTYPE html>
<html>
    <head>
        <title>網頁程式設計</title>
        <script type="text/javascript" src="jquery-1.3.js"></script>      
        <script type="text/javascript">
            $(function() {
                var element = $('#example')[0];
                element.addEventListener('click', function(event) {
                    alert('打雷一次!');
                }, false );
                element.addEventListener('click', function(event) {
                    alert('打雷二次!');
                }, false );
                element.addEventListener('click', function(event) {
                    alert('打雷三次!!');
                }, false );
                });   
        </script>
    </head>
        <img id="example" src="lightning.png">
    <body>
    </body>
</html>
```
【圖片】
圖片來源：OpenClipart https://openclipart.org/detail/220102/dark-lightning
以上教材參考自「jQuery實戰手冊(2011)。Bear Bibeault, Yehuda Katz原著。林信良譯。涂明賢審校。碁峯出版。」

學習程式語言(jQuery)

jQuery 簡介