一行内文本溢出的处理

看到这个标题很容易就会想到截断文字加“…”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为好像写了这么多次,还是会不太记得。嘿嘿~~

一般的文字截断(适用于内联与块):
==============CSS================
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/
}
=================================

对于表格的话,定义有一点不一样:
==============CSS================
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/
}
=================================

注:这个东东只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“…”,其它的浏览器文本超出指定宽度时会隐藏。

YSlow分析前台开发的页面

YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。

仔细研究了下YSlow跌评分规则。

主要有12条:

1. Make fewer HTTP requests尽可能少的http请求。。我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕。思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的IMG请求并没有列为不利因素呢?

发现原来这些请求都是可以避免的。

15个JS和3个CSS完全可以通过特殊的办法进行合并(这个技术部已经帮我们解决了,实在是太感谢了,嘿嘿。),这样合并以后,一般情况下页面上只会出现一个JS和一个CSS(对JS的封装得有一定的要求)。

但是47个CSS background images请求改怎么解决呢?为什么页面上的纯IMG请求时合理的,而CSS background images请求过多就是不利因素了呢。这个我想了很久,总算明白,原来是这样的:

一般页面上的ICON,栏目背景啊,图片按钮啊,我们都会用图片CSS背景来实现,而一般这个图片CSS背景用到的图片都是比较小的,所以完全可以把这些图片合并成一个相对比较大的图片,这样页面上只会出现一个CSS background images请求,最多也就2-3个。后来仔细看了下雅虎美国的页面,他们的确也是这样做的,虽然这样做需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。

2. Use a CDN这项我们的评分是F级,最低。说实在的,我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。

看来上述的解释后,基本上明白了CDN是怎么回事,后来咨询了下中文站点SA,得知我们网站目前的确还没有做CDN的优化,但是据说我们有更加先进的技术来解决类似的问题(具体什么技术那就保密了),但是毕竟CDN也是个相当不错的技术,所以在我们先进技术的基础上在做CDN优化,肯定比现在更好,嘿嘿。据说SA明年会做几个点的CND。

3. Add an Expires header设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.

其实我们网站也做了这个优化,至少图片在这个上做过优化,但是没有做完全。我们的CSS和JS都还没有做过优化,倒是外部引入的一个广告JS做了,呵呵。其实设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上.不过据说这个SA也是没有做的,但是有一定的风险,因为JS和CSS是有一定的逻辑,如果服务器端和客户端都存在缓存的话,万一出了什么问题,对我们以后查找问题的所在和增加难度,不过我想两者中是可以权衡和并存的。
4. Gzip components对我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩后显示页面。

