有鑑於javascript常常讓人望之卻步 , 興起用下班時間寫一些教學的念頭,
        畢竟想做就該找方法 , 不太應該拿下班當理由 ,

        簡單用700～1000字為 jQuery及js的觀念寫一系列的文章.
        主要希望讓沒碰過的朋友們能有基礎 , 讓碰過的朋友們能加強觀念.

        當然為了增加吸引力 ,  每章最後都來放個實做案例好了...XD
        前三章應該主要還是在dom(document object model ).

        ────────────────────────────────

        第一章主要是要講什麼是javascript , 他在網頁設計上扮演著什麼角色,
        算是讓沒有基礎的使用者可以用來銜接用的 , 有基礎的版友可能會比較失
        望一點.

        ────────────────────────────────

      ＠什麼是Javascript？它跟Java程式語言有關嗎？我需要學嗎？

        Javascript 跟 Java完全不相關 , 就跟原子筆跟原子沒什麼關係一樣,
        他是在網頁上執行的程式碼（或稱作腳本語言 , script lang）.


        基本上一個html網頁是很堅強的 ,  完全沒有javascript也可以活的下去,
        所以如果你不會 javascript , 可以先不用急著擔心自己是不是落伍了 .


        一般網頁設計的書籍都會教你一條設計守則 ,
        以html為主 ,  javascript只是增強.

        所以我可以很阿Q的回答你 , 不會Javascript理論上不會有什麼問題.


        不過如果是這樣這篇文章就沒有存在的必要了 ,
        所以接著我們來看看 javascript究竟可以為我們帶來什麼益處.

        ────────────────────────────────

      ＠從遠距欣賞走向互動的推手

        過去在1999年代前後 , 我們最常看到的互動 ,
        就是一堆alert或window.open的爆炸視窗 , 跟ie 提供的marquee 跑馬燈.

        大部分時間我們都只是靜靜的在欣賞別人的靜態作品 ,
        很少有人會特地去設計互動性的網頁 , 此時 js 只被拿來惡搞.


        講到js應該不少人會聯想到特效 , 所謂的特效不外乎就是按一下跑出一張圖,
        按一下某個區塊消失 , 另一個區塊同時顯示 , 甚至像底下連結的有趣特效.

        http://malsup.com/jquery/cycle/ （中央的圖片 請耐心等候2~3秒.）
        （當然 , 這也是一個jquery強大的plug-in 例證.）


      ＠網頁需要改變 （更快的改變！）

        沒錯 , javascript主要的運用就是在效果上 ,

        對於傳統靜態網頁設計來講 , 想要讓網頁顯示不同的面貌 ,
        很簡單 , 重新設計一分html就是了 ,

        擺上一個超連結讓使用者連結過去 , 一切好像都很美好!


        不過我們知道網頁不可能一秒十六張 , 影像變成動畫在這裡
        幾乎是不可能的事情, 於是我們只能仰賴如marquee之類的元件 .


        這時候有個東西就說 , 既然網頁上都是一個一個的tag元素 ,
        我是不是可以把它整個看成是一個document（文件） , 其中有
        一個一個大包小的elemen（元素）呢？

        然後你也不要重新寫一份了 , 告訴我你想改那個元素的那個值 ,
        要他顯示或不顯示 , 要他走就走要他飛就飛 , 好不愜意 .


        這個東西就是javascript , 他幾乎80％以上的功能是來自異動或新增
        現有頁面的網頁元素的內容,來達成各式的效果 .


        剩下20%則是在於瀏覽器的歷史紀錄 , 以及像是alert,
        或者是ie底下可支援自製的 activeX 及popupwindow ,
        還有cookie編輯跟計時器(timeout跟internal的支援）等等.


      ＠貼心的好幫手

        從送出表單時貼心地檢查表單內容是否符合需要，
        到滑過某些特定元件時顯示出詳細資料（tooltip) ，
        或是看圖片時貼心顯示較大圖片方便觀賞（thickbox功能之一）

        甚至是像gmail 或者網路上眾多ajax網站 ,
        豐富的互動式體驗 , 這些全都仰賴javascript協助.

        ────────────────────────────────

      ＠實例體驗
        第一篇內容能寫的有限 , 所以就先進體驗吧 ,
        這裡我們要介紹的是 TableSorter with jQuery.

        要展示javascript異動網頁元素的經典例子 ,
        可排序的table 當然會是個好例子.

        原碼下載
        http://tablesorter.com/docs/

        簡單的demo頁面（操作說明請看註解）
        http://tonyq.org/test/testTableSorter.html


        另外他還有一個有趣的feature , 想要實現多條件排序 ,
        只要按住shift , 依序點選你想要的排序條件 , 就可以達成.



--
竟然兩點了...來去睡...=w=...請多多指教...

