web前端开发分享-css,js进阶篇

  一,css进阶篇:

  等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践

  经验,

  简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无

  从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信

  可以自己先写,写完之后在对比,以其来找寻自己的差距。结构是网站的骨架,如果

  写的不合理,将是bug产生的重要根源,所以学习分析大型网站的布局样式对初学者

  来说帮助是很大的。大多数初学者由于对技术的不自信,html结构往往写的很少,

  而且期望在少的结构上尽可能多的实现页面效果,这样无非加大了html结构所承载的

  样式属性,众多属性交织在一起就会容易产生bug。qq,sina,163三大官网撸一遍,

  基本是熟练了。

  二,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

  适当的看一些源码,比如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 源码阅读

  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

posted @ 2014-03-18 17:58  唸随爱  阅读(360)  评论(0编辑  收藏  举报