这点我们网站基本上是100%做到了,但是我们这项的评分并没有达到想象中的A级,原因是出在我们的外部链接,比如我们首页,有外部的广告投放JS,这个JS说拥有的网站是没有做过GZIP优化,连累了我们网站,所以我们也只有B,或者C级:(

5. Put CSS at the top把CSS外部链接放到页面的顶部。

其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就是个错误。还好,我们的页面基本上都做到了,可是有些页面比如LIST页面,还是出现了和逻辑挂钩的CSS链接,原因是为了解决一些本来就不合理的产品逻辑。所以,我们WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度,不能为了实现而实现。

6. Put JS at the bottom 把Javascript脚本尽量放到页面底部加载。

一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现,并不完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。为什么要这么做呢?呵呵,其实很简单,为了实现最大的下载并行,页面加载初期做的事,最好只有下载,HTML的下载,CSS的下载,JS的下载,等下载完成后再去实现页面渲染,JS脚本运行。这个方面我们还需要努力,很多页面我们在加载过程中运行了一部分脚本,或许是为了实现一些功能,没有办法,不过或许有更好的办法来替代呢。。。

7. Avoid CSS expressions 避免CSS表达式

其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。这个点,我们的页面基本上都做到了。不过说实话,CSS表达式,嘿嘿,我以前还不知道有这么回事。惭愧。哈哈。

9. Reduce DNS lookups尽可能少的DNS查找。

这项我们做的不是很好。D级,有9个域名,一般不要超过4个。不过这个主要是服务器架构上的问题,我们也无能为力,现在单单首页的广告域名就有好几个,好耶的广告域名,雅虎的广告域名,淘宝店广告域名,打点的域名。如果去掉这些,我们其实还是够用的,一个主域名,一个图片的,一个STYLE的,最多加上IFREAM的刚好4个。

10. Minify JS对Javascript代码进行压缩。

这点我很早以前就对此关注了,也找到了一个不错的压缩工具,yuicompressor,雅虎美国开发的JAVA压缩包yuicompressor.jar。压缩的相当完美,不仅把代码间的空格换行给去除掉了,而且对变量名,北部方法名都进行的简化,无意中实现了混淆脚本的作用。现在我们仅仅做到了JS合并,并没有对齐进行压缩,如果我用yuicompressor手工的去压缩,虽然实现了JS压缩,但是给我们自己的维护量增加了一倍,因为我们需要维护2套JS脚本,一套是压缩前的(调试用的),一套是压缩后(发布到网上的),而且要保证2套代码一致。所以最完美的做法是在发布的时候实现JS脚本合并,并对其用yuicompressor进行压缩,然后发布到晚上,把关键点移到发布的时候,这样我们只需要关心一套JS脚本(发布前的版本)。而且我觉得这个方案完全是行动通的。

11. Avoid redirects 避免重定向(跳转)

怎么理解这点呢?

我们经常遇到的一种做法,注册成功后,旺旺会有一个页面提示“你已经注册成功,3秒后将自动跳转到XX页面”。我就觉得很奇怪,你为什么不直接跳转到该去的页面?还有一种,我们大家非常熟悉,一般我们页面的链接都写成:http://china.alibaba.com或者http://china.alibaba.com/,有人会问,有区别吗?我明确的告诉大家,有!服务器如果接收到的URL是http://china.alibaba.com,它会自动重新定向到http://china.alibaba.com/,虽然最后都打开了阿里巴巴中文站的首页,但是前者比后者多走了一步,重定向,显然多多少少浪费了一定的时间。所以以后我们加URL链接的时候,别忘了把最后的“/”给加上去。

12. Remove duplicate scripts 去除重复的脚本

这个其实没有什么好说的,大家都应该毫无条件的去遵守,但是越是明显,越是简单的事,我们往往会做不好,当然,很多理由的,项目时间太紧张了等等,导致代码很乱,很多重复的地方。其实谁都知道重负不好,不过还好,我们的页面重复的脚本代码不多(至少一个页面里面,呵呵)。不过,我到是希望,我们不仅要做到一个页面脚本不重复,而且要做到N个页面,脚本要重用。

13. Configure ETags 这个好像是服务器端配置的问题,我不太懂,也就不乱说了,怕把大家给误导了。

总共13个,但是看了YAHOO的官方说明,好像还有一个AJAX CACHE(AJAX 缓存)。我倒是觉得这个很重要,随着我们AJAX应用的广泛,AJAX 缓存这个概念一定要时刻在我们脑子中,AJAX是个好东西,但是重复的数据,无休止的向后台申请,绝对是个错误(不仅是速度上还是对服务器压力上来说),所以我们就要对我们已经申请到的数据进行缓存,当第2次用到的时候,就直接从缓存中取,不要在去访问我们宝贵的服务器资源了。其实这个思想不仅仅适合AJAX,在所有有数据复用的应用中都应该考虑到。

YSLOW就分析到这里完毕了,或许有些地方分析的不是很正确,或许有人分析的比我更早,更好,但是这些的确是我从工作中去积累,发现的,并很多都实际应用到工作中去了,顺便说下,嘿嘿,LIST页面进行优化后,在0.92版本的YSLOW评分将达到76分,甚至80分,相当于0.8版本的90分以上。不过评分毕竟是评分,关键还是速度。

火狐插件Firebug的使用

本文最初发表《程序员》杂志第三期,现将全文贴上,内容已经过编辑修饰了很多:)

什么是Firebug
从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编写精致的CSS样式表展示每个页面模块;要调试javascript给页面增加一些更活泼的要素;要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面,才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员,在这里为大家介绍一款轻巧灵活的辅助开发工具。

Firebug是Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。这是一款让人爱不释手的插件,如果你以前没有接触过它,也许在阅读本文之后,会有一试的欲望。笔者在撰写此文的时候,正逢Firebug发布1.0正式版,这不能不说是种巧合。

