開啟前端學習之路

前言

     第一次在博客園寫博客，寫寫自己開啟前端學習之路。應該是受邢師兄的影響吧，不得不說邢師兄人很好，學習也很認真，師兄的前端也是自學的，但是學的很好，大家可以看看我師兄的博客，http://www.cnblogs.com/allenxing/。之前只是聽師兄介紹過前端，自己也就慢慢開始學習，師兄說堅持寫博客很好，一直沒有開始寫，覺得自己水平不夠，怕自己寫不好。但想想，永遠不開始寫就永遠都不會，踏出第一步之后，堅持就會有成果的。文章中如果有任何錯誤的地方，歡迎大家糾正！一起學習，一起進步！這里向大家介紹個jQuery學習交流群：239147101。群里牛人很多，人也很好，大家可以互相交流學習。

正文

     在師兄的指導下，我先在w3c上開始學習html、CSS、JavaScript。可以說學習html是沒有困難的，之前在做過一個android課程的時候解析過一個xml文件，那個時候對於html就已經有所學習，相信如果是學習IT的，對於html學習都不會有困難的，就算不是專業的IT行業，也無需擔心，html很好學。接下來是CSS學習，CSS層疊樣式表，如果說html是對頁面進行布局，CSS就是對布局加各種樣式，讓頁面渲染的更加美觀漂亮。這部分的學習需要耐心，多動手寫寫，不然看完就很快會忘記。可能剛開始的時候自己根本不會怎么設計樣式，可以從開始模仿別人的樣式來。這里說個師兄告訴我的可以看別人樣式的方法，可能大家都知道，就當寫給對於前端不了解的同學看看。

Chrome下查看CSS樣式

在Chrome瀏覽器下按F12.就會出現如下的控制台：

在左上角的地方有個像放大鏡的圖標，可以點擊那個圖標，放到頁面中任何你想查看的元素上，下面它會自動跳轉到該元素對應的html代碼，右邊框框也會顯示改元素的CSS樣式。你可以在右邊框框改它的樣式，添加刪除、修改都可以，頁面會隨着你修改的而改變，當然，這只是暫時的，當重新刷新頁面時，它會回到開始的樣式。可以通過這樣來實踐的學習CSS，邊學邊查文檔。

       學習完CSS之后，我就學習Javascript,之前的html、CSS它們都是對頁面進行靜態的編輯。JavaScript就開啟了對頁面的動態效果，當然html5、CSS3現在也能產生各種非常漂亮的動畫效果。這個有待繼續的學習。現在目前也在學期JavaScript和JQuery.JavaScript的學習最初是通過看智能社的《JavaScript視頻教程》，Blue老師講的不錯，大家可以看看。看完之后對JavaScript可以來說有了個整體的了解和掌握，不過還是要看書會掌握的更牢的。這里我不介紹JavaScript具體的知識了，在接下來的博客中我會邊學習邊整理一個JavaScript系列博文。也在這希望大家關注我，一起學習進步！

設計自己的博客風格

       接下來我講講怎么設計修改自己的博文風格，相信大家都看到博客園博客風格各異吧，開始自己折騰了個半天，也想設計設計自己的博客，結果半天沒弄出個啥，經過師兄的提點之后才明白，再次說說師兄人好，呵呵。。。要設計自己的博客風格，在博客的管理——>設置中有頁面定制CSS代碼等，這里就可以寫自己的樣式了。按照上面介紹的查看原有的CSS方法，找到博客園原本寫好的元素class或id是什么，然后重新對它寫自己的CSS樣式，就可以設計自己的博客風格了。如果想申請JS權限，可以發郵件給博客園，會開通你的JS權限，就可以寫自己的JS代碼了。可以看我的一個生活雜談博文：下輩子，無論愛與不愛，都不會再見。里面就是我用來測試自己的博客風格的，大家可以看到里面的“引言”、“哎，好水”等就是我重新寫了CSS代碼。題目下面的類似索引的小標題等就是自己寫的JS代碼自動的生成的。這里貼出來代碼來吧，其實寫的很不好，和師兄寫的相差太遠了，但是還是先用着自己的吧，等后續JQuery學通了，再改改。后續也會繼續設計自己的博客風格。歡迎大家關注！

