一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative['rɛlətɪvli] ,absolute['æbsəlut] ,fixed[fɪkst],inherit[ɪn'hɛrɪt] 的区别与联系以及他们的应用场景,英文单词确定要能准确发音,方便与面试官探讨时准备的传达你要表达的意思),剩下需要更多的练习以应对不同的设计的布局要求,然后遇到问题解决问题,成长就是需要一个这样跌宕起伏的过程。由于互联网资源很丰富,反而让初学者迷失了方向,下面推荐几款比较经典并且有特点的专题页面,可以进行分析,学习,模仿:

1. 新闻类型页面:

a. http://news.qq.com/  新闻综合页面

b. http://news.qq.com/society_index.shtml  新闻列表页面

c. http://news.qq.com/a/20131210/000409.htm  新闻详细页面

d. http://coral.qq.com/1004281511  评论页面

2. 图片类型页面:

a. http://news.qq.com/photo.shtml  图片综合页面

b. http://news.qq.com/l/photon/ztlf/list2013089143749.htm  图片列表

c. http://news.qq.com/a/20131211/003572.htm 图片详细

这个插件是用jquery写的,有兴趣的同学学习一下其源码

3. 股票类型页面

a. http://finance.qq.com/hk/  股票综合页面

b. http://finance.qq.com/hk/mjls/news.htm  股票中专家列表

4. 商城类:

a. http://www.tmall.com 天猫首页

http://brand.tmall.com/?spm=3.7095809.20000004.1.uVcdqb 品牌街

http://miao.tmall.com/?spm=3.7095809.20000004.2.uVcdqb 喵鲜生

http://vip.tmall.com/vip/index.htm?spm=3.7095809.20000004.3.uVcdqb 积分聚乐部

http://3c.tmall.com/?spm=3.7095809.20000004.4.uVcdqb 电器城

http://shoufa.tmall.com/?spm=3.7095809.20000004.5.uVcdqb 新首发

http://chaoshi.tmall.com/?spm=3.7095809.20000004.6.uVcdqb 天猫超市

http://www.tmall.com/yao?spm=3.7095809.20000004.7.uVcdqb 医药馆

b. http://www.jd.com 京东

http://channel.jd.com/fashion.html 品牌街

http://channel.jd.com/newarrivals.html 新品

http://channel.jd.com/topshops.html 热销榜

http://sale.jd.com/act/VgmuCbZvEzp.html 潮流资讯

c.  http://www.51buy.com 易迅

d. http://www.dangdang.com 当当

f.  http://www.z.cn 亚马逊

类似的页面还有很多就不一一列举:

http://www.hao123.com

http://gouwu.hao123.com/sc/

二. js还有很多很多东西要学习了解。js是基于原型的OOP语言,想进一步了解纯的OOP思想,推荐了解一下JAVA。JAVA他本身除了是一个纯OOP语言之外,还有很多后台开发的东西可以一拼了解。然后关于构造函数,原型,实例等等之间的联系需要搞的明白一点。

一、构造器(constructor)

1、constructor始终指向创建当前对象的构造(初始化)函数。

http://www.cnblogs.com/jikey/archive/2011/05/13/2045005.html

2、每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数

From: http://blog.csdn.net/kittyjie/article/details/4380918

其实在JS中构造器就是函数,函数就是构造器,对象实例就是通过var obj=new 函数();这种形式新建出来的实例。区别这些,在说prototype和constructor。从上面的英文中可以看出,prototype是个对象,里面定义了一个constructor,那么我们可以推论出,constructor是对象实例的属性!而不是函数(构造器)的属性。反过来,prototype是函数(构造器)的属性,而不是实例的属性!

我要强调一点就是__proto__是实例和Person.prototype之间的关系,而constructor是实例和Person之间的关系

http://blog.csdn.net/a569171010/article/details/7467514

他们的关系:

instance -> __proto__ -> person.prototype -> constructor <- person.prototype -> function Person(){} -> Object() -> window

http://www.cnblogs.com/o-andy-o/archive/2012/11/20/2778260.html

http://ejohn.org/apps/learn/#1

2. prototype

一、什么是原型(prototype)

1、prototype本质上还是一个JavaScript对象;

2、每个函数都有一个默认的prototype属性;

3、通过prototype我们可以扩展Javascript的内建对象

http://blog.csdn.net/a569171010/article/details/7467514

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

http://stauren.net/log/eggxfygvg.html

二. 原型链: 常用原型来实现继承,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单说,构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。假如我们让原型对象等于另一个类型的实例。那结果将是:此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系成立,如此层层递进,就构成了实例与原型的链接。这就是原型链的基本概念。

http://blog.endlesscode.com/2010/01/23/javascript-prototype-chain/

http://www.cnblogs.com/ziyunfei/archive/2012/10/15/2723963.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FJavaScript_Overview

https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide

http://blog.csdn.net/siczxw555/article/details/6138428

http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html

http://www.zhuoda.org/lunzi/101543.html

3. 闭包

http://www.cnblogs.com/luluping/archive/2009/05/27/1490551.html

http://www.cnblogs.com/xiaoruoen/archive/2011/09/23/2185832.html

http://ghsky.com/2010/11/deep-into-javascript-closure-part-two.html

http://www.felixwoo.com/archives/247

http://www.cnblogs.com/hh54188/archive/2012/03/01/2374921.html

http://blog.csdn.net/a569171010/article/details/7484125

http://bbs.51js.com/viewthread.php?tid=79018&extra=&highlight=%2Bwinter&page=1

https://developer.mozilla.org/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%96%89%E5%8C%85%E7%9A%84%E9%81%8B%E7%94%A8

4. call,apply

http://topic.csdn.net/u/20081209/23/0823c850-5a56-421e-8922-fa35b26a517a.html

http://www.cnblogs.com/treasurelife/archive/2008/03/05/1092251.html

5. function

http://desert3.iteye.com/blog/1198400

http://chillwarmoon.iteye.com/blog/77123

http://software.intel.com/zh-cn/articles/javascript-first-class-citizen-function/?cid=sw:prccsdn229032

http://www.cn-cuckoo.com/main/wp-content/uploads/2009/12/named-function-expressions-demystified.html#introduction

6. js扩展的一些知识点:

http://www.cn-cuckoo.com/main/wp-content/uploads/2009/12/named-function-expressions-demystified.html#introduction

命名函数表达式探秘

http://bbs.51js.com/viewthread.php?tid=85245&highlight=scope

Scope Chain的问题

http://bbs.51js.com/viewthread.php?tid=83841&highlight=%D7%F7%D3%C3%D3%F2

try catch作用域的疑问

http://bbs.51js.com/viewthread.php?tid=85310&highlight=%D7%F7%D3%C3%D3%F2

变量作用域和词法作用域的区别

http://hax.iteye.com/blog/104393

关于JScript 5.6及其之前(IE6)引擎的创建对象的性能问题

http://bbs.51js.com/viewthread.php?tid=83190&extra=page%3D2%26amp;filter%3Ddigest

JScript下Array对象的性能问题

http://bbs.51js.com/viewthread.php?tid=83586&extra=page%3D1&page=1

为为什么不用with

http://bbs.51js.com/viewthread.php?tid=79018&extra=&highlight=%2Bwinter&page=1

JS引擎的Closure测试

http://bbs.51js.com/viewthread.php?tid=74299&highlight=

转贴Aimingoo:JavaScript面向对象的支持

http://bbs.51js.com/viewthread.php?tid=77398&highlight=

用functional思想编写js一例——缓动效果

https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Details_of_the_Object_Model

对象模型的细节


前端开发qq群:159758989 ,禁止闲聊,非喜勿进~!

web前端开发分享-css,js提高篇的更多相关文章

  1. 3. web前端开发分享-css,js提高篇

    一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...

  2. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  3. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  4. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

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

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  6. 6. web前端开发分享-css,js移动篇

    随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也 ...

  7. web前端开发分享-css,js入门篇(转)

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

  8. web前端开发分享-css,js入门篇

    学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...

  9. 5. web前端开发分享-css,js深化篇

    一. css练习网易专题: 1. http://news.163.com/ 新闻 跟腾讯的新闻版式大体没有大的变化,只是细节. 2. http://news.163.com/photo/#Curren ...

随机推荐

  1. 代替C++的getchar()

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in =n ...

  2. Linux命令之cp

    cp命令 用处:复制文件到当前目录下 用法:cp +要复制的文件的路径 + 复制后的文件名字 示例: (我这里有一个m1文件,内容是qwer,我想把它复制一份成为m2)

  3. 学习windows编程 day1

    #include <windows.h> #include <strsafe.h> /* 任务:去掉标题栏和边框 */ //#define LineHeight 15 这是自己 ...

  4. mybatis在控制台打印sql语句

    1:mybatis-config.xml中配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTY ...

  5. DIV仿textarea文本域,contenteditable如何只能输入纯文本

    对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2.  C ...

  6. Js/Jquery 关闭 离开或刷新当前页面时提醒,和执行解绑取消提醒

    如图,现在的 cnblogs 或者QQ邮箱编辑页面,刷新.关闭提醒: <script src="../../Common/Js/jquery-1.8.1.min.js"> ...

  7. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  8. <hr />改变颜色

    其实,<hr />是有默认的border的,改变border颜色即可改变hr颜色. 例如: <hr style="position: relative;top: 2.3re ...

  9. H.264 SVC

    视频厂商POLYCOM,VIDYO和RADVISION等都推出H.264 SVC技术.针对H.264 SVC技术做个介绍. CISCO和POLYCOM都提供了免版税的H.264 SVC的版本. 其中o ...

  10. postman变量的使用和设置

    之前只是使用postman做接口管理——将各个项目使用到的接口分类管理起来,用的时候手动改参数调用.这次项目连着跑三个接口,需要用到前一个接口的参数,还来回切平台,真的很麻烦,所以就搜了一下有什么便利 ...