应用
Firebug插件虽然功能强大,但是它已经和Firefox浏览器无缝地结合在一起,使用简单直观。如果你担心它会占用太多的系统资源,也可以方便地启用/关闭这个插件,甚至针对特定的站点开启这个插件。

在安装好插件之后,先用Firefox浏览器打开需要测试的页面,然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件,它会将当前页面分成上下两个框架,如图1所示。

图1:Firebug插件展开图示

uploads/200801/23_233339_firebug1.gif

从图1中看到,Firebug有6个主要的Tab按钮,下文将主要介绍介绍这几方面的功能。
Console HTML CSS Script Dom Net
控制台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络状况监视

Console 控制台
控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试,这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用,你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL,http头以及回馈的内容,原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

象C shell或Python shell一样,你还能在控制台中查看变量内容,直接运行javascript语句,就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量,但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的:

console.log(“hello world”)

如果你有一堆参数需要组合在一起输出,可以写成这样:

console.log(2,4,6,8,”foo”,bar).

Firebug的日志输出有多种可选的格式以及语法,甚至可以定制彩色输出,比起单调的alert,显然更加方便,限于篇幅,这里不做详细说明,但是有志于提高debug效率的读者,可以到Firebug的官方站点(见附录)查看更详细的教程。

图2: 在控制台里调试javascript

uploads/200801/23_233646_firebug2.gif

查看和修改HTML
第一次看到Firebug强大的HTML代码查看器,就觉得它与众不同,相比于Firefox自带的HTML查看器,它的功能强大了许多。 HTML

首先你看到的是已经经过格式化的HTML代码,它有清晰的层次,你能够方便地分辨出每一个标签之间的从属并行关系,标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次,如图3所示,它清楚地列出了一个hml元素的parent、child以及root元素,配合Firebug自带的CSS查看器使用,会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码,并在浏览器中第一时间看到修改后的效果,光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。

有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色,HTML查看器会将页面上改变的内容也抓下来,并以黄色高亮标记,让网页的暗箱操作彻底成为历史。

利用Inspect检查功能,我们还可以用鼠标在页面中直接选择一些区块,查看相应的HTML源代码和CSS样式表,真正的做到所见即所得,如果你使用了外部编辑器修改了当前网页,可以点击Firebug的reload图片重新载入网页,它会继续跟踪你之前用Inspect选中的区块,方便调试。

图3::HTML查看器

uploads/200801/23_233731_firebug3.gif

CSS调试
Firebug的CSS调试器是专为网页设计师们量身定做的。

如今的网页设计言必称div+css,如果你是用table套出来的HTML页面,就得按这规矩重构一遍,否则显得你不够时髦!用div做出来的页面的确能精简HTML代码,HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系,还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性,并在当前页面中直接看到修改后的结果。

一个典型的应用就是页面中的一个区块位置显得有些不太恰当,它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。

提示:如果你正在学习CSS样式表的应用,但是总记不住常用的样式表有哪些值,可以尝试在CSS调试器中选中一个样式表属性,然后用上下方向键来改变它的值,它会把可能的值一个个遍历给你看。

图4: CSS查看器,能够直接修改样式表

uploads/200801/23_233813_firebug4.gif

可视化的CSS尺标
我们可以利用Firebug来查看页面中某一区块的CSS样式表,如果进一步展开右侧Layout tab的话,它会以标尺的形式将当前区块占用的面积清楚地标识出来,精确到象素,更让人惊讶的是,你能够在这个可视化的界面中直接修改各象素的值,页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时,该功能能够提供有效的帮助,你可以籍此分析offset、margin、padding、size之间的关系,从而找出解决问题的办法。

图5:Firebug中的CSS标尺

uploads/200801/23_233853_firebug5.gif

前台开发需要掌握的技术

经常有朋友问下一步应该如何学习,应该学习些什么内容,问自己的未来如何发展等等?我想很多人在迷惑,在徘徊,甚至有朋友怀疑自己职业的价值。

