前端八個常見錯誤
第一, 檔案無法上傳。
下面上傳檔案的程式碼經常寫過,但是點選提交之後,卻發現沒有上傳檔案:
<formaction="xx.php" method="post">
<inputtype="file" name="test">
<inputtype="submit" value="提交" />
</form>
究其原因,是form的enctype屬性應該設定為:multipart/form-data
第二:把a標籤設定為按鈕之後,點選會重新整理頁面
在ide中敲入a,ide通過會自動補全程式碼,有時候會生成:
<ahref="">按鈕一</a>
我們是把這個a標籤設定為按鈕的,但是發現觸發js程式碼之後,頁面會重新整理。
要解決這個問題,要麼把href屬性去掉,要麼設定為#或者是javascript:void(0),比如href=”#”
第三:在元素還沒有構建之前,就獲取元素
在用jq的時候,有時候是直接是直接獲取某個元素:
<scripttype="text/javascript">
</script>
但在這之後,對v的操作都會出現異常。
這個是因為元素還沒有構建好。要麼是使用:
<scripttype="text/javascript">
$(function(){
varv=$('#test');
})
</script>
等文件完成解析之後,再獲取元素。要麼是在該元素之後,獲取:
<aid='test'>test</a>
<scripttype="text/javascript">
varv=$('#test');
</script>
第四:form不會提交
當form跟table接合在一起的時候:
<table>
<form>
<tr>
<td><inputtype="text" name="test"></td>
</tr>
</form>
</table>
會發現提交之後,name=’test’是沒有這個的。通過除錯會發現,form開始標籤跟結束標籤會擠在一起。
需要把form放在table之外,才不會有這個問題。
因此需要注意,不要把form放在table,tr之內,但是可以在td之內。
第五:網頁亂碼
當檔案是以某種編碼的方式儲存,而瀏覽器使用另外一種編碼解析的話,就會出現亂碼的問題,要解決這個問題,就應該在網頁中,明確給出這個檔案是以什麼編碼儲存的。
如:
<metahttp-equiv="Content-type" content="text/html;charset=UTF-8"/>
第六:文件模式
文件模式常見有兩種:過度、嚴格和框架
使用不同的DTD不會影響CSS,但是會影響佈局。
原因是過渡比嚴格多了一些佈局相關的元素(center等等)和一些屬性(align等等)。
而這些,都是會影響佈局的。因此使用不同的文件模式,會看起來不同。
第七:setTimeout不會工作了
如下程式碼:
<scripttype="text/javascript">
functionhaha(){
functiontest(){
alert(123);
}
setTimeout('test()',100);
}
haha();
</script>
這是setTimeout並不會起作用,究其原因,就是setTimeout呼叫之後,並不會立即執行。而在js中,函式也是變數,在函式內定義函式,等於這個函式是區域性函式。因此,在setTimeout中,呼叫的函式,必須是全域性函式。
第八:一張大圖,分成多張小圖,速度會變快
盲目相信某些作者的信條是錯的。網頁整體速度往往(這裡說往往,不是說絕對)浪費在來回傳輸的過程之中,而分成多張小圖,會大大增加來回傳輸的時間,因此速度反而比傳一張大圖來得慢,即使是長連結。
現在很多網站,都使用精靈圖,來把多張小圖合成一張大圖,減少來回傳輸的次數,從而減少整體的傳輸時間。