[Java教程]開(kāi)啟前端學(xué)習(xí)之路

0 2014-06-10 17:00:06

前言

第一次在博客園寫(xiě)博客，寫(xiě)寫(xiě)自己開(kāi)啟前端學(xué)習(xí)之路。應(yīng)該是受邢師兄的影響吧，不得不說(shuō)邢師兄人很好，學(xué)習(xí)也很認(rèn)真，師兄的前端也是自學(xué)的，但是學(xué)的很好，大家可以看看我?guī)熜值牟┛?#xff0c;http://www.cnblogs.com/allenxing/。之前只是聽(tīng)?zhēng)熜纸榻B過(guò)前端，自己也就慢慢開(kāi)始學(xué)習(xí)，師兄說(shuō)堅(jiān)持寫(xiě)博客很好，一直沒(méi)有開(kāi)始寫(xiě)，覺(jué)得自己水平不夠，怕自己寫(xiě)不好。但想想，永遠(yuǎn)不開(kāi)始寫(xiě)就永遠(yuǎn)都不會(huì)，踏出第一步之后，堅(jiān)持就會(huì)有成果的。文章中如果有任何錯(cuò)誤的地方，歡迎大家糾正！一起學(xué)習(xí)，一起進(jìn)步！這里向大家介紹個(gè)jQuery學(xué)習(xí)交流群：239147101。群里牛人很多，人也很好，大家可以互相交流學(xué)習(xí)。

正文

在師兄的指導(dǎo)下，我先在w3c上開(kāi)始學(xué)習(xí)html、CSS、JavaScript。可以說(shuō)學(xué)習(xí)html是沒(méi)有困難的，之前在做過(guò)一個(gè)android課程的時(shí)候解析過(guò)一個(gè)

Chrome下查看CSS樣式

在Chrome瀏覽器下按F12.就會(huì)出現(xiàn)如下的控制臺(tái)：

在左上角的地方有個(gè)像放大鏡的圖標(biāo)，可以點(diǎn)擊那個(gè)圖標(biāo)，放到頁(yè)面中任何你想查看的元素上，下面它會(huì)自動(dòng)跳轉(zhuǎn)到該元素對(duì)應(yīng)的html代碼，右邊框框也會(huì)顯示改元素的CSS樣式。你可以在右邊框框改它的樣式，添加刪除、修改都可以，頁(yè)面會(huì)隨著你修改的而改變，當(dāng)然，這只是暫時(shí)的，當(dāng)重新刷新頁(yè)面時(shí)，它會(huì)回到開(kāi)始的樣式。可以通過(guò)這樣來(lái)實(shí)踐的學(xué)習(xí)CSS，邊學(xué)邊查文檔。

學(xué)習(xí)完CSS之后，我就學(xué)習(xí)Javascript,之前的html、CSS它們都是對(duì)頁(yè)面進(jìn)行靜態(tài)的編輯。JavaScript就開(kāi)啟了對(duì)頁(yè)面的動(dòng)態(tài)效果，當(dāng)然html5、CSS3現(xiàn)在也能產(chǎn)生各種非常漂亮的動(dòng)畫(huà)效果。這個(gè)有待繼續(xù)的學(xué)習(xí)。現(xiàn)在目前也在學(xué)期JavaScript和JQuery.JavaScript的學(xué)習(xí)最初是通過(guò)看智能社的《JavaScript視頻教程》，Blue老師講的不錯(cuò)，大家可以看看。看完之后對(duì)JavaScript可以來(lái)說(shuō)有了個(gè)整體的了解和掌握，不過(guò)還是要看書(shū)會(huì)掌握的更牢的。這里我不介紹JavaScript具體的知識(shí)了，在接下來(lái)的博客中我會(huì)邊學(xué)習(xí)邊整理一個(gè)JavaScript系列博文。也在這希望大家關(guān)注我，一起學(xué)習(xí)進(jìn)步！

設(shè)計(jì)自己的博客風(fēng)格