WEB标准第一境界,会用CSS布局,可以脱离table
WEB标准第二境界,能够兼容流行的浏览器,IE5.x——IE7.0,Firefox1.5+,Opera跟Firefox差不多
WEB标准第三境界,语义化的结构,搜索引擎优化初步,WAI(网站亲和力)基础,兼容打印,和手持设备
WEB标准第四境界,模块化的网页编码,大型项目的开发模式,网站前端性能优化,向前向后兼容所有浏览器和设备,搜索引擎优化高级,亲和力WAI1 AAA级(WAI2变动挺大,我不了解)
WEB标准第五境界(某些公司找前端的就要求这些),交互设计,前端编程(Javascript,Flex,AJAX),SEO关键词基本库等等外部技术,后台编程基础
WEB标准第六境境界,WEB前台架构师,负责前端编码架构,做类似与大型WEB2.0产品(Google web2.0,yahoo web2.0,qzone之类的)前端,DISCUZ论坛也很复杂。
貌似自己走的路和上面的也几乎相同,只是对于第四和第五或许应该齐头并进,而自己现在也只才走到这里,路还很远,还有许多东西需要自己去学习。对于第六点,也正是自己所想的下步目标。

当然因人而异,所走过的路有所不同,但最终的目标或许是一致的。

再让我们看看 淘宝 的一则招聘:

前端开发工程师 Web Developer

精通各种Web前端技术,包括XHTML/XML/CSS/Javascript/ActionScript等(JS和AS之一即可);
深刻理解Web标准,对可用性、可访问性等相关知识有实际的了解和实践经验;
有基于Ajax或Flash的RIA应用开发经验;
至少精通一门非Web前端脚本的语言(如Java/PHP/C++),并有项目经验;
个性乐观开朗,逻辑性强,善于和各种背景的人合作;
计算机、数学、自动化等相关专业本科以上学历优先。
不难看出我们需要学习些什么,没事的时候可以多看看大公司的相应职位的招聘,也能从中找到自己的方向。

努力++

当你感觉无聊,无事时请不要浪费时间,而应该学习学习再学习,因为我们还年轻!

帮帮我!我不懂JavaScript

本文是JavaScript库Mootools的入门性介绍文章,详细介绍了在网上能找到的比较好的学习HTML,CSS,JavaScript入门知识的资源以及随手参考的地方。文中介绍的从零入手学习JavaScript编程的过程很有参考价值。

 

[译注: 可能你会说不翻译里面推荐的参考资料一切都是枉然,但是重要的是文章作者提供的学习思路。具体的参考内容你可以去Google相应知识的中文版。]

翻译不当的地方还请留言指正!

帮帮我!我不懂JavaScript [Help! I Don’t Know JavaScript!]

June 5th, 2007, 作者 Michelle

为了帮助所有对Mootool有兴趣却碰上很多麻烦的人,我整理了这些能够教给你开始从事客户端应用开发所需的所有知识的网上资源。

职业必备工具

这里有更加想尽的介绍:http://www.css88.com/article.asp?id=109

这些是从事Web开发的前提条件。

Firefox: 从事开发工作一定少不了Firefox。但你还需要在你的电脑(以及其他测试计算机)上安装好你打算兼容的所有浏览器,以方便进行跨浏览器支持测试。

必不可少的扩展
  • Firebug: 有史以来最优秀的插件。Firebug让面对一大堆代码抓狂的你清楚地了解处理你的页面时浏览器内部都发生了些什么。
  • Web Developer Toolbar: 赋予你全面掌控站点的伟大力量。禁用JavaScript,查看网页不带CSS时的样子,禁用访问来源,启用严格警告,以及更多。所有你能想到的Web Developer Toolbar都能给予。

学习基础知识

别因为不懂HTML就在学习Web开发的道路上止步!

How to Create

这地方非常棒,不仅详细介绍各种麻烦的细节,而且对语义化和实践优化方面的课题也有所涉及。 总的来说,是非常不错的人性化设计的基础知识概览。

Mozilla开发者中心[MDC]

大概是网上最全面的Web开发信息中心了, 特别是关于Firefox或Mozilla的信息。她应该会成为您主要的参考资源。

W3 Schools

基本上W3 Schools 可以提供给您所有Web技术的快速参考,而且比W3C提供的原始参考文档要易读得多。 MDC虽然更好,但手边有一些快速参考资料总归要好得多。

