開啓前端學習之路

前言

     第一次在博客園寫博客，寫寫本身開啓前端學習之路。應該是受邢師兄的影響吧，不得不說邢師兄人很好，學習也很認真，師兄的前端也是自學的，可是學的很好，你們能夠看看我師兄的博客，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就開啓了對頁面的動態效果，固然html五、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>

View Code

代碼你們有興趣就看看吧，應該很容易理解。若有不理解的或者好的改進的，歡迎交流！這裏說個小插曲吧，最開始的時候我不是用的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!");
});

View Code

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

小結

好了，第一次寫這麼長的博客，以前一直是在csdn上寫博客，也常常只是記錄本身遇到的問題，不多像這樣一個字一個字的寫這麼多，寫了挺久的，不過感受挺好，雖然沒有不少知識點，可是也算是一個總結吧！後續會繼續堅持寫博客的！文章若是有錯的地方，歡迎你們指出糾正！路漫漫其修遠兮，吾將上下而求索。。。

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