2. web前端開發分享-css,js進階篇

一，css進階篇：  

等css哪些事兒看了兩三遍以後，須要對看過的知識綜合應用，這時候須要大量的實踐經驗，

簡單的想法：把qq首頁全屏另存爲jpg而後經過ps工具切圖結合css轉換成html，有無從下手的地方能夠用firebug, chrome調試工具分析網站結構樣式。若是技術熟練自信能夠本身先寫，寫完以後在對比，以其來找尋本身的差距。結構是網站的骨架，若是寫的不合理，將是bug產生的重要根源，因此學習分析大型網站的佈局樣式對初學者來講幫助是很大的。大多數初學者因爲對技術的不自信，html結構每每寫的不多，並且指望在少的結構上儘量多的實現頁面效果，這樣無非加大了html結構所承載的樣式屬性，衆多屬性交織在一塊兒就會容易產生bug。qq,sina,163三大官網擼一遍，基本是熟練了。

這裏分享一個css哪些事兒的做者林小志運營的一個小站：http://www.tianyizone.com　裏邊有一些新的特性的演示。

二，js進階篇：

js進階，等妙味看的差很少，內心不免癢癢，看老師用盡量少的代碼來實現了衆多之前無法實現的動態效果。而後本身想寫，但不知道寫啥東西，下面就這個問題作以建議，寫這些東西的目的有這麼幾個，一個是更加鞏固本身的知識，另一個是積累面試的做品以及之後工做中的可複用的代碼片斷：

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觸屏滑動特效插件

http://bbs.blueidea.com/thread-3049362-1-1.html　輪換

http://bbs.blueidea.com/thread-3032305-1-1.html fgmcc經典做品

 

4. 模擬滾動條

參照：http://www.oschina.net/question/89964_62203

 

5. 模擬select，聯動

參照：

http://bbs.blueidea.com/thread-3009070-1-1.html

https://github.com/yessky/selector

強大的selector

http://aui.github.io/popupjs/doc/selectbox.html

糖餅 select

https://github.com/Johnqing/selectbox

模擬下拉框

 

6. js分頁

http://bbs.blueidea.com/thread-3105789-1-1.html

 

另外建議能夠適當的看一些源碼，看的目的無非是揭開神祕框架背後的代碼實現，另一個是開闊本身的視野，看了源碼以後，不只感嘆到：原來js還能夠這麼玩，並且還玩的這麼炫。固然有些源碼並不時依目前的積累能看懂的，好比jQuery，是很是晦澀難懂，但爲了方便分享，就所有羅列出來：

1. ext

http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html

ext 2.2 經典50篇 -- 閱讀ext源碼

http://www.cnblogs.com/gotolnc/archive/2009/03/10/1408063.html

blog　資源彙總

http://yahaitt.iteye.com/blog/193271

透析Extjs的Ext.js源碼（五）分析繼承的實現

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系列文件(準備要看的)

http://liust1987.iteye.com/?page=2

ext源碼系列(準備要看的)

http://linder0209.iteye.com/blog/1071818

ext源碼分析(準備要看的)

http://blog.sina.com.cn/s/articlelist_1975505103_2_1.html

ext源碼分析( 比較零散，必看部分 )

http://extasp.net

extasp.net框架結構

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其它擴展

http://www.iteye.com/topic/1120551?page=2

ext 2.3源碼分析，bbs格式（其中有event對象的整理）

http://www.cnblogs.com/iamlilinfeng/category/385121.html

ext源碼分析

http://setting.iteye.com/category/53053

ext基礎教程

http://andy-ghg.iteye.com/blog/1133456

ext4的改變

http://www.cnblogs.com/fangsui/archive/2012/04/18/2455537.html

ext4開始

http://docs.sencha.com/ext-js/4-0/#!/api

ext在線api

http://www.aspxcs.net/HTML/094538320.html

ext體系結構

http://linder0209.iteye.com/blog/865331

ext文件結構

http://hi.baidu.com/study_discuss/blog/item/d3c28913f7cb64936438dbf8.html

extjs apply,applyif,override,extend 的區別

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基礎概念與總結

 

 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(轉載)

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原型關係圖

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源碼閱讀，這位做者出了一本書叫jquery技術內幕

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個jquery插件，裏邊有個jquery滾動條寫的不錯。

http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385

http://www.miaov.com/2013/miaovideo/miaovideo.html

[知識點類] 妙味課堂：一塊兒學習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引擎 - 編譯函數（大篇幅）

https://github.com/mythz/jquip

jquery 壓縮版

http://www.cnblogs.com/aaronjs/p/3342344.html

jQuery 2.0.3 源碼分析 回調對象 - 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基礎框架 

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

經過jQuery源碼學習javascript（一）

http://pashanhu.github.io/show_by_tag.html?tag=jQuery

學習jQuery源碼

http://www.zhihu.com/question/19671522?rf=20617754

jQuery資料知乎

http://www.cn-cuckoo.com/deconstructed/jquery.html

李鬆峯的解構

http://www.iteye.com/topic/786984

jquery1.43源碼分析之動畫部分

http://www.iteye.com/topic/783260

jquery 隊列函數

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實戰參考 Supporting tagline

http://panxuepeng.github.io/seajslib

SeaJS 組件庫

https://github.com/seajs/seajs/issues

seajs issues

 

---

前端開發qq羣：492107297，禁止閒聊，非喜勿進~！