--
        What do you want to have ?  / What do you have?
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。
        My PPolis , My past. http://ppolis.tw/user/Tony

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
※ 編輯: TonyQ           來自: 61.224.239.208       (12/15 23:45)
 

---

 

---

        上一篇不含開頭簡介就爆了一百多字, 這篇得更精簡用詞才行.


        會想學 js的有兩種人 , 一種是希望看完之後自己會寫會改的 ,
        另一種則是希望來找些語法copy and paste的 ,

        基本上體驗部份是為後者設計的 , 而文章內文主要是寫給前者看的,
        我寫的很口語 , 希望你們以「跟程式語言聊天」的心情來看這些文字.


        jquery呢？ 我會說它是對兩者都適合的,
        他可以簡單到一行就能完成 , 也能讓人很方便的去寫去改.

        希望你們看完這幾萹文章不會被誤導 , 不是所有事情都能一行被完成 ,
        但是它能讓你在思考上保持「簡單」.

        ────────────────────────────────

      ＠前情摘要

        我們正說到 js 大部分的時間都用來異動網頁上成員的屬性 ,
        比方說換個背景顏色 , 換成消失或顯示 , 甚至移動位置 ,

        嗯 , 這聽起來不錯 , 當你正坐下來開始想思考這到底是怎麼做的 ,

        你或許會想到 , 我什麼時候要作這件事情？


      ＠行為的起點 ─ 事件

        這是個好問題 , 在這裡我們不妨先假設一個簡單的情境 ,
        當你按下名為芝麻開門的按鈕(button)時 , 你希望某個圖片就突然消失.

        雖然事件不是我們本章的主角 , 不過在這裡姑且當隻誤闖
        叢林的小白兔 ,  先來看這個簡單的例子吧.：）

        http://tonyq.org/jqtalk/jq2_dooropen.html


        對於 onclick 事件 , 相信你們不會全然陌生 ,
        我特地選擇使用純js撰寫 , 以保持你們可能較為熟悉的面貌 .


        在這個事件裡面 , 我們很清楚到人事物是事件最重要的三元素,
        由使用者去點擊按鈕, 而發動事件 , 接著對img做屬性的異動.

        以這個例子 , 我們是針對 #imgDoor 作
                { display:none; }跟 {display:;} 的切換


      ＠目標是那個元素？

        不管是這次的例子中的imgDoor或者是之前體驗的table跟各span ,
        這些都是我們事件要異動的對象, 通常我們最簡單也最常見的方法就是

        將目標物件加上一個id , 然後採用document.getElementById ,

        這字串長度共23個字 , 有大寫有小寫 ,
        還很容易跟document.getElementsByName弄錯 ,

        而且對html來說 , id要唯一的 , 設定id會造成思考上得負擔,
        雖然純js也有提供 document.gtElementsByTagName 的方法,
        但是總是需要花時間去學習 , 而且一樣有程式碼太長的問題.


      ＠為元素披上外衣的CSS

        讓我們先把鏡頭拉遠 , 講到這個要做出漂亮html就不能忘記的網頁夥伴,
        我們會很驚訝地發現 , 他也一樣有不曉得要針對那個網頁元件上色的問題 .


        我們可能會採用  ,
        我們稱之為 inline style(行內樣式） 的方式寫 ,

        為各元素上色 , 但是這跟之前 id 問題一樣 ,
        逐一設定過於繁瑣 ,  讓它失去彈性.


        於是 css 就改採用  的標籤樣式 ,
        甚至是連結到外部的  .

        而它之所以能獨立 , 仰賴的就是 selector .


      ＠認識css三種充滿威力的selector

        1. id selector ,
           我們用 「#」這個字元開頭 ,緊接著它的id , 稱之為id selector .
           透過這個selector 所設定的樣式會影響到該id的元素
           (這個selector 指嚮應該是獨一無二的, 因為同一頁面不該有同樣id元素.)

           /*將 的背景改為紅色的寫法*/
           #hello{
              background:red;
           }

        2.tag selector
          你是否常常想要改變所有超連結的顏色 ？ 選他就對了
          當你不打任何符號,直接打上網頁標籤（tag）的名稱,
          就是採用tag selector方案.

          /*將網頁上所有div的文字顏色變成綠色*/

          div{
                color:green;
          }

        3.class selector
          這個是最常見也最具擴充性的一個selector ,
          要使用這個你必須要在元素上先加上 class="xxx" ,
          再透過 「.」開頭的字串「.xxx」指定這個元素 ,
          他跟id selector最大的差異是它的class可以有一個以上,
          且class不限定只能用在一個元素上 .

         

wordtitle1

         

word1

         

wordtitle2

         