微软开发人员网络 [MSDN]

不要被他们的名字唬住了——JScript是和JavaScript一样的东西。如果没记错微软应该因为这一站点获得了一两个可用性方面的奖项。当你和IE的不规范做斗争时应该常来这里看看。

[译注:最近发现梦都网(中文)的HTML和CSS基础教程和参考文档很不错,建议看看]

其他资源

如果你有点好奇心,可以经常看一看 A List Apart ,了解一些巧思妙技。
另外,请注意,Mootool在 strict doctype [严格文档类型]中使用最佳。
译注:Doctype即XHTML文档头部声明指定的文档类型。一般是如下形式:

 

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>   

 

JavaScript详细

JavaScript,世上最酷的编程语言。 要想掌握JavaScript,首先您需要明白,它和 <此处用你最喜欢的编程语言代替>完全不同。当你明白了这一事实后,你可能会想要看看下面这些指导文章:

了解基础

现在来点轻松的。Yahoo的一些大好人为世人上传了很多普及性的视频教程。这真的是件大好事,因为我们对JavaScript的学习简单到了只需要花几个小时看这些聪明的伙计们讲话。

激动人心的 JavaScript三部曲
特别收录
自食其力地进阶

一旦你已完成上面的学习,试着利用Google找寻您想知道的问题的答案,直到您能用原始的JavaScript代码编写出几个有趣的跨浏览器Ajax应用。没什么不可能的,用不了多久你就可以抛开Google自己动手了。我认为靠你自己的力量做点这些可以帮助你理解一个框架是如何实现应用的,以及这些丰富的应用背后的过程。

你可能也会觉得 JavaScript的知识鸿沟 是篇有意思的文章。

通过实例进行学习

如果你真的很想成为一个好的JavaScript代码编写者,最好的方式就是阅读已洞悉个中奥妙的人编写的代码。也就是说,你可能需要 浏览MooTools的源码 获得一些启迪。你不仅可以吸收很多好点子,通过这一过程,你还能更深层次的理解这一框架。

进阶到更高水平

现在是时候下载Mootools啦!如果你确实完成了我上面列举的大部分内容的学习,我们欢迎你到论坛上提问,在IRC聊天室里潜水,为Mootools社区做出您的贡献。 试试下载完整的,未经压缩的源码并将其应用于你的开发工作。看看当你对其做出修改时都会发生什么事。试着找出一些bug,提出相应的解决办法。做几个插件。但是请保证在为你的插件命名时让其看起来和Moo有关。

持续关注

常来这个blog逛逛,这里有调试代码时你所须知的一切以及一些让你与函数打交道的过程变得有趣的延伸阅读。

css样式技巧总汇一

1、在用 :after 方式清除浮动时,切记不要在 content:””; 的引号中加任何字符,包括网上常见方式的点“.”,在opera下会产生问题。
div:after {
  content:””;
  display:block;
  clear:both;
  visibility:hidden;
  height:0;
}

2、opera 不支持 overflow-x 和 overflow-y ,而 IE6,IE7,Firefox,Safari 支持。当使用 overflow-y 来实现某种效果时,要注意 opera 下的表现,折中的方法为先定义 overflow:hidden 属性,在定义overflow-y:auto 或者 overflow-x:auto 属性。当然这仅是折中的方法,必然有他的局限性。

3、background-position 属性定义的顺序为水平位置、垂直位置。比如定义 background-position:top left; 虽然顺序颠倒了位置,但所有的浏览器都能识别。因为 top 和 left 为可识别位置属性,但如果换个定义方式 background-position:20px left; 此属性只会在 IE 中正常显示,在其他浏览器中却认为是无效的定义,难得 IE 的“智能”。

4、垂直居中的实现方法可以看:http://ued.taobao.com/blog/2007/11/20/job_test_explanation/,当使用 diplay:table-cell;vertical-align:middle; 来实现已知大小容器里未知大小图片垂直居中时,放置于 table 中的 td or th 使用是有问题的,此时可以给已知道大小容器加一层div并设置其属性为 display:table;margin:0 auto; 来解决。
暂时只想到4个,想到继续补充^^

文本框(input)获取焦点(onfocus)时样式改变的实现方法