// JavaScript Document
<script type="text/javascript">
$(function(){
    var oDiv = document.getElementById('cnblogs_post_body');
    var oTitle = document.getElementById('centercontent').getElementsByTagName('h1')[0];
    
    var oChild = oDiv.childNodes;//cnblogs_post_body下的所有孩子節點
    var oUl = document.createElement('Ul');
    oTitle.appendChild(oUl);
    for(var i=0;i<oChild.length;++i)
    {
        var nodeName = oChild[i].tagName;
        if(nodeName=="H1")
        {
            
            oChild[i].setAttribute('class','__h1');
            oChild[i].setAttribute('id','h1_'+i);
            
            var oLi = document.createElement('Li');
            oLi.setAttribute('class','forTitles_h1');
            var oA = document.createElement('a');
            oA.setAttribute('href','#'+'h1_'+i);
            
            oA.innerHTML=oChild[i].innerHTML;

            oLi.appendChild(oA);
            oUl.appendChild(oLi);
            
        }
        else if(nodeName=="H2")
        {
            oChild[i].setAttribute('class','__h2');
            oChild[i].setAttribute('id','h2_'+i);
            var oLi = document.createElement('Li');
            oLi.setAttribute('class','forTitles_h2');
            var oA = document.createElement('a');
            oA.setAttribute('href','#'+'h2_'+i);
            
            oA.innerHTML=oChild[i].innerHTML;

            oLi.appendChild(oA);
            oUl.appendChild(oLi);
        }
    }
    
    
})();
</script>

代碼大家有興趣就看看吧，應該很容易理解。如有不理解的或者好的改進的，歡迎交流！這里說個小插曲吧，最開始的時候我不是用的JQuery的$(function(){});而是用的JavaScript最笨的方式window.onload=function(){};但是這個效果特別的不好，不過也是正常的，每次刷新頁面的時候要整個頁面加載完之后這些小標題才會出來，就會有一閃的瞬間，改進之后就不會這樣了。

$(document).ready()和window.onload的區別

百度查了下它們之間的區別，其實本質上沒有什么區別，都是指頁面載入完成后執行指定函數。但是二者還是有所不同的，使用window.onload=function(){}是希望在頁面被載入時執行function中的處理，但是這些JS代碼只有在頁面上的全部內容加載完成（包括頭部的banner廣告，所有圖片）的時候才會執行。將window.onload放在最上邊的原因就是當你第一次運行codes的時候，HTML document還沒有加載完成。而$(document).ready()卻不需要載入得這么“完全”。$(document).ready()是在DOM結構載入完后執行的，而 window.onload是得在所有文件都加載完后執行的，注意區別，一個是DOM加載完，一個是所有文件加載完。因此，ready肯定在onload 之前發生，頁面加載大或者多的圖片而使onload執行延后，使用jquery的ready可緩解此問題。JQuery的ready是指在頁面的DOM模型加載完后執行指定的函數。之所以經常用$(document).ready()來取代 window.onload，就是因為它是在dom模型加載完成后就執行，而window.onload是在dom元素加載完全后才執行。

我們可以用下面的代碼測試一下誰先執行：

window .onload =function (){
    alert ("welcome");
};
      
$(document).ready(function (){
    alert ("thanks for visiting!");
});

你會發現是 $(document).ready()先執行。

小結

好了，第一次寫這么長的博客，之前一直是在csdn上寫博客，也經常只是記錄自己遇到的問題，很少像這樣一個字一個字的寫這么多，寫了挺久的，不過感覺挺好，雖然沒有很多知識點，但是也算是一個總結吧！后續會繼續堅持寫博客的！文章如果有錯的地方，歡迎大家指出糾正！路漫漫其修遠兮，吾將上下而求索。。。

PS：最近有點忙，更是有點迷茫。。。