word2

          /*將wordtitle的文字加上底線 , wordbody的字設為綠色*/

          .wordtitle{
                text-decoration:underline;
          }
          .wordbody{
                color:green;
          }


      ＠等等，我們不是在講 javascript嗎？

        沒錯 , 但這裡的selector的確跟我們主題的selector有關,
        更之前的文章中提到 , 傳統id取得元素的方案程式碼過長,
        且需要花費時間學習 , 相信各位網頁設計師可能會跟我以前一樣 ,

        會用下列這樣的工具來加速開發

        function e(strId){return document.getElementById(strId)};
        function eS(strId,show){ e(strId).style.display=show};

        之後只要呼叫 e("nodename") 就可以取得dom物件 ,
        這大概是只有id selector 的需求下最簡單直接的方案.


        但是我們除了id selector以外其實還有很多隱性需求 ,
        比方說我終於受夠充斥整個頁面幾百個該死的表格了 ,
        我現在想把整個頁面的討厭表格給移除 , 我想要tag selector !!

        jQuery就很貼心的提供了這樣的方案:


        你看 , 就像這樣
                $("table").remove();

        /*這不是開玩笑 , 所有的表格就這樣從頁面中移除了.*/


        好吧 , 我知道一定有人會質疑 , 所以還是程式碼會說話.
        http://tonyq.org/jqtalk/jq2_tableremove.html


      ＠劫後餘生記

        嗯 , 我們終於成功的討伐 table 大魔王了 ,

        但是table在頁面上少說也有5～6個 , 也不完全是巢狀關係 ,
        為什麼一行就清掉了呢？


        理由是 jquery 預設取回來的資料是以陣列處理的jQuery context ,
        而你透過 jQuery context所作的任何事件（像是他提供給你的remove) ，
        都會影響到 jQuery context中所有成員 .


     ＠remove實在太酷了 , 但總不能一直移除東西吧 , 那他提供哪些方法呢？

        請見 jquery Document （我們之後會再針對常用的方法做介紹）
        雖然我個人是覺得這這介面很有改善空間 , 但是對基本的查詢來說夠用了.

        網址： http://docs.jquery.com/Core

        他把它的方法分成了幾大類
        jQuery Core  ,  Selectors  ,  Attributes , Traversing  ,Manipulation
        CSS  ,  Events , Effects , Ajax  , Utilities  , jQuery UI


        原則上主要特效都集中在 jQuery UI ,而其他的幾乎都是基本操作方法 .

        core是基本的迴圈取資料 , 以及提供plug-in擴充介面 ,
        plug-in 這比較進階 , 如果有餘力會寫一篇如何做自己的jquery plug-in.


        我們剛剛用的remove 則是 Manipulation 區的,
        這區主要都在講怎麼新增元素移除元素 , 甚至拿一個元素包在自己外面 ,
        或者把自己拿去加在別人裡面諸如此類 .

        基本上attributes css events selectors core manipulation 都非常常用 .

        比方說$("table").hide() 跟 style.display='none'的效果是一樣的.
              $("table").show() 則就是對應的顯示.

        remove跟hide的差異是 , 前者是show不回來的 .(從dom被移除了.)



      ＠等等 , 既然 selector 取的是網頁元素 , 那他是dom元素嗎?

        你或許會想知道 $("table").style.display='none' 的結果.

        答案會是 style is undefined , 因為$("table")是個 jquery Context ,
        他只能處理他提供給你的方法 , 那你如果比較習慣 js 的作法 ,

        不想查jquery 文件 ,有沒有搞頭？

        有！

        你可以透過 $("table")[0] 取得「第一個表格」的html dom物件 ,
        也就是 $("table")[0].style.display='none'會是可行的 .

        如果你想對所有裡面的元素做存取, 你也可以這麼做 .

        var jqTable=$("table");
        for(var i =0; i                 jqTable[i].style.display='none';
        }

        就純粹把它當個陣列來看.


      ＠超級賽亞 dom

        基本上我常戲稱 jquery context是超級賽亞 dom ,
        dom能做的事情他都能做 , 更能做它做不到的事情.

        而且他還可以幫你考慮跨平台的狀況 , 以後會介紹 .
        （糟 好像挖了不少洞給自己跳...）


      ＠雖然我只介紹了 tag selector , 我相信聰明如讀者您 ,
        一定也能猜到 id selector 跟 class selector 的寫法 .
        （如果有正妹的可以留電話我們私下教學 >////< （被女友拖去打））


        就跟css selector一樣 , 其實他還有支援一些css 3 selector才有的東西,
        比方說 "table:first" 可以取得第一個表格之類的 ,
        以及我目前還沒有提到的attr selector ,

        （以「[xxxx]」搜尋, 回傳網頁元件中含有xxxx屬性者 ,
          可看小弟之前寫的jquery Tooltip範例. http://0rz.tw/804x5 ）


        主要是因為這些東西要逐一介紹都可以寫上五千字了,
        我的目的只是做入門介紹 , 就不這麼「複雜」了.（淺笑）


      ＠selector 只有這樣嗎？ 好像沒什麼差？

        當然以目前講的這些東西 , 要取得目標物好像還差些什麼 ,
        我們總是常常會有這樣的狀況 , 比方說在特定table的 td 的裡面的div,

        （這樣由父結構到子結構的關係 , 有個 xml的 專有名詞xpath 可描述）


        我們也是可以混著用 , 如 $("#tableid td div") ,
        就表示搜尋 id叫 tableid 的元素裡面的 td tag裡面的 div tag.

        當然 除了父,子關係外 , 還有 「或」 的關係.

        比方說 $("#testid1,#testid2") 中間用逗號隔開表示都可以,
        也就是這樣會取得 id=testid1 跟 id=testid2的物件.


      ＠寫到這裡 , 這章應該是上看兩千字 , 主題不小 , 可能有點失焦 ,
        如果讀者有看不懂的 , 請儘管推文或回文 , 小弟將盡心解釋 ,
        看反應決定是不是要加一點介紹 ,


        selector 是我當初對jQuery最驚豔的一點,
        他把我從思考如何去寫更多不重複id的泥沼中給挖出來了 ,

        以及讓我在思考問題時能更加純粹 , 更能專注於我所該解決的問題.


        當然jQuery並不是唯一鑽研此道的 js lib ,
        諸如prototype.js , yui等 , 也都各有其優點 ,

        各位可選擇自己較為熟悉的 js lib 去運用 , 小弟只是獨鍾 jQuery的簡單.


      ＠體驗時間
        各位觀眾 , 今天我們要介紹的是 drag and drop .

        你還認為元素可以讓你在網頁上拖來拖去很炫嗎？ (draggable)
        這早就已經過時了 , 現在更流行的是拖過來還要放到別的地方去.（droppable)


        至於更有趣的 sortable , 就讓我賣個關子 ,
        留著當以後想不到要寫什麼範例的壓箱寶.

        http://tonyq.org/jqtalk/jq2_dragFrog.html

