essoduke's blog

什麼是 jQuery?

[quote]jQuery 是一個快速又簡潔的 JavaScript 程式庫,簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程,簡單地來說,jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。[/quote]

雖然如此簡單,不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒,而網路上眾多範例都是屬於進階、甚至高階技巧,所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章,而第一篇就鎖定在網頁元素的操作,希望對於入門者有所幫助。

剛開始的準備

當然就是下載最新版本的 jQuery 並引入網頁的 head 區段,並準備好方便編輯 HTML 源碼的編輯器,我推薦 PSPad,一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。




PsPad

基礎:網頁元素控制

我合作過不少網頁設計師,對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計,所以對於 HTML 原始碼通常都一知半解,但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。

舉個最常在 DW 源碼內出現的 id 屬性,多數使用 DW 的設計師都不清楚這個 id 有什麼用途?簡單來說,id 就是所謂的 identity(識別)也就是該元素的唯一識別名稱,單一網頁的一個 id 只能出現一次,為的就是方便使用 DOM 的方式來控制這些元素。

案例一觀看範例

將滑鼠移到超連結上,下方黑線區塊內的文字變更為超連結的文字,移開後就恢復空白。這個案例適用於想要用不同的方式設計連結說明。

/*在 ... 內放置超連結 a 元素和一個 id 為 mytext 的 div 元素*/
Google
/*在 ... 內加入下列 script*/

當然也可以直接獲取元素的 class name 來控制元素,只要將 class="link" 加入 a 元素中,並將 jQuery Selector 改寫為:

$(".link").mouseover(function(){
...
}

使用 jQuery 控制網頁元素就是這麼簡單!

下一個單元就是令很多網頁設計師頭疼的 Form 表單元件的應用範例,如聚焦事件、鎖定按鈕、友善的錯誤提示等等。


  • 竹竿

    你好~我目前有個需求就是我想讓使用者大量選一些檔案
    我選上了你所介紹的,可是主要我也是jquery的新手
    其實只會套用,我想請教你一下,就是我不需要上傳
    我只需要能選完檔案 然後逐筆把檔名讀出…我試過
    你demo的 我能印出第一筆 迴圈跑不出來><
    不知可提示或教導一下嗎? 感謝^^

  • http://essoduke.org/ essoduke

    我猜你的意思是單一個檔案瀏覽框的情況之下列出所有選取的檔案名稱?

    那上述例子得修改為:

    // .file 是 Multifile Plugin 所建立的檔案清單容器的 Class Name
    $(‘.file’).each(function(){
    document.write($(this).html());
    });

    完整範例請參考:
    http://my.essoduke.org/files/demo/upload.htm

  • mark

    您好,我試過您的這個ideal,得確可以在firefox上正常使用,不過在ie 7時就怪怪的了,不能正常的上傳成功,請問這是什麼原因呢?

  • http://essoduke.org/ essoduke

    是否有出現 javascript error 呢?
    可能要請您列出程式碼或提供 demo 才能進一步瞭解了…

  • jen

    你這樣的寫法不是很完美,

    你測試一下, 如果你所有的檔案都丟 好幾MB上去,

    第一個檔案才剛開始上傳,第二個檔案又接著對server做request,

    然後第三…第四個檔..一直接著來對server做request.

    第一個檔案還沒上傳好, 後面一直來request,

    有可能上傳的動作會被miss掉,or失敗.

    建議:

    較好的寫法是,第一個檔案上傳完後, 接著傳下一個.

    可寫在success: 裏面, 上傳下一個檔案.

  • Pingback: AjaxFileUpload 上傳檔案 | Allen J()

  • Pingback: AjaxFileUpload 上傳檔案 | Allen J()