[心得]從 js 到 jQuery 之四：屬性與樣式

[TonyQ (沉默是金)]

※ [本文轉錄自 Web_Design 看板]

作者: TonyQ (沉默是金) 看板: Web_Design
標題: [心得]從 js 到 jQuery 之四：屬性與樣式
時間: Sun Aug 10 04:09:23 2008


        副標容我再強調一下 , 瀏覽器的真正戰場,
        不僅僅是 瀏覽器相容 , 也代表著javascript真正發揮作用的地方.


        講到這章真的是讓筆者感到萬般無奈 , 從以前作表單必填欄位採取
        自訂attr策略,  到設定各種css屬性 , attribute 跟 css樣式 ,


        一直都是筆者寫純js時期的痛 , 且聽筆者慢慢道來.
        為了撰文方便 , 底下簡稱 attribute 為 attr.


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

      ＠ css 之前有提到過 , 那什麼是attr ?

        沒錯 , 迄今我們一直都還沒介紹過 attr , 所以當然得重新介紹一番.


        讓我們用底下一個簡單的img元素當例子
        <img src="hi.jpg" width="100" height="200" alt="hello img" />

        這是一個 <img> tag , 其中含有四個attr , 分別是 src width height alt.

        相信你已經了解屬性對於 tag 的重要性 , 每個元素能用的屬性都有所不同 ,
        比方說 <a> 的href , <img> <iframe> 會用的src等.


      ＠我怎麼知道有哪些tag可以用哪些attr?

        當然這些都有明文規範 , 可參考w3school 介紹的 html reference.

        http://www.w3schools.com/tags/default.asp
        點選tags進去後就會看到對應的必要(Required)跟選用(Optional)屬性了.


      ＠現在我知道 attr跟css了 , 那我們要討論什麼?

        承本系列首篇「javascript的魔力」一文中所提到的 , javascript大部分
        的時間都在異動元件的屬性跟資料 , 而這些東西全部都取決於我們本章要講
        的attr跟 css style.

        只要一個html 元素內容寫的再多 , 只要一個style="display:none;" , 就可
        以默默的躲在頁面的某個隱藏的位置.

        所以我們現在要來討論的是 attr/css 的 setter & getter


      ＠什麼是 setter & getter?
         setter就是指設定資料的方法 , getter就是指取得資料的方式 ,
         這只是個簡單的名詞 , 在此做個解釋.


      ＠ attr setter & getter

        我們先從 attr的setter跟getter下手 , 這是有原因的 , 因為style 其實
        也是個attr（想想attr的定義) , 後面會再提到另外獨立提css的理由.

        我們比較會常使用的attr , 不外乎是像是切換圖片（改變img的src）,
        或是把某個按鈕設定 disabled.( 變成按不下去的灰色 .)
        或是設定某個 text 只能輸入10個字等 (maxlength)

        或者是針對 style 這個attr中的 display設定 none 來隱藏元素,


        傳統js在大部分的狀況下 , attr就是dom物件的成員 ,
        舉個例子 imgNode.src='hi.gif';  //假設 imgNode是 <img>元素對應的物件

        當然 , 根據javacript 對物件的定義 , 這段也可以改寫成
        imgNode["src"]='hi.gif';   這兩個表示法是相同的 .

        當然這只針對於比較一般性的attr , 比方說當我們在寫 class 這個 attr時 ,
        就得改用 imgNode.className 來做設定.


        至於要取得資料 , 當然是就直接取 imgNode.src 的資料來用 .


      ＠聽說傳統 dom 有支援 setAttribute/getAttribute 的方法？

        沒錯 , 但是它的瀏覽器支援問題多多 , google "setattribute firefox" ,
        可以看到眾多網路上的朋友們為這個問題傷神的痕跡.

        主要的問題仍然是在於 className跟event 的綁定上 ,
        不是很適合透過 setAttribute / getAttribute .

        另外還有 style 這個屬性當然也有許多的麻煩 , 我們等到後面再談.

      ＠那jQuery怎麼做？

        setter
        $(imgNode).attr("src","hi.gif");      //註1
        getter
        $(imgNode).attr("src")       (e.g.  alert($(imgNode).attr("src"));)


        就這麼簡單 , 中間內容他都幫你做掉了 , 讓你完全不用針對js做出任何讓步,
        通常你只要記得html怎麼寫 , attr就怎麼下 , 你不需要思考 class這個attr
        到底是class還是className , 只要記得html是怎麼寫就ok了.

        以這例子來說.
        $(imgNode).attr("class","hello");
        $(imgNode).attr("className","hello");

        對jQuery來講是一樣的 .
        （當然 以處理class而言 , jQuery另提供addClass跟removeClass
          做增刪的動作 , 優點是可方便疊加/移除 特定class.)

        測試class attr 能在fx跟ie正常運作的簡單實例於此
        http://tonyq.org/jqtalk/jq4_ImgAttr.html

        註1：
         當$()傳入dom元件,會自動轉成該元件的jQuery物件 .


      ＠事件/css 也可以用attr setter/getter嗎？

        理論上可以 , 但目前仍有部份相容性問題 , 經測試
        attr("onclick",  "alert('hi')") 就只能在fx上運作,

        css的部份測試過底下的敘述是可行的 ,
        attr("style","border:1px solid red;position:absolute;left:50px;");

        但考慮到相容性問題 , 建議還是不要使用這種作法,
        舉例來講：$("img").attr("style","opacity:0.5;");
        由於opacity是ie6不支援的屬性, 在ie6底下就會有問題.


      ＠css setter/getter

        這在傳統 js coder來講我個人覺得簡直是惡夢...
        看看這張表 , http://www.w3schools.com/htmldom/dom_obj_style.asp

        為了設定一個 background-color , 你得了解他其實是得調用
        node.style.backgroundColor

        本來中間有 - 的屬性幾乎都改為駱駝式的寫法 , -拿掉 後面的字首字大寫,
        當然你也可以選擇 style.cssText , 就可以像是在寫 attr style 一樣,


        cssText的瀏覽器相容性問題我沒深究 , （事實上我很少用這個屬性）,
        因為要自己寫 style 的資訊實在是太麻煩也太累贅了 ,

        不僅要查表 , 有些功能還不見得支援都一致.

        （透明度 Opacity 就是一個例子 , 在ie6底下得透過filter實現 ,
          fx底下則是 css屬性就有支援 Opacity.


        諸多類似的問題 , 實在是畫面設計與程式設計師心中永遠的痛.


     ＠ jQuery怎麼做?

        他的寫法很簡單 , 我們都知道css是key-value成對的一組屬性 ,
        所以設值可以寫成類似這樣

        $("td").css("background-color","red").css("color","white");
        而取資料則是只給一個參數 (e.g. $("td").css("background") );


        一樣 , 在這裡又幫我們把思緒簡化回 純css領域的思考 ,
        再也不用去煩惱表怎麼查 , 資料怎麼取 ,

        甚至於他還會盡力幫我們達成瀏覽器相容.

        以前面提到的opacity 為例
        $("table").css("opacity","0.5");

        他就會自動幫我們處理在ie6底下跟fx底下的瀏覽器相容問題.


        雖然不見得完全能夠處理100%瀏覽器相容的問題 , 比方說我曾提過
        需要用  bgiframe 解決的select z-index 問題 , 但是我完全能了
        解他的確盡力了. ＝.＝a


      ＠其實總歸一句 , 本章要介紹的就是 attr 跟css兩個 jQuery function ,
        但是這兩個function實在是有其歷史意義 , 所以我特地花了些篇幅撰寫.

        而 jQuery所幫我們做的 , 在這一點上主要是幫我們簡化在html->js css->js
        這兩件事情的過程中 , 能夠讓我們的思緒更加一致 , 而免於被打斷的困擾.


        減少不需要額外記憶跟負擔的事情 , 對程式設計師來講是一件很重要的事情 .

        本章很顯然寫的是真的較為雜亂了些 , 希望各位讀者能了解 ,
        很多問題是經年累月的經驗所累積下來的 , 相信各位 js developer們 ,
        能夠了解為什麼attr 跟 style的設定是如此地繁瑣與充滿著雜訊 .

        而且 attr跟css setter 又幾乎是必做不可的設定之一 ,
        如 show跟hide 這兩個 css setter在jQuery也被做成獨立函式 ,
        足見其意義與使用頻率.

        我傾向於將事情交給專家 , jQuery既然研究過跨平台議題 ,
        那我將問題交給他 , 讓他去處理而僅在必要時注意細節 ,

        這也是我為什麼如此推崇 jQuery 這個穩定而簡單的lib的原因.


      ＠體驗時間
        本週要介紹的是 thick box .
        http://jquery.com/demo/thickbox/


        他是用來在一個頁面中 , 直接載入另一個頁面的解法,

        因為它是跨頁的處理 , 自己寫一個demo倒不如拿現成的 ,
        我直接用今年二月初在系上協助學弟妹做短期的java 課輔義工 ,
        當時所建立的網站來做sample .


        (網站失連中...)


        站中幾乎所有站內連結都是用thickbox效果做的 ,
        我也在原始碼上加上註解 , 請看我註解標示的區域了解thickbox如何操作.


        比較有趣的是在 thickbox你不需要去呼叫他,他是透過設定
        一個class , 他會在onload時去針對設定為該class的元素做處理.

        這也是plug-in實做時可以採用的一種方案.


        (btw , tab panel 純粹是透過 fadeIn fadeOut效果做到的 ,
               這兩個effects 也是jQuery內建的.
               head內的script都是 tab penl的效果而寫的 , 可以不用理會.)


---
因為這個主題很簡單 , 所以反而花了更多的時間整理資料 ,這是所謂的莫非定律嗎？:P
讓我們將目光繼續放在下一篇吧 ,  就算介紹的不見得很完善 , 嘗試總是一件好事.

下一篇要講的主題是  traversing , 網頁元素之間的巡覽 ,
撰文還有很多可以改善的地方 , 還請各位版友多多批評/指教 .o(_ _)o

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
推 ateclean:還沒睡呀.........
→ TonyQ:沒辦法 , 從十點寫到四點 , 今天真的進度慢的離譜 ..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
推 awpadam:等待續集(催稿)
推 bobju:推! 真是佛心來著的.
→ kosgroup:推
推 etman395:推
※ 編輯: TonyQ           來自: 61.224.239.208       (12/15 23:58)
※ 編輯: TonyQ           來自: 61.224.239.208       (12/15 23:59)
推 kakafood:感謝您的佛心分享XD