--
就這樣 , have a nice time ~
下一章要介紹的是  認識可怕的事件叢林

--
        What do you want to have ?  / What do you have?
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。
        My PPolis , My past. http://ppolis.tw/user/Tony

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247

推 shingoliang:Cool!首推~~寫得很不錯:)1F 08/08 03:15

推 flamerecca:有心推一個2F 08/08 07:29

推 ybite:"透過這個selector 所設定的樣式會影響到同id的元素"3F 08/08 11:50
→ ybite:這樣寫不好，因為規定上兩個元素不能同id...

推 ckw:推，蠻容易看懂5F 08/08 12:05

→ TonyQ:意思是#xxxx 會影響到 id xxxx 的元素, 我修一下用詞,6F 08/08 12:05

※ 編輯: TonyQ           來自: 220.128.219.202      (08/08 12:06)

推 uold:好文推~~7F 08/08 13:22

推 shadowken:比較好奇大大是用什麼工具來寫jQuery8F 08/08 13:38

→ TonyQ:notepad++ , eclipse , 我是做J2EE的環境再開發...9F 08/08 13:39
→ TonyQ:不過基本上這些都能提供有限的幫助 , 一年前碰過aptana ,
→ TonyQ:他對js的支援還不錯 , 有興趣可以去玩玩 .

→ shadowken:自己目前是使用eclipse+Aptana來寫,不知道有沒有更好的12F 08/08 13:39

→ TonyQ:我自己開發JS 是已經習慣用背跟查的 , 需要用的功能也不多,13F 08/08 13:48
→ TonyQ:所以這邊也是沒什麼特別的工具 ... ;P

推 ckmarkhsu:好文推一下:)15F 08/08 16:39

推 MrOrz:推好文 也推超級賽亞德姆(誤)16F 08/08 17:07

推 chrisQQ:推好文!!17F 08/08 17:51

推 shyangs:要不要發佈到blog、html、或維基教科書；18F 08/08 21:27
→ shyangs:bbs的特性會讓好文埋沒(搜尋引擎找不到)

→ TonyQ:我是特地發佈在這裡的 ,但有興趣者可具名轉載 . :)20F 08/08 22:37

推 dreamerXYZ:幫你推  雖然我還沒能力理解!21F 08/08 22:45

推 ot32em:真是JQuery界的孔子啊 讓我懂好多之前看英文DOC不懂的地方!22F 08/09 04:49

推 Kenqr:推！23F 08/09 13:57

推 tellies:辛苦了,在下也剛在學,謝謝您的說明24F 09/04 21:24

推 Arton0306:推！25F 09/09 14:50

