|
網(wǎng)站建設(shè)是指使用標(biāo)識語言（markup language)，通過一系列設(shè)計、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網(wǎng)頁設(shè)計的目的就是產(chǎn)生網(wǎng)站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。
一、屬性控制
屬性是用來標(biāo)識一個對象或是一組對象的狀態(tài)，比如Radio的Checked表示的是當(dāng)前單選按鈕是否被選中。
如果我們選中一個單選按鈕時想顯示一個文本框，即 “當(dāng)選中單選按鈕時顯示文本框”,但大多數(shù)情況下我們并不是這樣處理，更多的是通過：
事件(onclick, onkeydown,…) ---> 判斷當(dāng)前狀態(tài)(Checked是否為True) ---> 調(diào)用相應(yīng)的Function(顯示或隱藏文本框)
這樣的處理方法非常被動，我們要為每一個事件加上相同的代碼來實現(xiàn)最終的目的，很有可能的是在Coding過程中的忽略的某些事件(比如onkeypress, onkeydown等)，并且程序的擴(kuò)展性不強(qiáng)。
對于一個屬性，特別是狀態(tài)屬性來說，它應(yīng)當(dāng)起到的是一個命令的作用，就像是CEO告訴你現(xiàn)在要去做什么，但這件事如何去做，用什么方法去做，這應(yīng)當(dāng)由你自己去決定。
因此，對于屬性的操作應(yīng)該盡量是
控制器：事件或其它Function ---> 設(shè)置屬性
處理器：屬性改變時 ---> 調(diào)用處理器(判斷屬性的狀態(tài)，做出相應(yīng)的處理)
通過屬性為分界線，我們把它分為了控制和處理兩個部分，這樣在整個屬性處理流程中靈活性會增加很多。
那我們應(yīng)該如何來實現(xiàn)這樣的想法呢？
１． onpropertychange
<html><head><script language="javascript">function changeBox(status){textbox.style.display = status ? "" : "none"}</script><script language="javascript" for="test" event="onpropertychange">var propName = event.propertyNamevar propValue = this[propName]switch(propName){case "checked":changeBox(propValue)break;}</script></head><body><input type="radio" id="test" name="radio" checked="true" /><input type="radio" name="radio" /><input id="textbox" /></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
２． Htc
在HTC中實現(xiàn)很容易，Microsoft已經(jīng)做好了相應(yīng)的接口，直接使用property元素的get和put方法就行了。
３． 自定義
我們需要做一個屬性控制器就能做到這一點，如：
function controlAttribute(對象，屬性，設(shè)置的值)
{
對象.屬性 = 設(shè)置的值
調(diào)用對象.綁定在屬性變化事件的函數(shù)(屬性)
}
所有的屬性設(shè)置通過屬性控制器去執(zhí)行，這樣就能做到和onpropertychange或是HTC一樣的效果了。 二、局部屬性
在某些時候可能幾個元素同時只使用一個屬性，比如select中的option，在大多數(shù)情況中他們只可能有一個selected為True，其余的都為Flase，那么我們可以把它看做在這一組的option中只有一個selected，在HTML代碼中我們也是這樣表示的。
所以就需要一個在局部區(qū)域使用的屬性來標(biāo)識，它就像是一個令牌一樣可以在不同的元素這間移動，這就確保了屬性的唯一性，并且若是想改變屬性的狀態(tài)時，你不須要考慮這個屬性在哪一個元素上，直接改變屬性的狀態(tài)。
下面我們看一下例子，由于IE6的在DOM支持上的不完善，所以寫這個程序過程中有一些附加的代碼，如要通過一個全局的TR變量記錄屬性所在的對象名稱(DOM中可以通過 屬性.parentNode 得到)等
<script>function findParentObj(obj, strTagName, strId){ while ( obj && !(!strTagName
obj.tagName == strTagName) && (!strId
obj.id == strId) ) obj = obj.parentElement return obj}var oTRbgColorOver = document.createAttribute("bgColor")bgColorOver.nodeValue = "red"bgColorOut = document.createAttribute("bgColor")bgColorOut.nodeValue = "transparent"function highlight(obj) { if (oTR) { oTR.removeAttributeNode(bgColorOver) oTR.setAttributeNode(bgColorOut) oTR.removeAttributeNode(bgColorOut) } oTR = findParentObj(event.srcElement, "TR") if (oTR) oTR.setAttributeNode(bgColorOver)}</script><table border="1" bgcolor="#FFFFFF" onclick="highlight(this)" onmouseover="highlight(this)"><tr> <td>序</td> <td>單位編碼</td> <td>單位名稱</td></tr><tr> <td><input type=text value=01></td> <td><input type=text value=DW001></td> <td><input type=text value=微軟公司></td></tr> <tr> <td><input type=text value=02></td> <td><input type=text value=DW002></td> <td><input type=text value=英特公司></td></tr> <tr> <td><input type=text value=03></td> <td><input type=text value=DW003></td> <td><input type=text value=中國公司></td></tr> </table>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]大多數(shù)人在上網(wǎng)的時候，都會瀏覽網(wǎng)頁提供給我們的信息。
|
