練習過程中遇到的問題,知識點總結
一、函數調用
1、由於很多時候JS是寫在head前面的,調用一些body里的元素ID,而此時body尚未載入,就會報錯,找不到該元素,所以寫成window.onload=function() {//調用一些元素..}寫在head的前面,這樣再調用就不會出錯了
2、不知道為什么按照下圖方式無法調用函數,所以寫成setTimeOut("function()",毫秒數);setTimeOut只執行一次,里面的函數一定要加引號!
二、瀏覽器對象
1、a標簽要寫成<a href="javascript:;" onClick="function();"></a>或<a href="javascript:function();"></a>
<a> 標簽的 href 屬性用於指定超鏈接目標的 URL,href 屬性的值可以是任何有效文檔的相對或絕對 URL,包括片段標識符和 JavaScript 代碼段。
這里的href="javascript:;",其中javascript:是偽協議,它可以讓我們通過一個鏈接來調用javascript函數。而采用這個方式 javascript:;可以實現A標簽的點擊事件運行時,如果頁面內容很多,有滾動條時,頁面不會亂跳,用戶體驗更好。
2、實際中常用注冊后自動跳轉頁面
<!--先編寫好網頁布局-->
<h1>操作成功</h1>
<span id="second" >5</span>
<span >秒后回到主頁</span>
<a href="javascript:back();">返回</a>
<script type="text/javascript">
var num=document.getElementById("second").innerHTML;
//獲取顯示秒數的元素,通過定時器來更改秒數。
function count(){
num--;
document.getElementById("second").innerHTML=num;
if(num==0){
location.assign("www.imooc.com");
}
}
setInterval("count()",1000);
//通過window的location和history對象來控制網頁的跳轉。
function back(){
window.history.back();
}
</script>
三、DOM對象,控制HTML元素
1、childNodes
節點之間的空白符,在firefox、chrome、opera、safari瀏覽器是文本節點,所以IE是3,其它瀏覽器是7,如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運行結果:(IE和其它瀏覽器結果是一樣的)
UL子節點個數:3 節點類型:1
2、訪問兄弟結點時,要去除空白節點
while (x && x.nodeType!=1){
x=x.previousSibling; //返回某個節點之前緊跟的節點(處於同一樹層級中)
}
3、
在看到這個編程練習的時候,我的第一反應是JS居然強大到可以代替JSP了。但仔細想想,其實這只是表面的刪除,增加,並沒有對數據庫的數據產生任何影響,所以,JSP和JS完全不一樣啊!233333
要求1的代碼如下
window.onload = function(){
var tr=document.getElementsByTagName("tr");
//通過for循環給每一個tr綁上鼠標上移時間和鼠標移除事件
for(var i=1;i<tr.length;i++)
{
bgcChange(tr[i]);
}
// 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
}
function bgcChange(obj)
{
obj.onmouseover=function(){
obj.style.backgroundColor="red";
}
obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}
要求2的代碼如下
function add1(){
var one=document.getElementsByTagName("table")[0];
var two=document.createElement("tr");
for(var i=0;i<3;i++){
var three=document.createElement("td");//一開始把three寫在for循環外面,無反應,把one的table換成tbody,可以增加一個。
three.style.border="1px solid red";
three.innerHTML="123";
two.appendChild(three);
}
one.appendChild(two);
}
四、總的編程練習==
慕課網上的JS進階篇最后的編程挑戰是做一個上圖的網頁
好吧,雖然我做過一個婚戀網站,里面也有一個類似的標簽頁,但時間已經很久了,感覺一天不編程手都會生,更別說距離網站完成已經過去了快一年半的時間。所以,讓我自己寫一個的時候,我的內心是害怕的。下面來說一說制作過程中的心得體會。
①基礎太差,最基本最常用的屬性記不住。比如li去掉點是list-style:none; 超鏈接去掉下划線是text-decoration:none;
②我寫div總是喜歡用id,覺得這樣能夠找到唯一的div,然后設置它的css。但其實最好的還是獨立的屬性用id來寫,共同的用class,比如這個標簽效果,就是上面的標簽有兩個狀態,即選中和未選中,對應兩種樣式,下面的內容相應的有兩個狀態,對應兩種樣式。所以選中和未選中寫成兩種樣式,然后再利用js改變通過id確定的div的className,進而改變其樣式
③這個JS其實蠻好理解的,不過我在寫的過程中搞錯了變量,導致一直在找錯,還找不出來,心急的快要爆炸。估計是腦子抽了,也沒認真思考,在for循環里一直用獲取到的b來選擇div,正確的答案是把b換成i,因為是i循環啊!!!i在循環啊!!!
Sanding原創,轉載請標注,thank you~