※ 編輯: TonyQ           來自: 61.224.239.208       (12/15 23:46)

→ TonyQ:更新失效連結26F 12/15 23:46

---

看板 Web_Design

作者 TonyQ (沉默是金)
標題 [心得]從 js 到 jQuery 之三：可怕的事件叢林
時間 Sat Aug  9 02:57:09 2008

---

        感謝前兩篇各位版友的不吝支持 , 接下來要推出第三篇 ,
        還請各位版友多多指教、討論。︿︿


        希望看完這篇 , 你們能了解網頁上得事件有哪些 ,
        以及為什麼事件在跨平台這件事情上是件很棘手的事情.

        ────────────────────────────────

        繼「無所遁形的selector」一文體驗到的強大 jquery selector ,
        暫且讓我們放下 jquery 物件的各種attr css 的屬性不談 ,

        先來談談我們之前所講過 , javascript最重要的觸發點：事件.

        ────────────────────────────────

      ＠事件，網頁樂團中的鼓手。

        事件掌握著網頁上得所有節奏 , 就算你完全不使用任何javascript ,
        當你瀏覽網頁 , 就起碼有讀取(onload)跟離開（onunload）正在默默進行 ,

        當然要奏出美妙樂曲 , 還得要整個樂團的配合 ,  javascript 就是這整個
        事件中的指揮家 , 指揮著各項元素各司其職, 演出一場美妙的狂想曲.

        事實上 , 當我看到這個網頁時  , 才深深地體會js 的可能性.
        http://www.nihilogic.dk/labs/mario/mario_small_music.htm


      ＠事件聽起來是個通用名詞，那我們有哪些事件呢？

        事件一定綁定（binding）著一個 dom物件, 這是先介紹selector的理由。

        基本上大部分事件是所有元素通用的 , 比方說onmouseover , onclick等 ,
        也有些事件只有某些物件會使用 , 像是 onchange , onsubmit 等 .


        底下簡單列表 , 將我們今天的各大主角簡單列出來

        on click        物件被按下
        on change       物件內容改變（select,input text等form類型元件專用)
        on mouseover    滑鼠進入dom元件四周的那一剎那觸發
        on mouseout     滑鼠離開元件四周時觸發
        on mousemove    介於over跟out之間的所有移動行為（會頻繁觸發）
        on focus        當元件被點選 或者透過tab鍵取得焦點時觸發
        on load         在網頁最一開始讀取完成時執行 , 常用於body或iframe.
        on keydown      按下鍵盤按鍵時 ,主要用於body跟input text.
        on keyup        放開鍵盤按鍵時

        還有更多其他種類 可見此網頁詳細介紹 ,
        http://stuck.myweb.hinet.net/c/js/js_events.htm


      ＠這麼多種？ 我統統都會用到嗎？

        我自己常用的是前面七個 , 其中又以 click  mouseover mouseout load居多,
        各種事件常見的應用情境跟組合雖然非常有趣 , 但還是先留待以後再做介紹,

        我們這篇接下來要告訴大家的是 , 「什麼是事件」.


      ＠什麼？ 前面的介紹還不夠詳細嗎？

        乍看之下你似乎知道所有事情 , 但繼續耐心看下去 ,
        你會了解前面介紹的只是事件的一半左右而已 ,

        接下來我們要教你的仍然是書上所不常提到 , 但是非常有趣的事情.


      ＠不是就像click一樣 , 按下去就一個事件嗎？

        沒錯 , 在某些狀況下是這樣 , 你不需要了解任何事件的細節 ,
        就只是在對應的觸發時間點執行js 不需要任何其他資訊 .


        但是當你想在網頁上追蹤你的滑鼠游標時 , 當你想知道你按下的鍵盤按鍵
        究竟是哪一顆按鍵時 ,或者看完mario之後 ,
        你可能會有雄心壯志想做個網頁版的格鬥天王之類的 ,

        那你就需要一些關於事件的資訊.


      ＠事件紀錄者的歡喜與憂愁

        值得高興的事情是 , 瀏覽器早就幫你想到了這件事情 ,
        於是每個事件必定會伴隨著一個紀錄事件資訊的物件.（底下以event代稱）

        event物件會紀錄是誰觸發了這個事件（srcElement）,
        滑鼠游標移到哪，或者keydown按下的按鍵是哪一個(keycode)之類的。


        許多特效諸如tooltip , dragand drop 都是根據這些資訊做出來的 ,
        既然如此 , 那為什麼要說憂愁呢？


        身為一個有志氣的網頁設計師, 你應該會想要至少支援Firefox跟ie雙平台 ,
        或者甚至於像筆者我所在的公司有兩位同事是mac愛好者 , safari 也是我們
        需要考慮的對象.


      ＠能跨瀏覽器當然好呀 , why not?

        問題在於這些瀏覽器對於事件參數的支援都各有一些不同的解讀 ,
        就以取得 event物件來講好了 , ie 提供 window.event 可取得,
        firefox則需要透過function傳遞參數.

        而且事件提供的內容來講 , 更是各家都有所不同 ,

        像是要透過事件取得被綁定的對象是誰 , ie下是event.target,
        firefox下是 event.srcElement, 諸如此類的 .

        在你撰寫程式碼時需要時時注意,是否需要寫一些 if-else ,
        以達到不同瀏覽器一樣的效果.


      ＠看起來跨瀏覽器很麻煩...

        沒錯！所以有些人選擇只支援 ie體系 , ie only的是非不是我們所關心的 ,
        我們有更好的選擇！就是選用 jQuery當我們的平台媒介！

        在jQuery底下 , 常見瀏覽器有支援的事件元素 , 全部被整合為同樣的介面,
        而我們所關心的事件物件如何取得 , 則是透過function傳入param的方式.


        有興趣的朋友們可以分別用fx跟ie開這個sample頁 ,
        透過mousemove一窺事件的全貌.

        http://tonyq.org/test/testMousemove.html

        左右皆是將事件內容印出來的結果.

        左邊是jquery element的內容物 , 右邊是當前browser的內容物.
        可以發現fx跟ie底下右邊的資料會有所不同 , 左邊則是一致的.


        在大部分的狀況下 , jQuery 都將 跨平台的問題謹記在心,
        除了部份嚴重issue （ex. ie6 bgirame) 等需特別處理外 ,
        jQuery通常能達到足以令人滿意的跨平台效果.

        （之後應會有機會繼續介紹其他跨平台特性的部份。）


      ＠一個元素只能綁定一種事件嗎？

        答案當然是否定的 , 比方說我可能會希望 mouseover移動過inputtext,
        時該text自動取得焦點（focus） , text改變時自動做一些檢查(change).

        很多時候我們會用事件去呼叫別的元素執行事件 , 達到連環事件的效果.


      ＠可以在javascript中綁定事件嗎？

        你可以把 onclick 等參數視為 dom成員中的一種 ,
        賦予其對應的事件成員一個 function 物件.

        比方說 inputNode.onclick=function(){ alert("hi");};

        就是針對inputNode綁定onclick事件.

        但是透過 = 指定的話 , 之前綁訂的事件會被覆蓋 ,
        如果你希望是附加而非覆蓋的話 , 應該要透過 attachEvent的方式進行.

        這裡又有瀏覽器相容性的問題 attachEvent是ie only ,
        addEventListener 則是 firefox有支援的 .


      ＠天啊怎麼又來了！！難道就沒有跨瀏覽器的好解法？

        現在你知道為什麼我們要特地強調跨瀏覽器平台了吧（聳肩）

        別擔心 , 要綁定幾次都沒問題 , jQuery會幫我們處理好一切的.

        $("#ele").click(function(e){alert("hi");})
                .click(function(e){alert("hi");})
                .click(function(e){alert("hi");})
                .click(function(e){alert("hi");});

        你看 我們這不就綁定了四個事件給ele了嗎?
        (http://tonyq.org/test/testEventBinding.html )


     ＠咦？ $("#ele").click(event).click(event) ...?

        這是jquery的有趣特性之一 , 他幾乎所有成員都會回傳jquery物件本身,
        所以我們可以達成這種稱之為「method chaining」的效果.

        當然你想中規中矩的寫成
        $("#ele").click(function(e){alert("hi");});
        $("#ele").click(function(e){alert("hi");});

        也無妨 , 一切取決於你的習慣.

        當物件被click時  , 會按照綁定的順序依序觸發.
        （當你不想要時 , 可透過  $("#ele").unbind("click") 來解除所有事件.))


     ＠事件真是複雜 , 還有我應該知道的嗎？

        關於事件其實我們聚焦在基礎資料的介紹 , 因為我們認為
        你早晚會知道 hover事件 = mouseover + mouseout ,

        以及原來想要到處都擺個click+ajax的慾望是如此讓人興奮（害怕）.


        但是還有一件事情我們還沒有告訴你 , 那就是事件的相依性.
        在能見到的區域中 , body是所有元素的根源 , 相信你不會否認這句話 ,


        當你在頁面上綁定一個元素, （以下例中的 input button)

       
               

                       
               

       

        則當button被click時 , div跟body的onclick也會被觸發.
        因為button實際上也是div的成員 , div也會把它視為一體的觸發

        同樣的理由 , 所以對body也觸發 ,
        有些時候我們會需要用這個trick 實做一些事情.


      ＠那能不能讓他不要觸發上級的元素呢？

        可以 ,對事件方法 return false ; 告訴他我執行到這裡就結束.
        ex. $("[type=button]").click(function(e){return false;});


        相依性最常見的用途在於檢查表單資料是否正確填寫 ,
        我們可以透過
        $("form").submit(
                function(e){
                     if($("#inputdata").val()=="")  //如果某個input text是空白
                        return false; //我就不submit了
                }
        );


      ＠體驗時間
        我們今天介紹的是 jquery corner這隻plug-in ,
        可以幫你把區塊式的元件很輕鬆的加上圓角的效果 .

        http://tonyq.org/jqtalk/jq3_jqCorner.html


