前端分享

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

时间: 2024-10-07 17:50:08

前端分享的相关文章

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

好程序员web前端分享HTML基础篇

好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML常用标记 一.本专业介绍.HTML相关概念,HTML发展历史 本专业介绍 移动前端/WEB前端

好程序员web前端分享定位锚点透明

好程序员web前端分享定位锚点透明 学习目标 1.position 定位属性和属性值 2.定位元素的层级属性 3.包含块的概念和应用 4.锚点连接的语法和应用场景 5.透明属性的应用 6.扩展:Flash和marquee(滚动字幕) 一.position 定位属性和属性值 position 定位属性,检索对象的定位方式:语法:position:static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/

好程序员web前端分享MVVM框架Vue实现原理

好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. ? 1.什么是MVVM呢? MVVM的简写是Model-View-ViewModel. 在过去的10年里面,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了HTML 和CSS文

好程序员web前端分享如何构建单页Web应用

好程序员web前端分享如何构建单页Web应用,首先我们来看一看单页应用是什么?所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验. 其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西.用各种JS框架,甚至不用框架,都是可

好程序员web前端分享Cookie知识

好程序员web前端分享Cookie知识,今天小编为大家带来了一篇新手必看干货,接下来让我们一起来看一看吧. 一.Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web 应用程序的实现. 针对上述的问题,网景公司的程序员创造了Cookie. 二.Cookie的传输 服务器端在实现Cookie标准的过程中,需要对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分: 1

好程序员web前端分享html中meta标签及用法详解

好程序员web前端分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看,Html中meta标签一.meta标签 含义 <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义了与文档相关联的名称/值对.二.meta 中常用属性 charset? (字符集) 说明:规

好程序员web前端分享HTML5常见面试题集锦四

好程序员web前端分享HTML5常见面试题集锦四1.为什么要初始化CSS样式?答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化.2.浮动元素引起的问题?答案:a. 父元素的高度无法被撑开,影响与父元素同级的元素b. 与浮动元素同级的非浮动元素会跟随其后c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构3.l

好程序员web前端分享HTML5与HTML之间有什么区别?

好程序员web前端分享HTML5与HTML之间有什么区别?很多没有学过HTML5大前端的同学,对HTML5并不了解,经常会提出疑问:HTML5与传统HTML有什么区别?今天,就为大家讲一下两者比较明显几个区别.首先,HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步提升. 接着,我们来看一下两者的声明文件类型: HTML:1.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"