许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了。

设置某一个文本框为焦点:
document.getElementById(“username”).focus();//设置用户名的文本框为焦点。
Javascript:

程序代码
<script type=”text/javascript”> // 说明:文本框(input)获取焦点(onfocus)时样式改变的实现方法 // 整理:http://www.CodeBit.cn  // focusClass : 获取焦点时的样式 // normalClass : 正常状态下的样式 function focusInput(focusClass, normalClass) {     var elements = document.getElementsByTagName(“input”);     for (var i=0; i < elements.length; i++) {         if (elements[i].type != “button” && elements[i].type != “submit” && elements[i].type != “reset”) {             elements[i].onfocus = function() { this.className = focusClass; };             elements[i].onblur = function() { this.className = normalClass||”; };         }     } } </script>

HTML:

程序代码
<style type=”text/css”> .normalInput {     border:1px solid #ccc; } .focusInput {     border:1px solid #FFD42C; } </style>  <script type=”text/javascript”> window.onload = function () {     focusInput(‘focusInput’, ‘normalInput’); } </script>  文本框:<input type=”text” class=”normalInput” />

JS 编码 escape 方法

对 String 对象编码以便它们能在所有计算机上可读,

escape(charString)

必选项 charstring 参数是要编码的任意 String 对象或文字。

说明

escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式)。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 \”%20\” 。

字符值大于 255 的以 %uxxxx 格式存储。

注意   escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

【IE6的疯狂之三】IE6 3像素BUG的实例

问题:2列布局。左列固定,右列液态
我需要做一个布局。
2列,左边列固定宽度。右边列使用剩余宽度。整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度。
但是我写这个布局缺在ie6下面始终解决不了3像素bug。
请在IE6下测试

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=”http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd” target=”_blank” rel=”external”>http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>”>
<!– saved from url=(0027)<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a> –>
<HTML xmlns=”<a href=”http://www.w3.org/1999/xhtml” target=”_blank” rel=”external”>http://www.w3.org/1999/xhtml</a>”><HEAD><TITLE>关于3像素bug的延生</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<STYLE type=text/css>BODY {
 FONT-SIZE: 12px
}
.a1 {
 BACKGROUND: #333; FLOAT: left; WIDTH: 100px; COLOR: #ffffff; HEIGHT: 240px
}
.a2 {
 BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.a2 #jing {
 BACKGROUND: #00ccff; MARGIN-LEFT: -3px; HEIGHT: 100px
}
.a2 #jing2 {
 BACKGROUND: #ff9900; HEIGHT: 100px
}
</STYLE>

<META content=”MSHTML 6.00.6000.16587″ name=GENERATOR></HEAD>
<BODY>
<DIV class=a1>我是class=a1 <BR><A style=”COLOR: #ffff00″
onclick=”this.parentNode.style.height=’100px'”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为100</A><BR><A
style=”COLOR: #ffff00″ onClick=”this.parentNode.style.height=’150px'”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为150</A></DIV>
<DIV class=a2>
<DIV
id=jing>我是id=jing<BR>这个问题存在于IE6里面。ie7,opera,ff都没问题。观察class=a2的div所设置的边框会发现,a2和a1之间是没有距离的。但是a2
里面元素(文本)会和a2之间产生类似padding-left:3px;的效果。利用以往的设置负值,也没办法消除第一个元素id=jing和a2的距离。更有意思的是当我设置了_margin-left:-3px;原本id=jing和a2
之间的3像素距离变成了2像素。但是及时我_margin-left 的负值设置得再大,不能完全消除</DIV>
<DIV id=jing2>我是id=jing2<BR>当a1的高度大于id=jing这个元素的高度的时候,di=jing2
也会产生和a2之间类似padding-left:3px的间距。 当a1 小于或者等于id=jing的时候,id=jing2
就不会和a2之间有间距。<BR>本来我只是想做一个左列固定,右列自动适应剩余宽度的布局。但是没想到发现了这个问题。求某位高手告诉我怎么解决。
</DIV></DIV></BODY></HTML>

javascript下的数组及其操作

