昨天我們簡(jiǎn)單的學(xué)習(xí)了一下關(guān)于web前端的入門應(yīng)該注意哪兩點(diǎn)祥山？
一個(gè)是css 巫玻，
一個(gè)是js
今天再來(lái)說(shuō)說(shuō)關(guān)于前端進(jìn)階的相關(guān)知識(shí)點(diǎn)吧
一，css進(jìn)階篇：?
等css那些事兒看了兩三遍之后，需要對(duì)看過(guò)的知識(shí)綜合應(yīng)用浩螺，這時(shí)候需要大量的實(shí)踐經(jīng)驗(yàn)拉盾，
簡(jiǎn)單的想法：把qq首頁(yè)全屏另存為jpg然后通過(guò)ps工具切圖結(jié)合css轉(zhuǎn)換成html桨菜，有無(wú)從下手的地方可以用firebug, chrome調(diào)試工具分析網(wǎng)站結(jié)構(gòu)樣式。如果技術(shù)熟練自信可以自己先寫捉偏，寫完之后再對(duì)比倒得，以此來(lái)找尋自己的差距。結(jié)構(gòu)是網(wǎng)站的骨架夭禽，如果寫的不合理霞掺，將是bug產(chǎn)生的重要根源，所以學(xué)習(xí)分析大型網(wǎng)站的布局樣式對(duì)初學(xué)者來(lái)說(shuō)幫助是很大的讹躯。大多數(shù)初學(xué)者由于對(duì)技術(shù)的不自信菩彬，html結(jié)構(gòu)往往寫的很少缠劝，而且期望在少的結(jié)構(gòu)上盡可能多的實(shí)現(xiàn)頁(yè)面效果，這樣無(wú)非加大了html結(jié)構(gòu)所承載的樣式屬性挤巡，眾多屬性交織在一起就會(huì)容易產(chǎn)生bug剩彬。qq,sina,163三大官網(wǎng)擼一遍，基本是熟練了矿卑。
這里分享一個(gè)css那些事兒的作者林小志運(yùn)營(yíng)的一個(gè)小站：http://www.tianyizone.com 里邊有一些新的特性的演示喉恋。
二，js進(jìn)階篇：
js進(jìn)階母廷，等妙味看的差不多轻黑，心里難免癢癢，看老師用盡可能少的代碼來(lái)實(shí)現(xiàn)了眾多以前沒(méi)法實(shí)現(xiàn)的動(dòng)態(tài)效果琴昆。然后自己想寫氓鄙，但不知道寫啥東西，下面就這個(gè)問(wèn)題做以建議业舍，寫這些東西的目的有這么幾個(gè)抖拦，一個(gè)是更加鞏固自己的知識(shí)，另外一個(gè)是積累面試的作品以及以后工作中的可復(fù)用的代碼片段：
1. 彈出層舷暮，
參照：http://aui.github.com/artDialog/
2. 日歷
參照：http://www.my97.net/dp/demo/index.htm mydate97
http://bbs.blueidea.com/thread-3043966-1-1.html 淘寶雙日歷
http://bbs.blueidea.com/thread-3101895-1-1.html 原生js日歷
3. 圖片輪換
SuperSlide2.1所有案例+TouchSlide1.0觸屏滑動(dòng)特效插件
http://bbs.blueidea.com/thread-3049362-1-1.html 輪換
http://bbs.blueidea.com/thread-3032305-1-1.html fgmcc經(jīng)典作品
4. 模擬滾動(dòng)條
參照：http://www.oschina.net/question/89964_62203
5. 模擬select态罪，聯(lián)動(dòng)
參照：
http://bbs.blueidea.com/thread-3009070-1-1.html
https://github.com/yessky/selector
強(qiáng)大的selector
http://aui.github.io/popupjs/doc/selectbox.html
糖餅 select
https://github.com/Johnqing/selectbox
模擬下拉框
6. js分頁(yè)
http://bbs.blueidea.com/thread-3105789-1-1.html
另外建議可以適當(dāng)?shù)目匆恍┰创a，看的目的無(wú)非是揭開(kāi)神秘框架背后的代碼實(shí)現(xiàn)下面，另外一個(gè)是開(kāi)闊自己的視野复颈，看了源碼之后，不僅感嘆到：原來(lái)js還可以這么玩沥割，而且還玩的這么炫耗啦。當(dāng)然有些源碼并不是依目前的積累能看懂的，比如jQuery机杜，是非持慕玻晦澀難懂，但為了方便分享椒拗，就全部羅列出來(lái)：
1. ext
http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html
ext 2.2 經(jīng)典50篇 -- 閱讀ext源碼
http://www.cnblogs.com/gotolnc/archive/2009/03/10/1408063.html
blog 資源匯總
http://yahaitt.iteye.com/blog/193271
透析Extjs的Ext.js源碼（五）分析繼承的實(shí)現(xiàn)
http://www.cnblogs.com/peter-pc/articles/1612591.html
Ext源代碼閱讀-001
http://linder0209.iteye.com/category/58900
源碼解讀系列文章(一直在看)
http://snandy.iteye.com/category/124734
snandy ext系列文件(準(zhǔn)備要看的)
http://liust1987.iteye.com/?page=2
ext源碼系列(準(zhǔn)備要看的)
http://linder0209.iteye.com/blog/1071818
ext源碼分析(準(zhǔn)備要看的)
http://blog.sina.com.cn/s/articlelist_1975505103_2_1.html
ext源碼分析( 比較零散似将，必看部分 )
http://extasp.net
extasp.net框架結(jié)構(gòu)
http://www.iteye.com/topic/195409 1111
ext繼承 iteye
http://yiminghe.iteye.com/category/64527
何玉的iteyey
http://lionheart.iteye.com/blog/232776
js 繼承
http://blog.csdn.net/zhangxin09
ext高手blog
http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html
js繼承
http://www.cnblogs.com/minakata/archive/2011/10/07/2199872.html
js高層繼承
http://www.iteye.com/topic/1047795
ext其它擴(kuò)展
http://www.iteye.com/topic/1120551?page=2
ext 2.3源碼分析，bbs格式（其中有event對(duì)象的整理）
http://www.cnblogs.com/iamlilinfeng/category/385121.html
ext源碼分析
http://setting.iteye.com/category/53053
ext基礎(chǔ)教程
http://andy-ghg.iteye.com/blog/1133456
ext4的改變
http://www.cnblogs.com/fangsui/archive/2012/04/18/2455537.html
ext4開(kāi)始
http://docs.sencha.com/ext-js/4-0/#!/api
ext在線api
http://www.aspxcs.net/HTML/094538320.html
ext體系結(jié)構(gòu)
http://linder0209.iteye.com/blog/865331
ext文件結(jié)構(gòu)
http://hi.baidu.com/study_discuss/blog/item/d3c28913f7cb64936438dbf8.html
extjs apply,applyif,override,extend 的區(qū)別
http://www.oecp.cn/hi/xuan/blog/page/2
ext源碼
http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658
ext4.0基礎(chǔ)概念與總結(jié)
2. prototype
http://blog.csdn.net/qgy18/article/details/673117
prototype源碼閱讀
http://www.cnblogs.com/NNUF/archive/2012/05/10/2494579.html
prototype 源碼解讀
http://www.cnblogs.com/cangqiong/archive/2007/12/21/1008801.html
prototype-1.4.0(轉(zhuǎn)載)
3. qwarp
http://dev.qwrap.com/resource/js/_docs/_youa/#/content.htm
api
http://www.cnblogs.com/jkisjk/tag/QWrap/
4. mootools
http://www.cnblogs.com/oneroundseven/archive/2011/05/10/2041996.html
mootools 源碼分析之 Core.js
http://suyang119.iteye.com/blog/1671065
Mootools源碼分析
http://hmking.blog.51cto.com/3135992/675856
MooTools 1.4 源碼分析 - Class 修正版
5. jquery?
http://james.padolsey.com/jquery/
jquery源碼查詢
http://www.cnblogs.com/edison1105/archive/2012/07/31/2617518.html
這些年陡叠、我收集的JQuery代碼?
http://hxq0506.iteye.com/blog/1046334
jquery1.6中的.prop()和.attr()異同
http://www.cnblogs.com/zyj469470971/archive/2012/02/17/2355890.html
jquery選擇器
http://www.cnblogs.com/sharpxiajun/archive/2011/09/22/2185566.html
臨摹jquery
http://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html
jquery原型關(guān)系圖
http://www.ihiro.org/blog/wp-content/uploads/2010/08/sizzle_flow1.jpg
jquery選擇器
http://www.cnblogs.com/lovesueee/archive/2012/10/18/2729829.html
jquery 1.8.2 源碼分析
http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html
jquery 1.6源碼分析
http://www.cnblogs.com/justany/archive/2013/01/22/2868501.html
jquery事件分析
http://www.cnblogs.com/hxling/
jQuery工作原理解析以及源代碼示例
jquery easyui 作者
http://rapheal.sinaapp.com/
jquery源碼閱讀
http://www.ccvita.com/121.html?
http://www.blog.highub.com/decoding-jquery/
jquery源碼閱讀英文資料
http://www.cnblogs.com/nuysoft/
jquery源碼閱讀玩郊，這位作者出了一本書(shū)叫jquery技術(shù)內(nèi)幕
http://item.jd.com/1080321026.html
http://adamed.iteye.com/category/207898
jq源代碼閱讀?
http://adamed.iteye.com/
jquery源碼分析
http://www.cnblogs.com/krouky/archive/2011/12/27/Krouky.html
jquery框架分析
http://www.cnblogs.com/yaozhiyi/archive/2013/01/12/2855583.html
jquery源碼 元素位置
http://www.oschina.net/news/46103/10-fresh-and-fantastic-jquery-plugins
10個(gè)jquery插件，里邊有個(gè)jquery滾動(dòng)條寫的不錯(cuò)枉阵。
http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385
http://www.miaov.com/2013/miaovideo/miaovideo.html
[知識(shí)點(diǎn)類] 妙味課堂：一起學(xué)習(xí)jQuery源碼【逐行分析jQuery源碼的奧秘】?
http://www.cnblogs.com/aaronjs/p/3310937.html
jquery 2.0.3源碼分析
http://www.cnblogs.com/aaronjs/p/3322466.html
jquery 2.0.3源碼分析 分析Sizzle引擎 - 編譯函數(shù)（大篇幅）
https://github.com/mythz/jquip
jquery 壓縮版
http://www.cnblogs.com/aaronjs/p/3342344.html
jQuery 2.0.3 源碼分析 回調(diào)對(duì)象 - Callbacks
http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385
jquery源碼解讀-妙味
http://sunnylost.com/article/jquery.core1.html
jQuery 源碼閱讀
http://www.cnblogs.com/yangjunhua/
淺析jQuery基礎(chǔ)框架?
http://www.ihiro.org/sizzle-custom-selector
sizzle源碼
http://www.cnblogs.com/52cik/p/jquery-source-position.html
淺談jQuery事件源碼定位
http://www.cnblogs.com/suprise/p/3622760.html
jquery 1.11源碼分析
http://blog.csdn.net/baozhifei/article/details/6959392
jQuery1.0源代碼分析之domManip方法（七）?
http://blog.csdn.net/lihongxun945/article/category/1588879
jquery2.0.4源碼分析
http://www.cnblogs.com/chyingp/category/546594.html
jQuery源碼分析系列
http://www.cnblogs.com/baochuan/archive/2012/11/21/2781118.html
通過(guò)jQuery源碼學(xué)習(xí)javascript（一）
http://pashanhu.github.io/show_by_tag.html?tag=jQuery
學(xué)習(xí)jQuery源碼
http://www.zhihu.com/question/19671522?rf=20617754
jQuery資料知乎
http://www.cn-cuckoo.com/deconstructed/jquery.html
李松峰的解構(gòu)
http://www.iteye.com/topic/786984
jquery1.43源碼分析之動(dòng)畫(huà)部分
http://www.iteye.com/topic/783260
jquery 隊(duì)列函數(shù)
http://www.cnblogs.com/guoyansi19900907/
jquery 源碼分析-思思博士?
6. Backbone
http://www.cnblogs.com/hao-dotnet/p/3444575.html
Backbone源碼閱讀手記
7. seajs
http://seajs.org/docs/
seajs
http://www.cnblogs.com/yinshen/p/3190429.html
seajs源碼分析
http://www.cnblogs.com/webstone/articles/3043119.html
seajs研究一二三
http://www.heiniuhaha.com/seajs/2012/08/14/seajs-combat/
seajs實(shí)戰(zhàn)參考 Supporting tagline
http://panxuepeng.github.io/seajslib
SeaJS 組件庫(kù)
https://github.com/seajs/seajs/issues
seajs issues
