※ [本文轉錄自 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

--
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:58)
※ 編輯: TonyQ 來自: 61.224.239.208 (12/15 23:59)