开启前端学习之路

前言

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