开启前端学习之路

前言

     第一次在博客园写博客，写写自己开启前端学习之路。应该是受邢师兄的影响吧，不得不说邢师兄人很好，学习也很认真，师兄的前端也是自学的，但是学的很好，大家可以看看我师兄的博客，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：最近有点忙，更是有点迷茫。。。