---
剛剛歷經pcman當掉跟差點睡著 的危機, 總算還是順利寫完了 ,
祝各位版友週末愉快..需要加班的也能早點休息 :)


最後再補一些注意事項 ,

例子大多是針對CLICK寫 , 不過其他的事件其實大同小異,
另外 js 使用過度有害網頁健康 , 請不要真的作成到處都click +ajax,

以及各種酷炫特效不斷充斥 , 大多數狀況下這樣會導致網頁執行起來有笨重的感覺.

--
        What do you want to have ?  / What do you have?
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。
        My PPolis , My past. http://ppolis.tw/user/Tony

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
※ 編輯: TonyQ           來自: 220.132.59.247       (08/09 03:01)

→ TonyQ:JQ Corner 官網 http://malsup.com/jquery/corner/1F 08/09 03:07

推 Allenguy:推2F 08/09 03:55

推 ot32em:推!3F 08/09 04:39

推 Kenqr:推！4F 08/09 14:03

→ TonyQ:我們下一篇要討論的是 attr /css 的getter跟setter5F 08/09 15:30
→ TonyQ:屬性與樣式-瀏覽器的真正戰場

推 ateclean:感覺下一篇會很熱血XD7F 08/09 18:03

推 Ramone:推 !8F 06/18 15:05