本文介绍如下几个方面的内容:

  1.如何创建数组

  2.如何对数组进行操作(添加,删除,读取)

  3.数组常见方法和属性

  如何创建一个数组,一般地根据初始化设定简单分为3种:

  1.单纯创建数组:

  var arr=new Array();

  要点:用new关键字创建数组对象Array(),Array()对象是一个本地类,可以用new创建一个对象后使用

  2.创建数组的同时规定数组大小:

  var arr=new Array(10);//这里就创建了一个初始化大小为10的数组

  注意:当使用数组大小操作初始化大小时,数组会自动被撑大,不会像C语言那样发生错误.动态增长是js数组的一个性质.另外,js中支持最大数组长度为4294967295

  3.直接初始化:

  var arr=new Array(“草履虫”,”爱”,”毛毛”);//这里就直接初始化了数组

  或var arr=[“草履虫”,”爱”,”毛毛”];//括号也可以声明一个数组对象

  当然,类似C语言,你也可以定义2维3维和多维的数组,这里不讨论.

  数组的属性:length

  arr.length返回数组arr的长度,常见于循环中对数组的遍历,比如:

for(var i=0;i<arr.length;i++){
执行部分
}

  数组元素的访问: arr[index],其中index表示索引即数组基数,从0开始,共有arr.length个元素.比如: arr[0]访问第一个数组元素,arr[1]访问第二个数组元素….依次类推 数组的操作方法:先概览下下面的这些操作数组常用的方法(13个)

toString(),valueOf(),toLocalString(),join(),split(),slice(),concat(),
pop(),push(),shift(),unshift(),sort(),splice()

  下面逐一分析这些方法的功能和用法.

toString(),valueOf(),toLocalString():

  功能:返回数组的全部元素

  注:数组名也可以返回整个数组

  代码:

  var m=[“am”,”bm”,”cm”];//用括号声明一个数组对象  

  alert(m.toString());//toString()返回数组对象的所有内容,用逗号分割,即am,bm,cm  

  alert(m.valueOf());//valueOf()也返回数组对象的所有内容  

  alert(m.toLocaleString());//toLocaleString()也返回数组对象的所有内容,但有地区语言区别,暂不研究  

  alert(m);//数组名也返回数组对象的所有内容 

var m=[“am”,”bm”,”cm”];//用括号声明一个数组对象 alert(m.toString());//toString()返回数组对象的所有内容,用逗号分割,即am,bm,cm alert(m.valueOf());//valueOf()也返回数组对象的所有内容 alert(m.toLocaleString());//toLocaleString()也返回数组对象的所有内容,但有地区语言区别,暂不研究 alert(m);//数组名也返回数组对象的所有内容
运行: <script>var m=[“am”,”bm”,”cm”];alert(m.toString());alert(m.valueOf());alert(m.toLocaleString());</script>

  join():

  功能:把数组各个项用某个字符(串)连接起来,但并不修改原来的数组

  代码:

  var m=[“am”,”bm”,”cm”];//用括号声明一个数组对象  

  var n=m.join(“—“);//用—连接am,bm,cm.  

  alert(m.toString());//m并没有被修改,返回am,bm,cm  

  alert(n);//n是一个字符串,为am—bm—cm 

var m=[“am”,”bm”,”cm”];//用括号声明一个数组对象 var n=m.join(“—“);//用—连接am,bm,cm. alert(m.toString());//m并没有被修改,返回am,bm,cm alert(n);//n是一个字符串,为am—bm—cm
运行: <script>var m=[“am”,”bm”,”cm”];var n=m.join(“—“);alert(m.toString());alert(n);</script>

split():

  功能:把一个字符串按某个字符(串)分割成一个数组,但不修改原字符串

  代码:

  var str=”I love maomao,I am caolvchong”;  

  var arr=str.split(“o”);//按字符o把str字符串分割成一个数组  

  alert(arr);//输出整个数组 

var str=”I love maomao,I am caolvchong”; var arr=str.split(“o”);//按字符o把str字符串分割成一个数组 alert(arr);//输出整个数组
运行: <script>var str=”I love maomao,I am caolvchong”;var arr=str.split(“o”);alert(arr);</script>

  slice():返回某个位置开始(到某个位置结束)的数组部分,不修改原数组

  代码:

  var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”];  

  var n=m.slice(2);//返回第二个元素bm后面的元素,即cm,dm,em,fm  

  var q=m.slice(2,5);//返回第二个元素后到第五个元素,即cm,dm,em  

  alert(n);  

  alert(q); 