接下來(lái)我講講怎么設(shè)計(jì)修改自己的博文風(fēng)格，相信大家都看到博客園博客風(fēng)格各異吧，開(kāi)始自己折騰了個(gè)半天，也想設(shè)計(jì)設(shè)計(jì)自己的博客，結(jié)果半天沒(méi)弄出個(gè)啥，經(jīng)過(guò)師兄的提點(diǎn)之后才明白，再次說(shuō)說(shuō)師兄人好，呵呵。。。要設(shè)計(jì)自己的博客風(fēng)格，在博客的管理——>設(shè)置中有頁(yè)面定制CSS代碼等，這里就可以寫(xiě)自己的樣式了。按照上面介紹的查看原有的CSS方法，找到博客園原本寫(xiě)好的元素class或id是什么，然后重新對(duì)它寫(xiě)自己的CSS樣式，就可以設(shè)計(jì)自己的博客風(fēng)格了。如果想申請(qǐng)JS權(quán)限，可以發(fā)郵件給博客園，會(huì)開(kāi)通你的JS權(quán)限，就可以寫(xiě)自己的JS代碼了。可以看我的一個(gè)生活雜談博文：下輩子，無(wú)論愛(ài)與不愛(ài)，都不會(huì)再見(jiàn)。里面就是我用來(lái)測(cè)試自己的博客風(fēng)格的，大家可以看到里面的“引言”、“哎，好水”等就是我重新寫(xiě)了CSS代碼。題目下面的類(lèi)似索引的小標(biāo)題等就是自己寫(xiě)的JS代碼自動(dòng)的生成的。這里貼出來(lái)代碼來(lái)吧，其實(shí)寫(xiě)的很不好，和師兄寫(xiě)的相差太遠(yuǎn)了，但是還是先用著自己的吧，等后續(xù)JQuery學(xué)通了，再改改。后續(xù)也會(huì)繼續(xù)設(shè)計(jì)自己的博客風(fēng)格。歡迎大家關(guān)注！

// JavaScript Document

View Code

代碼大家有興趣就看看吧，應(yīng)該很容易理解。如有不理解的或者好的改進(jìn)的，歡迎交流！這里說(shuō)個(gè)小插曲吧，最開(kāi)始的時(shí)候我不是用的JQuery的$(function(){});而是用的JavaScript最笨的方式window.οnlοad=function(){};但是這個(gè)效果特別的不好，不過(guò)也是正常的，每次刷新頁(yè)面的時(shí)候要整個(gè)頁(yè)面加載完之后這些小標(biāo)題才會(huì)出來(lái)，就會(huì)有一閃的瞬間，改進(jìn)之后就不會(huì)這樣了。

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

百度查了下它們之間的區(qū)別，其實(shí)本質(zhì)上沒(méi)有什么區(qū)別，都是指頁(yè)面載入完成后執(zhí)行指定函數(shù)。但是二者還是有所不同的，使用window.οnlοad=function(){}是希望在頁(yè)面被載入時(shí)執(zhí)行function中的處理，但是這些JS代碼只有在頁(yè)面上的全部?jī)?nèi)容加載完成(包括頭部的banner廣告，所有圖片)的時(shí)候才會(huì)執(zhí)行。將window.onload放在最上邊的原因就是當(dāng)你第一次運(yùn)行codes的時(shí)候，HTML document還沒(méi)有加載完成。而$(document).ready()卻不需要載入得這么“完全”。$(document).ready()是在DOM結(jié)構(gòu)載入完后執(zhí)行的，而 window.onload是得在所有文件都加載完后執(zhí)行的，注意區(qū)別，一個(gè)是DOM加載完，一個(gè)是所有文件加載完。因此，ready肯定在onload 之前發(fā)生，頁(yè)面加載大或者多的圖片而使onload執(zhí)行延后，使用jquery的ready可緩解此問(wèn)題。JQuery的ready是指在頁(yè)面的DOM模型加載完后執(zhí)行指定的函數(shù)。之所以經(jīng)常用$(document).ready()來(lái)取代 window.onload，就是因?yàn)樗窃赿om模型加載完成后就執(zhí)行，而window.onload是在dom元素加載完全后才執(zhí)行。

我們可以用下面的代碼測(cè)試一下誰(shuí)先執(zhí)行：

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

View Code

你會(huì)發(fā)現(xiàn)是?$(document).ready()先執(zhí)行。

小結(jié)

好了，第一次寫(xiě)這么長(zhǎng)的博客，之前一直是在csdn上寫(xiě)博客，也經(jīng)常只是記錄自己遇到的問(wèn)題，很少像這樣一個(gè)字一個(gè)字的寫(xiě)這么多，寫(xiě)了挺久的，不過(guò)感覺(jué)挺好，雖然沒(méi)有很多知識(shí)點(diǎn)，但是也算是一個(gè)總結(jié)吧！后續(xù)會(huì)繼續(xù)堅(jiān)持寫(xiě)博客的！文章如果有錯(cuò)的地方，歡迎大家指出糾正！路漫漫其修遠(yuǎn)兮，吾將上下而求索。。。

PS：最近有點(diǎn)忙，更是有點(diǎn)迷茫。。。

本文網(wǎng)址：http://www.shaoqun.com/a/93627.html

*特別聲明：以上內(nèi)容來(lái)自于網(wǎng)絡(luò)收集，著作權(quán)屬原作者所有，如有侵權(quán)，請(qǐng)聯(lián)系我們：admin@shaoqun.com。

前端

0

總結(jié)

以上是默认站点為你收集整理的前端开始学java_[Java教程]开启前端学习之路的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得默认站点網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將默认站点推薦給好友。