學習javascript過程當中的心得體會

練習過程當中遇到的問題，知識點總結

1、函數調用

一、因爲不少時候JS是寫在head前面的，調用一些body裏的元素ID，而此時body還沒有載入，就會報錯，找不到該元素，因此寫成window.onload=function() {//調用一些元素..}寫在head的前面，這樣再調用就不會出錯了

二、不知道爲何按照下圖方式沒法調用函數，因此寫成setTimeOut("function()",毫秒數);setTimeOut只執行一次，裏面的函數必定要加引號！

2、瀏覽器對象

一、a標籤要寫成<a href="javascript:;" onClick="function();"></a>或<a href="javascript:function();"></a>

<a> 標籤的 href 屬性用於指定超連接目標的 URL，href 屬性的值能夠是任何有效文檔的相對或絕對 URL，包括片斷標識符和 JavaScript 代碼段。
這裏的href="javascript:;"，其中javascript:是僞協議，它可讓咱們經過一個連接來調用javascript函數。而採用這個方式 javascript:;能夠實現A標籤的點擊事件運行時，若是頁面內容不少，有滾動條時，頁面不會亂跳，用戶體驗更好。

二、實際中經常使用註冊後自動跳轉頁面

<!--先編寫好網頁佈局-->
<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>

 

3、DOM對象，控制HTML元素

一、childNodes

節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，因此IE是3，其它瀏覽器是7，以下圖所示:

若是把代碼改爲這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運行結果:（IE和其它瀏覽器結果是同樣的）

  UL子節點個數:3
  節點類型:1

二、訪問兄弟結點時，要去除空白節點

 

while (x && x.nodeType!=1){
x=x.previousSibling;  //返回某個節點以前緊跟的節點（處於同一樹層級中）
}

三、

在看到這個編程練習的時候，個人第一反應是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);
}

4、總的編程練習==

 

慕課網上的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~