var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”]; var n=m.slice(2);//返回第二个元素bm后面的元素,即cm,dm,em,fm var q=m.slice(2,5);//返回第二个元素后到第五个元素,即cm,dm,em alert(n); alert(q);
运行: <script>var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”];var n=m.slice(2);var q=m.slice(2,5);alert(n);alert(q);</script>

  数组对象的栈操作:

  push():数组末尾添加一个项

 pop():删除数组最后一个项

  代码:

  var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”];  

  m.push(“gm”);//在数组末尾添加元素gm  

  alert(m);  

  m.pop();//删除数组最后一个元素gm  

  alert(m); 

var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”]; m.push(“gm”);//在数组末尾添加元素gm alert(m); m.pop();//删除数组最后一个元素gm alert(m);
运行: <script>var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”];m.push(“gm”);alert(m);m.pop();alert(m);</script>

  数组对象的队列操作:

  unshift():数组头添加一个项

  shift():删除数组第一个项

  代码:

  var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”];  

  m.unshift(“gm”);//在数组第一个元素位置添加元素gm  

  alert(m);  

  m.shift();//删除数组第一个元素gm  

  alert(m); 

var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”]; m.unshift(“gm”);//在数组第一个元素位置添加元素gm alert(m); m.shift();//删除数组第一个元素gm alert(m);
运行: <script>var m=[“am”,”bm”,”cm”,”dm”,”em”,”fm”];m.unshift(“gm”);alert(m);m.shift();alert(m);</script>

sort():数组按字符的ASCII码进行排序,修改数组对象

  注:即便是数字数组,也将转化为字符串来进行比较排序

  代码:

  var m=[“am”,”fm”,”gm”,”bm”,”em”,”dm”];  

  m.sort();//按字母序排序  

  alert(m); 

var m=[“am”,”fm”,”gm”,”bm”,”em”,”dm”]; m.sort();//按字母序排序 alert(m);
运行: <script>var m=[“am”,”fm”,”gm”,”bm”,”em”,”dm”];m.sort();alert(m);</script>

  concat():在数组尾添加元素,但不修改数组对象

  代码:

  var m=[“am”,”bm”]  

  var n=m.concat(“cm”);//添加一项cm,并且赋予新数组对象  

  alert(m);//原数组没有被修改  

  alert(n);//输出新数组对象 

var m=[“am”,”bm”] var n=m.concat(“cm”);//添加一项cm,并且赋予新数组对象 alert(m);//原数组没有被修改 alert(n);//输出新数组对象
运行: <script>var m=[“am”,”bm”];var n=m.concat(“cm”);alert(m);alert(n);</script>

  splice():在数组的任意位置进行添加,删除或者替换元素,直接修改数组对象

  细节:

  splice()有三个参数或三个以上参数,前两个是必须的,后面参数是可选的

  进行添加:splice(起始项,0,添加项)

  进行删除:splice(起始项,要删除的项个数)

  进行替换:splice(起始项,替换个数,替换项) 这个其实是添加删除的共同结果

  代码:

  var m=[“am”,”bm”]  

  m.splice(1,0,”fm”,”sm”);//在第一项后面添加fm和sm,返回am,fm,sm,bm  

  alert(m);  

  m.splice(2,1);//删除第二项后面一项(即第三项sm,返回am,fm,bm)  

  alert(m);  

  m.splice(2,1,”mm”);//替换第二项后面一项(即第三项,返回am,fm,mm)  

  alert(m); 

var m=[“am”,”bm”] m.splice(1,0,”fm”,”sm”);//在第一项后面添加fm和sm,返回am,fm,sm,bm alert(m); m.splice(2,1);//删除第二项后面一项(即第三项sm,返回am,fm,bm) alert(m); m.splice(2,1,”mm”);//替换第二项后面一项(即第三项,返回am,fm,mm) alert(m);
运行: <script>var m=[“am”,”bm”];m.splice(1,0,”fm”,”sm”);alert(m);m.splice(2,1);alert(m);m.splice(2,0,”mm”);alert(m);</script>