作者：yaohaixiao 時(shí)間： 2008-06-12 文檔類型：原創(chuàng) 來自：藍(lán)色理想
第 1 頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [1] 第 2 頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [2] 第 3 頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [3] 第 4 頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [4] 第 5 頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [5]
我這里先把代碼寫給大家看看（省略了部分代碼）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</title><link href="css/article.css" rel="stylesheet" type="text/css" media="all" /><script language="javascript" type="text/javascript" src="js/common.js"></script></head><body><div id="container"><div id="topbar"><h1><a target="_blank" title="海嘯的地盤--享受生活，享受每一天！">海嘯的地盤--享受生活，享受每一天！</a></h1><div id="search-bar"><form name="frmsearch" id="frmsearch" action="" method="post"><label for="keyword">站內(nèi)搜索：</label> <select id="topics"> <option value="0">全部主題</option> <option value="1">(X)HTML</option> <option value="2">CSS</option> <option value="3">Javascript</option> <option value="4">XML</option> <option value="5">ASP/ASP.NET</option> </select><input type="text" name="keyword" id="keyword" value="請輸入搜索關(guān)鍵字" maxlength="60" /><input type="reset" name="btnsearch" id="btnsearch" value="開始搜索" /></form> </div> </div><ul id="nav"> <li><a href="#2">ARTICLES</a></li> <li><a href="#2">TOPICS</a></li> <li><a href="#2">ABOUT</a></li> <li><a href="#2">CONTACT</a></li> <li><a href="#2">GESTBOOK</a></li> <li><a href="#2">FEED</a></li> </ul> <h2>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</h2><div id="article-info">作者/程序設(shè)計(jì)：<a href="yaohaixiaomailto:haixiao_yao@yahoo.com.cn">yaohaixiao</a> 來源：<a href="<h3>代碼篇</h3> <p> 之前整理發(fā)表了<a target="_blank">《XMLHTTPRequest的屬性和方法簡介》</a>,它Ajax要使用的核心的技術(shù)之一，現(xiàn)在就來實(shí)際運(yùn)用它。這個Ajax標(biāo)簽導(dǎo)航，是我很久前就寫的一個腳本，很實(shí)用的（還被很多網(wǎng)站收錄了哦），現(xiàn)在拿它來做實(shí)例講解吧！當(dāng)然個人能力有限，有什么不對的地方還請多包含! </p> <p> 演示地址：<a target="_blank">http://www.yaohaixiao.com/code/ajaxtab/index.htm</a> </p> <p> 效果大家看到了，核心功能有：<br /> 1、將當(dāng)前選中標(biāo)簽以特殊的樣式顯示<br /> 2、將異步加載的頁面信息顯示到指定的DOM節(jié)點(diǎn)中 </p> <p> 我們來看看處理腳本的代碼吧： </p><div class="code-title">程序代碼：ajaxtab.js</div> <div class="js code" name="code" id="js-code"><!--<br />// 判斷是否支持ActiveX<br />var useActiveX=(typeof ActiveXObject != "undefined"); <br />// 判斷是否支持DOM<br />var useDom=document.implementation && document.implementation.createDocument;<br />// 判斷是否支持XMLHttpRequest對象<br />var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />// XMLHttpRequest對象版本<br />var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];<br />// DOM對象版本 <br />var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; <br />/* ===========================================================<br />* 函數(shù)名稱：$(i)<br />* 參數(shù)說明：i - 目標(biāo)節(jié)點(diǎn)名稱<br />* 函數(shù)功能：獲取指定的目標(biāo)DOM節(jié)點(diǎn)<br />* 返 回 值：返回要搜索的目標(biāo)DOM節(jié)點(diǎn)<br />* 使用方法：$("frmSearch")<br />============================================================ */<br />function $(i){<br /> if(!document.getElementById)return false;<br /> if(typeof i==="string"){<br /> if(document.getElementById && document.getElementById(i)) {<br /> // W3C DOM<br /> return document.getElementById(i);<br /> }<br /> else if (document.all && document.all(i)) {<br /> // MSIE 4 DOM<br /> return document.all(i);<br /> }<br /> else if (document.layers && document.layers[i]) {<br /> // NN 4 DOM.. note: this won't find nested layers<br /> return document.layers[i];<br /> } <br /> else {<br /> return false;<br /> }<br /> }<br /> else{return i;}<br />}<br />//--></div> <p>id="news" - news就是我們的導(dǎo)航標(biāo)簽的ID；<br />id="newsCnt" - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn)；<br />class="first" - first當(dāng)前(第一個)標(biāo)簽的樣式；<br />id="news-0" - news-0 通過”-“分開，我們就分別可以得到news(導(dǎo)航標(biāo)簽ID)，0（標(biāo)簽[li]在導(dǎo)航標(biāo)簽中的索引值）<br /><a href="news/news0.htm">網(wǎng)站重構(gòu)</a> - 超鏈接<br /><span></span> - 標(biāo)簽間的分割線<br /> </p> <p>我羅列的這些東西，相信大家開始看出了些頭緒了，呵呵，不過別急！在我們看處理的腳本之前，先讓我們來看看導(dǎo)航標(biāo)簽的樣式，主要是看看我們對分割線的處理(一點(diǎn)CSS處理的技巧)。 </p> <p>本來想偷個懶，讓大家看我上邊說的那篇文章，想想也就是Ctrl+C&Ctrl+V,都貼出來吧！呵呵�。。� </p> <p>不過還沒有完，最后要說的就是innerHTML這個特性，這里我們還要感謝微軟啊，innerHTML就是它的專利，我們就是用它來改變指定DOM內(nèi)的HTML字符串的，而不用刷新頁面。詳細(xì)的信息大家還是google一下吧，我也要休息下�。�！喝口茶先��！^-^！ </p> <p>以上講了這么多，我們最后來看看，我們這個ajax標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧： </p> <ol><li>XHTML</li><li>CSS</li><li>Javascript</li><li>DOM</li><li>XMLHttpRequest對象</li><li>innerHTML</li> </ol> <p>還有XML，我們這個例子沒有涉及到。東西雖小，包含的（web前端開發(fā)）知識可是都用到了啊，我把我會的點(diǎn)東西都端出來了（要失業(yè)了），呵呵！ </p> <p>當(dāng)然我很喜歡跟大家多交流，以后有時(shí)間，我們在來談?wù)凜SS的HACKS技巧，Javascript DOM編程等等的，今天就收工了，謝謝捧場先！�。� </p> </div><p id="copyright"> Copyright © 2007-2008 <strong><a href="yaohaixiao.comhttp://www.yaohaixiao.com">yaohaixiao.com</a></strong>, All rights reserved. Powered By: <a href="Yaohaixiaomailto:haixiao_yao@yahoo.com.cn">Yaohaixiao</a></p></body></html>
看出來什么沒有？（代碼是很多，呵呵�。┛赡艽蠹乙呀�(jīng)發(fā)現(xiàn)，整個頁面里基本上都是用戶要看的數(shù)據(jù)，其中只包含了很少（必要）的布局(XHTML)標(biāo)簽（請?jiān)试S我這么說）。整個頁面基本都是由最基礎(chǔ)的h1~h6、p、ul、ol、li、form、div標(biāo)簽來實(shí)現(xiàn)的。
說到這里就要講到我在前面提到的“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”，看看我的這個例子做到了沒有？
結(jié)構(gòu)清晰--也就是我們常說的，XHTML標(biāo)簽要結(jié)構(gòu)化（語意化）。
出處：藍(lán)色理想 責(zé)任編輯：bluehearts
上一頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [1] 下一頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
藍(lán)色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨(dú)家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請不要盜鏈到本站，且不準(zhǔn)打上各自站點(diǎn)的水印，亦不能抹去我站點(diǎn)水印。
特別注意：本站所提供的攝影照片，插畫，設(shè)計(jì)作品，如需使用，請與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請與我們聯(lián)系，我們將立即刪除修改。
第 1 頁 
第 2 頁 WEB前端開發(fā)經(jīng)驗(yàn)總結(jié) [2]
