Entries by simon

css盒模型彻底研究

关于css盒模型的解说在网上到处都有详细的讲解,相信大家都有所了解了吧。今天借着与同事一起讨论关于css的一些难点问题,最后发现还是对css的核心了解的不是很透彻。借此雅兴重新谈谈css盒模型究竟是个什么玩意。 请看图(1): Margin Padding Content (图1) (图1)是通过CSS的background,padding,margin,color,border,text-align,width,height等属性进行样式化后得到的一个类似与css盒模型的表示图。 以下代码是图1部分的css样式表: [code lang=”css”] .out-div { color: red; border: 1px dashed #aaa; width: 400px; height: 300px; margin: 0 auto; text-align: center; background: #fff; } .padding-div { border: 1px solid #000; height: 240px; margin: 0 20px 20px; padding: 0 20px 20px; background: #eee; } .content-div { border: 1px dashed #aaa; […]

javascript变量作用域之我见

相信大家都知道,javascript中变量作用域只有两种,全局作用域与函数中的局部 作用域(有人认为不同script节点间也存在一种作用域,称之为段作用域,理由是在后面的script的节点中定义的变量,在这个script节点没有 被解析之前,前面的script节点是不能访问这个变量的,这种依赖于代码解析顺序的特殊情况,不在我们这篇文章的讨论之列)。 比如下面的代码: var a = 1; function f(b){ var c = 2; } a就是我们声明的全局变量,c就是我们声明的局部变量,b作为函数f的形参,也是一个局部变量。 我们再看下面的代码: function outer(){ var o; function inner(){ var i; } } 可以看到o和i都是局部变量,只不过o的作用域范围为函数outer的函数体,而i的作用域范围为inner的函数体。 我们再看一段代码: var g = 1;  function outer(){   var o = 1;   function inner(){   var i = 1;   debugger;   }   inner();  } […]

javascript之prototype学习笔记

首先,Javascript中每个对象都有prototype属性,他是用来返回对象类 型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个 prototype到底是怎么实现和被管理的呢? 对于对象的prototype属性的说明,Javascript手册上如是说:所有 Javascript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。 下面我们看三个经典的prototype属性的使用示例。 为脚本环境内建对象添加方法 Array.prototype.max = function() { var i,max = this[0]; for(i=0; i<this.length; i++) { if (max<this[i]) max = this[i]; } return max; } 为用户自定义类添加方法 function SkyObject(name) { this._name=name; } SkyObject.prototype.ShowName=function() { alert(this._name); } 更新自定义类的prototype function SkyTestA() { this.MethodA = function() { alert(“SkyTestA.MethodA()”); } } function SkyTestB() { this.MethodB […]

JavaScript继承详解

这一章我们将会重点介绍JavaScript中几个重要的属性(this、constructor、prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用。 this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window; 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。 先看一个在全局作用范围内使用this的例子: <script type=”text/javascript”> console.log(this === window); // true console.log(window.alert === this.alert); // true console.log(this.parseInt(“021”, 10)); // 10 </script> 函数中的this是在运行时决定的,而不是函数定义时,如下: // 定义一个全局函数 function foo() { console.log(this.fruit); } // 定义一个全局变量,等价于window.fruit = “apple”; var fruit = “apple”; // 此时函数foo中this指向window对象 // 这种调用方式和window.foo();是完全等价的 foo(); // “apple” // 自定义一个对象,并将此对象的属性foo指向全局函数foo var pack = { fruit: “orange”, […]

使用javascript检测浏览器的相关特性

一、检测浏览器的名称 问题: 不同的浏览器对JavaScript的标准支持也有不同,有时希望脚本能够在不同的浏览器上都能运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本。 解决方案: 使用navigator对象的appName属性。 比如,要检测浏览器是否为IE,可以这么做: var isIE = (navigator.appName == “Microsoft Internet Explorer”); document.write(“is IE?” + isIE); 对于FireFox,navigator对象的appName属性值为”Netscape”;Opera9.02的appName属性值为”Opera”(其更早版本可能不同); 二、检测浏览器的版本号: 问题: 随着浏览器的版本的更迭,浏览器所支持的脚本特性也在变化,有时候就需要针对不同的版本编写相应的脚本,那么如何获得浏览器的版本号? 解决方案: 通过解析navigator对象的userAgent属性来获得浏览器的完整版本号。 IE将自己标识为MSIE,后面带一个空格,版本号以及分号。所以我们只要取空格和分号之间的部分即可。如Windows XP SP2所带的IE的userAgent属性值为”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)”,可以看到其版本为6.0。可以用如下的函数来获取IE浏览器的版本号: function getIEVersonNumber() { var ua = navigator.userAgent; var msieOffset = ua.indexOf(“MSIE “); if(msieOffset < 0) […]

优化网站性能 提高网站速度访问速度的14条实践

相信互联网已经越来越成为人们生活中不可或缺的一部分。ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的。 以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了“怀孕,出生,毕业,结婚”四个阶段。如果在我们点击网页链接的时候能够意识到 这个过程而不是简单的请求-响应的话,我们便可以挖掘出很多细节上可以提升性能的东西。今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的 一个讲座,感觉收获很大,想在blog上做个分享。 相信很多人都听过优化网站性能的14条规则。更多的信息可见developer.yahoo.com 1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css] 9. 减少 DNS 查询 […]

通过JS遍历DOM树,获得DOM元素的个数

最近在网上看到了一个关于怎么通过js遍历DOM树,获得DOM元素的个数的题目,现就个人的想法与大家一起来探讨一下。 1.首先从题目的意思可以看出,只要获得DOM元素的个数。 2.根据DOM的节点类型可知元素节点的类型属于nodeType =1。 3.综上所述我们可以从先获得DOM树Root节点,然后进行遍历它的子节点,如果是子元素节点则判断元素子节点下面有没有元素子节点,通过这样的遍历方法可以取得最终的结果。 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>获得DOM元素数量</title> </head> <body> <div id=”all”> <p>This is a content.</p> </div> <script type=”text/javascript”> //定义一个获得页面DOM元素的数量的 var html = document.getElementsByTagName(‘html’)[0]; var domNum = 0; function getDomNum(obj) { if(obj.hasChildNodes){ for (var i = 0; i < obj.childNodes.length; i++){ arguments.callee(obj.childNodes[i]); } if(obj.nodeType == 1){ domNum++; […]

javascript浏览器版本检测

普通JavaScript获取浏览器基本信息: <html> <body> <script type=”text/javascript”> var browser=navigator.appName var b_version=navigator.appVersion var version=parseFloat(b_version) document.write(“Browser name: “+ browser) document.write(“<br />”) document.write(“Browser version: “+ version) </script> </body> </html> IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Mozilla/4.0 (compatible; MSIE 5.0; Windows NT) 其中,版本号是MSIE之后的数字。 Firefox […]

引用精美网站的字体不在难

曾经每当看到有些网站使用了一些漂亮的字体,但却找不到相关的字体,无奈只能截个图,放在Photoshop里,一个一个字体匹配,最终都找到相应的字体,只能感叹别人网页做的好看,许多网页设计者说。 引用漂亮的字体以不是什么难事了,最近由于浏览了许多网站,查看了很多资料,无意中看到了一篇what font文章,它介绍了关于怎么可以很快的知道对方网站在用了什么字体,最后我小试了一下,发现效果不错,现拿出来与大家分享一下。 好了,就不多在这扯淡了,看图说话。 1.在浏览器地址栏内输入http://chengyinliu.com/whatfont.html这个网址,打开后将看到 2.将whatFont拖到标签栏里 3.打开需要访问的网站(例如:www.ccjk.com) 具体操作如图: 操作很容易吧,呵呵,就是这么容易。 希望通过此方法让我们不在为查寻字体而苦恼。

css清除浮动

清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面面俱到,然而基本能将我所知道的倾囊相授了。 我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO 1.采用伪类:after进行后续空制的高度位零的伪类层清除 2.采用CSS overflow:auto的方式撑高 3.采用CSS overflow:hidden的方式产生怪异适应 4.采用display:table将对象变成table形式 5.采用div标签,以及css的clear属性 6.采用br标签,以及css的clear属性 7.采用br标签,以及其自身HTML的clear属性 粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应) 1. 优点结构语义化完全正确,不会产生其余的怪异问题。 缺点复用方式不当容易造成代码量急剧增大。 建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。 2. 优点结构语义化完全正确,代码量极少。 缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。 建议内个模块使用,请勿嵌套。 3. 优点结构语义化完全正确,代码量极少。 缺点内容增多时候极易不会自动换行而内容被隐藏掉。 建议宽度固定时使用,请勿嵌套。 4. 优点结构语义化完全正确,代码量极少。 缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。 建议如果你不想改Bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。 5. 优点代码量极少,复用性极高。 缺点完全不能完美的适应语义化,不利于改版以及需求变更。 建议初学者使用,可以让你快速的解决浮动问题。 6. 优点语义化程度比第5种情况要更优;代码量极少,复用性极高。 缺点语义化依旧不完美,不利于改版以及需求变更。 建议初学者使用,可以让你快速的解决浮动问题。 7. 优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。 缺点语义化依旧不完美,不利于改版以及需求变更。 建议引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。