前端开始学java_[Java教程]开启前端学习之路

[Java教程]开启前端学习之路

0 2014-06-10 17:00:06

前言

第一次在博客园写博客,写写自己开启前端学习之路。应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前端也是自学的,但是学的很好,大家可以看看我师兄的博客,http://www.cnblogs.com/allenxing/。之前只是听师兄介绍过前端,自己也就慢慢开始学习,师兄说坚持写博客很好,一直没有开始写,觉得自己水平不够,怕自己写不好。但想想,永远不开始写就永远都不会,踏出第一步之后,坚持就会有成果的。文章中如果有任何错误的地方,欢迎大家纠正!一起学习,一起进步!这里向大家介绍个jQuery学习交流群:239147101。群里牛人很多,人也很好,大家可以互相交流学习。

正文

在师兄的指导下,我先在w3c上开始学习html、CSS、JavaScript。可以说学习html是没有困难的,之前在做过一个android课程的时候解析过一个

Chrome下查看CSS样式

在Chrome浏览器下按F12.就会出现如下的控制台:

bc91bb04e6e9c61e24c974e4440db8f2.gif

在左上角的地方有个像放大镜的图标,可以点击那个图标,放到页面中任何你想查看的元素上,下面它会自动跳转到该元素对应的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学通了,再改改。后续也会继续设计自己的博客风格。欢迎大家关注!

bc91bb04e6e9c61e24c974e4440db8f2.gif

bc91bb04e6e9c61e24c974e4440db8f2.gif// JavaScript Document

View Code

代码大家有兴趣就看看吧,应该很容易理解。如有不理解的或者好的改进的,欢迎交流!这里说个小插曲吧,最开始的时候我不是用的JQuery的$(function(){});而是用的JavaScript最笨的方式window.οnlοad=function(){};但是这个效果特别的不好,不过也是正常的,每次刷新页面的时候要整个页面加载完之后这些小标题才会出来,就会有一闪的瞬间,改进之后就不会这样了。

$(document).ready()和window.onload的区别

百度查了下它们之间的区别,其实本质上没有什么区别,都是指页面载入完成后执行指定函数。但是二者还是有所不同的,使用window.οnlοad=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元素加载完全后才执行。

我们可以用下面的代码测试一下谁先执行:

bc91bb04e6e9c61e24c974e4440db8f2.gif

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

View Code

你会发现是 $(document).ready()先执行。

小结

好了,第一次写这么长的博客,之前一直是在csdn上写博客,也经常只是记录自己遇到的问题,很少像这样一个字一个字的写这么多,写了挺久的,不过感觉挺好,虽然没有很多知识点,但是也算是一个总结吧!后续会继续坚持写博客的!文章如果有错的地方,欢迎大家指出纠正!路漫漫其修远兮,吾将上下而求索。。。

PS:最近有点忙,更是有点迷茫。。。

本文网址:http://www.shaoqun.com/a/93627.html

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。

前端

0

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

sss sss

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值