※ 編輯: TonyQ           來自: 61.224.239.208       (12/15 23:48)

→ TonyQ:修正連結9F 12/15 23:48

---

看板 Web_Design

作者 TonyQ (沉默是金)
標題 [心得]從 js 到 jQuery 之三 補充資料
時間 Sat Aug  9 23:10:52 2008

---

        由於本系列文章主題是「從js到jquery」 , 所以主要內容在於對比 js
        到 jquery之間 , 究竟改善了什麼 , jQuery究竟可以對我們有什麼助益 ,
        順便介紹jQuery的一些常用的plug-in.


        目前是預定一天一篇主題 , 主題目前規劃約十篇左右 ,
        主題從簡介js , 基本dom操作 , 到進階的元素瀏覽（Traversing） ,
        再到 effects 跟一些頁面操作 （manipulation）,

        我想 , 我的目標是希望讓它變得很有趣 . :)

        ────────────────────────────────

        礙於篇幅 , 個人經驗是bbs 適合閱讀的字數約800~1000字 , 約4-5頁 ,
        內容沒有辦法專注於 jQuery的介紹 , 而僅摘出筆者認為適合的內容,
        於是在有必要與討論互動的狀況下 , 另開補充資料來彌補介紹文章不足.


        本文開始.
        ────────────────────────────────

        本篇為列出jQuery各項常用事件的寫法 , 所作的簡單 jQuery Event
        操作說明(usage) .


        文件參考
        http://docs.jquery.com/Events
        文件中提到共39個function , 其中約有一半是trigger , 另一半則是 binder ,


        其中我僅列出一些基本的binder 跟 trigger 的用法 ,
        因為大部分的用法都大同小異 , 有需要時再依照本篇所介紹的規則去查詢吧！

        ────────────────────────────────

        click應該看膩了 , 我們用change來當例子

        change( )       Returns: jQuery
        Triggers the change event of each matched element.

        change( fn )    Returns: jQuery
        Binds a function to the change event of each matched element.


        jQuery事件裡面通常 , 有給他fn的就是 binder , 把事件綁定上去的,
        而通常沒有事件的就是trigger , 只呼叫某個元件的某個事件.


        比方說以下的範例
        -------------------------------------------------
        $("input[type=text]").change(
             function(e){
                  alert(" you modify the text");
             }
        );

        -------------------------------------------------
        來分析一下
                $("input[type=text]")
                        是要被綁定的jQuery對象 , 指網頁上的所有文字輸入框.

                function(e){ alert("..."); }
                        要綁定給 jQuery對像的事件 , 且綁定在 change事件上.
        -------------------------------------------------


    ＠關於事件...

        從這裡我們就可以有個基本問題 ,
        一定要這樣宣告事件不可嗎? 不能重複利用事件嗎？


        我們其實也可以這樣做

        -------------------------------------------------
        /*注意,這是個global function.*/
        function doSomething(e){
              alert(" you modify the text");
        }
        -------------------------------------------------
        $("input[type=text]").change(doSomething);
        -------------------------------------------------


    ＠還有別的寫法嗎？ 聽說javascript宣告方式很多元？

        沒錯 , 所以當然這樣做也是沒問題的.
        -------------------------------------------------
        var doSomething=function(){alert(" you modify the text");};
        $("input[type=text]").change(doSomething);

        ────────────────────────────────

    ＠用這些方法有什麼差異嗎？

        上面這些寫法是各種function的寫法 , 原則上沒什麼差異 ,
        除了最一開始的那種是沒有名字的函數物件以外 .

        另外就是要考慮到如果是全域function , 要注意到取名時別和別的事件同名.


        而想觸發元件的change 事件的方法就是 ,
        $("input[type=text]").change();

        給他空的參數內容就會自動看成trigger ,去觸發事件了,
        通常trigger會比較常用在submit跟focus , 當然也有其他的需要 ,

        比方說我們想模擬按鈕被按下的行為時.


    ＠還有什麼要注意的嗎？

        當然有一個特殊的事件不適用這個模式 ,
        hover( over, out )

        這個事件可以說是由 mouseover 跟 mouseout組合而成 ,
        他接收兩個事件變數 , over時執行第一個 , out時執行第二個 .


        另外就是 resize( fn ) 跟 scroll( fn ) 他不支援你直接去觸發這個事件 ,
        因為這是一種特別的行為 , 當然你還是可以用別的方式來triger他.

        比方說對它設定 css 寬高可以觸發resize之類的.


    ＠如果我想創造自己的事件...?

        其實 jQuery 支援自訂event , 所以有時我們也會用到底下這四個方法 .

        bind( type, data（可省略）, fn )
        one( type, data（可省略）, fn )
        trigger( type, data )
        unbind( type, data )


        以前面的例子來說 , 也可以寫成以下的形式.
        $("input[type=text]").bind("change",function(e){alert("modified");});

        至於data , 如果你給bind三個參數 （註1）,
        他會被當成參數傳遞 , 可以在 e.data 取得這個資料.


     ＠one看起來跟 bind好像？ 他們一樣嗎？

        沒錯 , 很好的觀察力 , one 幾乎跟 bind 一模一樣 ,
        只是他只會被執行一次就會自動unbind .

        而trigger則是對應的觸發者 , 所以你也可以binding一個非預設的event type,
        然後透過trigger去觸發該event , 雖然說實務設計上我自己很少運用這點.
        大概只會拿來對table做 "addRow" , "deleteRow" 之類的自訂事件吧

        unbind則是移除所有該類型的事件

     ＠我binding了三次 , 但我只想移除其中一個 , 可以嗎？


        答案是可以 , 但是你必需要採用 bind 方法綁定這個 function ,
        並且給他一個我們稱之為namespace的東西 , 再透過namespace unbind.

        這個困擾其實比較常發生在 plug-in的撰寫上 ,
        當你同時使用多個plug-in時 , 搞不好大家都要unbind某個元素的事件
        為了不互相影響 , 就得透過這樣的機制 .


        for example

        $("input[type=text]")
                .bind("change.first",function(e){alert("alert first");})
                .bind("change.second",function(e){alert("alert second");})
                .bind("change.three",function(e){alert("alert three");});

        $("input[type=text]").unbind("change.second");

        這樣就會只消掉 second , 而first跟three都留著了.


        這部份主要是參考  http://blog.ericsk.org/archives/836 ericsk前輩
        的介紹 , 有興趣的讀者可以前往閱讀.

        ────────────────────────────────

        註1.
          在這裡我們可以理解到 雖然javascript不支援多型(overloading) ,
          但是jQuery在設計上其實運用了不少多型技巧, 他靠得是內容,型別跟參數
          數量判定他屬於哪一種對象 , $ 這個init function更是運用的鬼斧神工.

---
這篇是補充資料 , 就不放體驗時間了. XD
沒想到又寫到一半睡著 , 放假果然是睡覺的好日子 , 來接著寫今天的主題好了.

--
        What do you want to have ?  / What do you have?
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。
        My PPolis , My past. http://ppolis.tw/user/Tony

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247

→ TonyQ:有需要滑鼠滾輪事件的 , 可參考 #18dIzABS (AJAX版).1F 08/09 23:11

推 gpmm:Push2F 08/09 23:16

修正一下錯字^^a
※ 編輯: TonyQ           來自: 220.132.59.247       (08/09 23:28)

推 ot32em:要帶肉干來繳學費了 (拜) 推推3F 08/10 01:11

推 shadowken:第一個範例應該是  且綁定在 change事件上吧@@"4F 08/10 09:12

yes 修改好了 , 感謝.
※ 編輯: TonyQ           來自: 220.132.59.247       (08/10 10:26)

---