需求：XML抛出数据字段username,如Hiro xxx Zhang,需要通过XSLT获得First Name和Last Name，并填入到对应Form表单的字段中。

就XSLT来说，没有像JS中indexOf和lastIndexOf方法，所以不能够通过定位“空格”位置的方法去实现。唯一的方法只能通过“空格”反复去截取，知道剩下的字符串中没有空格。

1. XML数据：

1
2

< ?xml version="1.0" encoding="UTF-8" ?>
<name>Hiro ODC Zhang</name>

2. XSLT代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

< ?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" version="1.0" omit-xml-declaration="yes"/>
 
    <xsl:template match="/">
        <xsl:variable name="name"><xsl:value -of select="name"/></xsl:variable>
        <xsl:variable name="firstName"><xsl:value -of select="substring-before($name, ' ')"/></xsl:variable>
 
        <xsl:variable name="lastName">
            <xsl:call -template name="lastName">
                <xsl:with -param name="name"><xsl:value -of select="$name"/></xsl:with>
            </xsl:call>
        </xsl:variable>
 
        First Name: <xsl:value -of select="$firstName"/><br />
        Last Name: <xsl:value -of select="$lastName"/>
    </xsl:template>
 
    <xsl:template name="lastName">
        <xsl:param name="name"/>
 
        <xsl:choose>
            <xsl:when test="contains($name, ' ')">
                <xsl:call -template name="lastName">
                    <xsl:with -param name="name"><xsl:value -of select="substring-after($name, ' ')"/></xsl:with>
                </xsl:call>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value -of select="$name"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
 
</xsl:stylesheet>

First Name通过截取第一个“空格”前的所有字符串：substring-before($name, ‘ ‘)。

Lsat Name则通过递归的方法，方法截取“空格”后面的字符串，直到最后只剩下一个不含空格的字符串即可：xsl:template name=”lastName”。

下载XSLT代码文件

你也许会喜欢阅读这些：

• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2010年07月4日 -- 读书:《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》 (10)
• 2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)

关于FireQuery的简介和安装就不多说了，访问：http://firequery.binaryage.com/。

1. 标签绑定事件查看

打开Firebug的HTML Tab，在一些绑定了事件的HTML标签上可以看到一些事件数据：点击后跳转到DOM Tab，可以查看对应的一些信息：

2. 查看jQuery的.data()函数添加的数据

jQuery的.data()函数是用来给HTML上添加数据的，一般用在插件或数据处理上。一般情况下执行了.data()后，无法确认是否给该标签正确地绑定了数据。此时通过FireQuery就可以查看，同样支持点击后跳转到DOM Tab查看，这在给HTML标签绑定一些对象数据时非常实用。

3. 引入jQuery.Lint.js对页面代码测试

在Console Tab的下拉菜单中启用引入，重新刷新页面后会动态地引入jQuery.Lint.js插件，此时对页面中出现的错误进行输出提示。

FireQuery对于前端开发和测试来说绝对是一大助手，更多的好处还是在实际中可以体会出来。

官方测试页面：http://firequery.binaryage.com/test

你也许会喜欢阅读这些：

• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年06月30日 -- Firebug:Javascript测试利器，Console面板函数详解 (4)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年05月21日 -- 扩展:Adobe放出Dreamweaver CS5 HTML 5扩展包 (16)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2009年12月25日 -- 软件:查看页面的http请求软件HttpWatch (10)
• 2009年11月2日 -- 插件:我的第一个插件–简约的scrollTop滑动插件 (23)
• 2009年08月21日 -- jQuery:Scrolltop滑动插件推荐（修正注释版） (25)
• 2009年07月16日 -- Plugins:开发人员必备的Firefox插件（个人在用） (6)
• 2009年06月19日 -- 10个为什么使用Firebug的原因 (5)

其实Github官方和Git官方都有很详细的教程，一步一步地做下去，都可以实现。我今天主要讲的是非Git安装目录下的代码同步以及使用IntelliJ IDEA软件分享和获取Github上的代码。

一、通过官方教程搭建环境：

具体的请阅读：http://help.github.com/，更多的Git的代码命名可以阅读：Git Reference。基本上看完这些就对Git有了很大程度上的了解，这时候最还记录一些常用的命名笔记（推荐Evernote,支持多平台同步）。并且教程中也讲解了如何创建仓库、提交仓库的方法，请自行阅读。

装完后其实我纠结了很长的时间，一直找不到虚拟的Home文件夹所在地，后来发现Git在我的电脑中虚拟了一个网络目录： 也正是因为只有一个虚拟的目录，这与我原来自己的目录根本联系不上，才促发了我去找寻自选择目录分享。

Mac OS相关教程：http://help.github.com/mac-set-up-git/

二、自选择目录分享到Github：

其实在没发现前觉得很简单，找了很多命令行都没实现。后来发现只需要在目录中右键即可，在右键的菜单里会多出一些与Git相关的菜单：(截图是已经成功提交过后的菜单的)

1. 第一次时会有一个”Git init”的菜单，点击后机会在当前目录下创建一个”.git”隐藏文件。
2. 接着右键选择”Git Add all files now”，它的意思是将所有的文件都添加到Git的提交列表中。
3. 右键选择”Git commit Tool”菜单，会出现一个对话框： 在左侧会列出你上部选择的所有文件的列表，点击文件还可以查看文件中的代码。在右下角的“提交描述”框内输入该次提交的备注信息后，点击“提交”按钮即可。若未执行第二步的话，看到的界面会是： 而点击”提交“按钮则报错阻止。
4. 最后一步，右键选择”Git Bash”菜单，在命令行中输入”git push origin master”后回车，等待一段时间后可以看到提交的进度百分数： 结束后即可访问你的Github账户，便可看到上传的代码了。

三、使用IntelliJ IDEA分享、获取Github项目：

首先得在IDEA中配置Git：

1. 选择菜单”File — Settings”，找到”Version Control — VCSs — Git”：
2. 在右侧的区域中找到Git的安装目录下的Git.exe执行文件所在地： 只需修改这项，其他可以保持默认。
3. 配置完成。
   附：查看Git分享列表可以在”Version Control”下：

其次，配置你在Github上注册的账户：

1. 选择菜单”File — Settings”，找到”IDE Settings — Github”：
2. 输入域名，账户和密码： 点击”Test”按钮测试连接，若链接成功会提示”Connection successful”。保存完成。

分享Github项目：

1. 选择菜单”Version Control — Import into Version Control — Share project on Github”：
2. 等待一段时间的验证和登陆，出现界面： 填写描述信息后，点击”Share”按钮即可。

获取Github项目：

1. 选择菜单”Version Control — Checkout from Version Control — Github”：
2. 等待一段时间的验证和登陆，出现界面： 在”Repository”下来列表中既有你自己的项目，也有你在Github网站上”Wacth”的项目，选择后，选择你存放的路径，再输入你想要的项目名称，点击”Clone”按钮，即完成获取过程。

附：若在公司使用IDEA分享或获取Github项目，有可能因为域的问题无法实现，具体原因未做甚久。此时可以通过命名行代替实现。

最热评论文章列表:

• 2009年08月5日 -- 主题：我的第一个主题ihiro提供下载了 (101)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2009年12月31日 -- 插件专区 (50)
• 2011年01月11日 -- 软件:使用IntelliJ IDEA，高效前端开发 (50)
• 2009年08月7日 -- 网赚:抛弃谷歌、百度，转战阿里妈妈 (47)
• 2010年03月25日 -- Ajax:近期博客改版的增强Ajax加载说明 (43)
• 2009年09月6日 -- Wordpress:高亮管理员的留言信息 (37)
• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)

暂时不做HTML5读书笔记的更新，下一篇再继续。临时性地插入CSS3新属性的详细介绍，以便可以和HTML5的知识结合起来合理应用，这样达到两者配合。

Transition属性主要是用来对某个CSS属性的变化过程进行控制，官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。而我个人则简单地理解为”在某个时间段内，平滑地改变某个CSS属性。“。

Transition又包含了四个子属性，分别为property、duration、timing-function、delay。下面来一一介绍，在最后会给出一个简单的实例和使用方法说明。

1. transition-property:

property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。

2. transition-duration:

duration针对了过渡效果的持续时间。

3. transition-timing-function:

timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。说实话，我也没搞的太明白，但W3C给出了一张曲线图，一看就明白了（后附图）。

介绍下预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]
其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看图：图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。

参考阅读：
W3C: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
貝茲曲線：http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

4. transition-delay:

duration针对了过渡效果的延迟执行时间。

5. 代码演示：

1). 过渡单个属性：

1 2 3 4

transition-property:opacity; transition-duration:2s; transition-timing-function:ease-in; transition-delay:0;

2). 过渡多个属性：

[1]. 上下一一对应型：

1 2 3 4

transition-property:opacity left; transition-duration:2s, 4s; transition-timing-function:ease-in; transition-delay:0;

此时：opacity过渡时间为2s，left过渡时间为4s。

[2]. 循环对应型：

1 2 3 4

transition-property:opacity left width height; transition-duration:2s, 4s; transition-timing-function:ease-in; transition-delay:0;

此时：opacity和width过渡时间为2s，left和height过渡时间为4s。

3). transition简写模式：

顺序为：transition-property transition-duration transition-timing-function transition-delay

1 2 3 4

/*单个属性：*/ -moz-transition:background 0.5s ease-out 0s; /*多个属性：*/ -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;

6. 实例展示：

请用火狐打开，暂没添加其他浏览器支持。有兴趣的可以到Demo页面，下了源代码自行添加后测试。也可以查看我的头部导航，也用到了Transition的效果。

Demo

1

<a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>
a { display:block; width:160px; height:30px; line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none; text-transform:uppercase;
    /*只有当鼠标移出后才处理*/
    -moz-transition:background 0.2s linear 0s;
}
 
a:hover { background:#263c7b; color:#f60;
    text-shadow:2px 2px 10px #f00;
    /* 只有当鼠标移入时才处理
       注：若a:hover中不写transition,则会继承a中的transition */
    /*
    1. 单个属性
        -moz-transition:background 0.5s ease-out 0s;
    2. 多个属性：
       -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
    */
    -moz-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
}

更多的Transition相关请阅读：http://www.w3.org/TR/css3-transitions/

你也许会喜欢阅读这些：

• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年07月4日 -- 读书:《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》 (10)

今天是愚人节，特意选择今天更新一篇博文。倒不是因为文章的内容和愚人节有什么关系，只是做个纪念。同时也是纪念一下哥哥（张国荣）去世8周年。

给出五个简单的实例，通过这些实例可以对Canvas的API有一个简要的认识和了解。在代码中也附加了注释，这样可以清楚地了解该行代码的含义。

一、绘制矩形：

查看效果：1.drawRect.html

1
2
3
4
5
6
7
8
9
10
11

var rect = document.getElementById('rect').getContext('2d');
 
//画一个80x80的正方形
rect.fillStyle = '#eee';
rect.fillRect(10, 10, 90, 90);
//在80x80的正方形中间截去一个50x50的正方形
rect.clearRect(20, 20, 70, 70);
 
//画一个空心的80x80的正方形
rect.strokeStyle = '#ccc';
rect.strokeRect(100.5, 100.5, 180, 180);    //.5 for line width(two side), 2x0.5=1px

二、绘制线条：

查看效果：2.drawLine.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var line = document.getElementById('line').getContext('2d');
//画一条垂直线
line.moveTo(20, 20);
line.lineTo(20, 100);
 
//画一条斜角线
line.lineTo(80, 50);
 
//再一条斜角线闭合三角形
line.lineTo(20, 20);
 
//给三角形边线着色
line.strokeStyle = '#f00';
line.stroke();

三、绘制文本：

查看效果：3.drawText.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

var context = document.getElementById('text').getContext('2d');
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);   //预留20px的空白
context.moveTo(260, 40);
context.lineTo(500, 40);
//画右上的箭头
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
 
context.moveTo(60, 0);
context.lineTo(60, 153);    //预留20px的空白
context.moveTo(60, 173);
context.lineTo(60, 375);
//画左下的箭头
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
 
//着色
context.strokeStyle = "#000";
context.stroke();
 
context.font = "bold 12px sans-serif";
//标注X坐标文字
context.fillText("x", 248, 43);
//标注Y坐标文字
context.fillText("y", 58, 165);
 
context.textBaseline = "top";
//标注起始坐标文字
context.fillText("(0, 0)", 4, 4);
//画左上角的标识点
context.fillRect(0, 0, 2, 2);
 
context.textAlign = "right";
context.textBaseline = "bottom";
//标注结束坐标文字
context.fillText("(500, 375)", 492, 370);
//画右下角的标识点
context.fillRect(494, 372, 2, 2);

四、绘制渐变：

查看效果：4.drawGradients.html

1
2
3
4
5
6
7
8
9
10
11
12

var context = document.getElementById('gradients').getContext('2d');
 
//创建一个宽300px的线性渐变， 决定了渐变方向，仅x1为横向， 仅x2为纵向， 两者都有为对角线渐变
var my_gradients = context.createLinearGradient(0, 0, 300, 225);
//起始色：黑色
my_gradients.addColorStop(0, 'black');
//终止色： 白色
my_gradients.addColorStop(1, 'white');
//设置填充色
context.fillStyle = my_gradients;
//画300x225尺寸的线性渐变矩形
context.fillRect(0, 0, 300, 225);

五、绘制图片：

查看效果：5.drawImage.html

1
2
3
4
5
6
7
8
9
10

window.onload = function() {
    var context = document.getElementById('image').getContext('2d');
    var cat = document.getElementById('cat');
    //坐标5, 5处绘入 - 源图
    context.drawImage(cat, 5, 5);
    //坐标100, 100处绘入 - 源图缩放成80x60尺寸
    context.drawImage(cat, 120, 120, 80, 60);
    //坐标200, 200处绘入 - 源图从10,10处取160x100尺寸，缩放到80x50尺寸
    context.drawImage(cat, 10, 10, 160, 100, 200, 200, 80, 50);
}

下载本篇文章的代码压缩包：CHP4.Canvas.zip

附加信息：

开源代码，兼容主流浏览器，IE下都是通过VML实现兼容：
Google Code Canvas库：http://code.google.com/p/explorercanvas/
jQuery Maphilight 插件：http://davidlynch.org/js/maphilight/docs/

你也许会喜欢阅读这些：

• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2009年09月10日 -- Javascript:面向对象之静态、公有、私有、特权对象 (10)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)

这些新的HTML5标签在IE8及以下版本中都不能支持，这就需要在页面加载之前使用JS动态地创建HTML5新标签，以实现页面的正确的渲染。当然这样处理并不是万能的，在处理一些AJAX交互时，就会出现返回的HTML5标签无法正确解析的问题。此时就需要HTML5 innerShiv来解决了。

1. Doctype:

1

< !DOCTYPE html>

无需再去添加XHTML的框架型、过渡性或者严谨型的声明。

2. HTML

1
2

<html lang="en">
</html>

无需再添加xmlns属性来约束标签的命名空间了。

3. HEAD:

1).meta:

1	<meta charset="utf-8" />

2).link:

2.1).rel=”stylesheet”

1	<link rel="stylesheet" href="style-original.css" />

2.2).rel=”alertnate” //用在订阅

1	<link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />

2.3).rel=”icon”

1	<link rel="shortcut icon" href="/favicon.ico"></link>

4. How to style unknown elements in IE:

1
2
3
4
5
6
7
8
9
10

     <!--[if lt IE 9]>
          <script type="text/javascript">
               var e = ("abbr,article,aside,audio,canvas,datalist,details," +
                         "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
                         "progress,section,time,video").split(',');
               for (var i = 0; i < e.length; i++) {
                    document.createElement(e[i]);
               }
          </script>
     < ![endif]--></script>

OR:

1
2
3

     <!--[if lt IE 9]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     < ![endif]-->

5. The HTML5 algorithm says that an <article> element creates a new section, that is, a new node in the document outline. And in HTML5, each section can have its own <h1> element.

6. Time and Date:

1

<time datetime="2009-10-22" pubdate="pubdate">October 22, 2009</time>

你也许会喜欢阅读这些：

• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2009年09月10日 -- Javascript:面向对象之静态、公有、私有、特权对象 (10)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)

年后没多久我就开始看起了《HTML5. Up and Running》这本书，中文版《HTML5揭秘》已经上市。我到今天也看到了第六章。摘取了一些扼要的东西，做了一些简单的笔记，以便以后的翻查。Everbox这个时候就发挥到了作用，让我随时随地想翻的时候都可以翻一翻。

这篇文章只是开篇，后面会陆续有些我自己的笔记分享，很简单的文字。

本文介绍的是HTML5特性判断：

1. Canvas:

1

!!document.createElement('canvas').getContext;

2. Video:

1

!!document.createElement('video').canPlayType;

Video Formats:

1
2

var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

3. Local Storage:

1

return ('localStorage' in window) && window['localStorage'] !== null;

4. Web Workers:

1

!!window.Worker;

5. Offline Web Applications:

1

!!window.applicationCache;

6. Geolocation:

1

!!navigator.geolocation;

7. From:

Input:

1
2
3

var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

Placeholder Text:

1
2

var i = document.createElement('input');
return 'placeholder' in i;

Form Autofocus:

1
2

var i = document.createElement('input');
return 'autofocus' in i;

8. Microdata:

1

return !!document.getItems;

你也许会喜欢阅读这些：

• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2009年09月10日 -- Javascript:面向对象之静态、公有、私有、特权对象 (10)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)

一、IE条件判断语句

IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了。看看下面用来区分IE不同版本的代码：

• * <!--[if IE 8]> = IE8版本
• * <!--[if lt IE 8]> = IE7版本以低版本
• * <!--[if gte IE 8]> = IE8版本及高版本

1
2
3
4
5
6
7
8
9

<!--[if IE 8]>
<style type="text/css">
	/* css for IE 8 */
</style>
< ![endif]-->
 
<!--[if lt IE 8]>
	<link href="ie7.css" rel="stylesheet" type="text/css" />
< ![endif]-->

二、CSS规则（IE CSS hacks）

另一个办法就是在样式文件中声明只有IE识别的CSS规则。比如，在CSS属性前置一个”*”区分IE7和低版本，而前置一个”_”则区分IE6及低版本。但是，很多时候这个方法不被推荐，因为这些CSS规则并不能被W3C CSS 验证成功。

• * IE8 及 低版本: 在CSS属性后置”\9″, 如 height:1000px\9;
• * IE7 及 低版本: 在CSS属性前置”*”, 如 *height:1000px;
• * IE6 及 低版本: 在CSS属性前置”_”, 如 _height:1000px;

1
2
3
4
5
6
7
8
9

.box {
	background: gray; /* standard */
 
	background: pink\9; /* IE 8 and below */
 
	*background: green; /* IE 7 and below */
 
	_background: blue; /* IE 6 */
}

三、HTML条件判断，给出不同的className

第三个办法是由Paul Irish发起的。它实现的办法是通过IE条件判断来给HTML设置不同的className，然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行，也不会有任何W3C验证的问题。

1
2
3
4
5
6

<!--[if lt IE 7 ]> <html class="ie6"> < ![endif]-->
<!--[if IE 7 ]> </html><html class="ie7"> < ![endif]-->
<!--[if IE 8 ]> </html><html class="ie8"> < ![endif]-->
<!--[if IE 9 ]> </html><html class="ie9"> < ![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> </html><html> <!--<![endif]-->
</html>

本文翻译自：CSS Specific for Internet Explorer

PS:这三种办法我个人都用过，只是第三中办法我不是给HTML便签设置不同的className,而是在BODY中所有HTML代码的最外层多嵌套了一层DIV。呵呵，想想，还是给HTML或BODY标签设置不同className比较合算。至少不会有多余的标签。

扩展阅读：

• About Conditional Comments

你也许会喜欢阅读这些：

• 2010年05月17日 -- CSS:通过一个样式表区分IE的各个版本 (11)
• 2010年03月8日 -- CSS:CSS3基础（附图） (12)
• 2009年09月3日 -- CSS:分享一些常用的css技巧 (8)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
• 2010年02月20日 -- Wordpress:如何将GoogleBuzz数据插入到博客中 (11)
• 2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
• 2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)

年前用wordpress给公司做内部信息分享平台时，有一块是用来横向无限循环播放展示team building的图片。之前的效果不适合，便又写了一段原生的js来实现。主要实现原理是间隔时间地设置一个overflow:hidden;的div的scrollLeft。

downloaddemo

一、HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="photo-list">
    <ul id="scroll">
        <li><a href="http://www.ihiro.org/intellij-idea"><img src="http://www.ihiro.org/blog/wp-content/uploads/2011/01/logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/javascript-getweek-by-date"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/12/calendar.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/beginning-python"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/12/beginning-python.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/css-position-hack"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/position-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/text-range"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/text-range.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/html5-pro-ebook-recommendations"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/Pro_Html5_logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/jquery-plugin-recommended-maphighlight"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/10/maohightlight-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/jquery-format-extend"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/09/jQuery.format_logo.png" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/information-september-2010-programming-language-list"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/08/2010.08.language-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/example-selectbox-simulation"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/09/select_logo.png" width="100px" height="100px" alt=""/></a></li>
    </ul>
</div>

使用一个无需列表，通过左浮横向显示。设置容器div的尺寸，超出部分不显示。

二、CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

* { padding:0; margin:0;}
body { text-align:center;}
 
#photo-list {
     /* 3张图片的宽度（包含宽度、padding、border、图片间的留白）
         计算：3*(100+2*2+1*2+9) - 9
         之所以减去9是第三张图片的右边留白
     */
    width:336px;
    /* 图片的宽度（包含高度、padding、border）
        计算：100+2*2+1*2
    */
    height:106px;
    margin:50px auto; overflow:hidden;
    border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

注释中写明了容器div的尺寸计算方法。页面加载完成后未播放时的效果：

Firebug查看尺寸图：

三、JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var id = function(el) {
        return document.getElementById(el);
    },
    c = id('photo-list');
if(c) {
    var	ul = id('scroll'),
        lis = ul.getElementsByTagName('li'),
        itemCount = lis.length,
        width = lis[0].offsetWidth, //获得每个img容器的宽度
        marquee = function() {
            c.scrollLeft += 2;
            if(c.scrollLeft % width < = 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
                ul.appendChild(ul.getElementsByTagName('li')[0]);
                c.scrollLeft = 0;
            };
        },
        speed = 50; //数值越大越慢
 
    ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
 
    var timer = setInterval(marquee, speed);
    c.onmouseover = function() {
        clearInterval(timer);
    };
    c.onmouseout = function() {
        timer = setInterval(marquee, speed);
    };
};

没有进行封装，只是实现效果。

你也许会喜欢阅读这些：

• 2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2010年02月20日 -- Wordpress:如何将GoogleBuzz数据插入到博客中 (11)

我也是从上周才知道（看了一个Taobao前端的博客推荐）有这么软件的，软件的使用体验也才几天而已。我只能把我认为好的地方推荐给大家。IntelliJ IEDA是有两个版本的，一款是Community Edition，另一款是Ultimate Edition。很明显一款免费、一款收费，免费的功能模块就少了。

好在我在网上找到了注册机，下载吧！

特性介绍：

快捷键Tab，快速补全代码：

代码导航，JS和XSLT也可以哦：

代码块折叠，DW是要选择后才能折叠：

智能匹配文件夹中文件：

代码提示，除了原生的JS，只要是引入页面的JS文件都可以提示哦：

CSS样式错误检查，属性名、值都有错误提示：

当然，优秀的特性还有很多，这几点只是针对了对我个人或前端有用的特性。更多的特性还有待我对软件的熟悉。再好的软件也只是辅助开发，最重要的还是对技术的熟悉，软件只是用来提高效率而已。

你也许会喜欢阅读这些：

• 2010年03月17日 -- 软件:MyEclipse 8.5发布，附注册码 (12)
• 2009年10月21日 -- 软件:MyEclipse 8.0发布，附注册码 (10)
• 2009年08月18日 -- 软件:用上了Zend Studio 7.0，分享序列号 (10)
• 2010年05月21日 -- 扩展:Adobe放出Dreamweaver CS5 HTML 5扩展包 (16)
• 2010年04月23日 -- 软件:心智图法(Mindjet MindManager)，思维图制作 (10)
• 2010年01月13日 -- 软件:Mozilla软件系列之邮件、日历软件 (15)
• 2009年12月25日 -- 软件:查看页面的http请求软件HttpWatch (10)
• 2009年09月11日 -- 游戏:3D动作冒险类游戏《迷你忍者》 (10)

蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1

公式中的符号含义如下，w：星期；c：世纪-1；y：年（两位数）；m：月（m 大于等于3，小于等于14，即在蔡勒公式中，某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算）；d：日；[ ]代表取整，即只要整数部分。(C是世纪数减一，y是年份后两位，M是月份，d是日数。1月和2月要按上一年的13月和 14月来算，这时C和y均按上一年取值。)

算出来的W除以7，余数是几就是星期几。如果余数是0，则为星期日。

以2049年10月1日（100周年国庆）为例，用蔡勒（Zeller）公式进行计算，过程如下：
蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1
=49+[49/4]+[20/4]-2×20+[26× (10+1)/10]+1-1
=49+[12.25]+5-40+[28.6]
=49+12+5-40+28
=54 (除以7余5)
即2049年10月1日（100周年国庆）是星期5。

摘自：http://www.cnblogs.com/chingho/archive/2010/03/26/1697282.html

不过就这个格式描述来说少讲了一点，就是计算出来的结果若为负数的话，就需要再加上7，这样得出来的结果才是正确的。

当然这个公式不仅仅适合与JS,其他语言也可以写出来。原理一致…

download demo

公式计算代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/*
 * 	获得指定日期的星期数，1-6为星期一到星期六，0为星期天
 *	@y 年份
 *	@m 月份
 *	@d 日
 */
function getWeek(y, m, d) {
	var _int = parseInt,
		c = _int(y/100);
	y = y.toString().substring(2, 4);
	y = _int(y, 10);
	if(m === 1) {
		m = 13;
		y--;
	} else if(m === 2) {
		m = 14;
		y--;
	};
 
	var w = y + _int(y/4) + _int(c/4) - 2*c + _int(26*(m+1)/10) + d - 1;
	w = w%7;
 
	return w >= 0 ? w : w+7;
}

你也许会喜欢阅读这些：

• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)

最近比较闲，临近圣诞、新年，公司客户方都忙着过节了吧。乘着这段时间多看看专业书籍，提升一下自己。虽然会一些PHP，但我的主要目标还是放在前端，所会的那些PHP够我折腾Wordpress就可以了，根本就没打算用到工作中去。之所以选择学习了Python，主要是发现好多做前端的都会去选择这本服务器脚本语言。而在一些招聘信息上也会去要求前端会Python语言。

好笑的是，因这个单词的发音是听到别人的发音来认识的。结果后来查了词典才发现原来一直读错了，以至于到现在老是无形中就以错误的读法来读它，悲剧！一定要改掉这个读法，所以在标题上加上音标，以此警戒!

最近心情有点小浮躁…

你也许会喜欢阅读这些：

• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2010年07月4日 -- 读书:《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》 (10)
• 2009年12月11日 -- PHP:pathinfo()获得文件的路径、名称等信息 (20)

早上写了一些关于postion的样式做测试，发现不论给某个DIV设置了多少个方位（当然最多到4个），也不管存放的顺序是如何颠倒，它的读取顺序依旧是top-bottom-left-right.很符合日常所说的“上下左右”规则。这与我之前理解的不相符合。

另外我们也知道给一个标签设置magin、padding、border等时，它的顺序是“上右下左”，这个顺序和方位读取顺序也没有类似的关系。为此我总结了一份Demo页面，供大家对比方位读取顺序，也算是一个总结笔记吧。

download demo

附文中jQuery的animate示例：

Html代码：

1
2
3
4
5

<button id="trigger">Click To Animate</button>
<div id="box">
	<div class="box" id="box1"></div>
	<div class="box" id="box2"></div>
</div>

CSS代码：

1
2
3
4

#box { width:800px; height:200px; position:relative; padding:10px 0; border:1px dashed #eee;}
.box { width:120px; height:40px; border:1px solid #f60; background:#390; position:absolute;}
#box1 { top:10px; left:0;}
#box2 { top:62px; left:0;}

jQuery代码：

1
2
3

$('#trigger').click(function() {
	$('.box').animate({'right': '0'});
});

结果执行JS后，Firebug中实时Html代码为：而通过Cssviewer观察到的代码不变：

所以，不要试图用JS来改变已设定top和left的DIV的right和bottom值，当然改变top和left值还是会有效果出来的。

你也许会喜欢阅读这些：

• 2010年03月8日 -- CSS:CSS3基础（附图） (12)
• 2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
• 2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)

昨晚看到了文本框选区跨浏览器处理的部分。之前参加的交流会上，Taobao的前端分享过他们的Editor，主要的技术也是Range的应用。Range主要还是用在即见即所得Editor中，本文纯粹是做笔记之用，为避免以后自己遇到这样的需求而到处搜索，不如在自己的Blog上做个标记。

也做了个Demo页面，有兴趣的可以点击了查看效果。

download demo

一、Html代码：

1
2
3
4
5
6
7
8
9

<ul>
	<li><input type="text" value="Hello World!" id="textbox" name="textbox" size="50" /></li>
 
    <li><input type="button" id="getSelectedBtn" value="getSelectedText" /></li>
 
    <li><label for="startIndex">开始位置：</label><input type="text" size="5" id="startIndex" name="startIndex" />&nbsp;&nbsp;&nbsp;&nbsp;<label for="stopIndex">结束位置：</label><input type="text" size="5" id="stopIndex" name="endIndex" /></li>
 
	<li><input type="button" id="selectBtn" value="selectText" /></li>
</ul>

二、Javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var textbox = document.getElementById('textbox'),
	getSelectedBtn = document.getElementById('getSelectedBtn'),
	selectBtn = document.getElementById('selectBtn');
 
function getSelectedText(textbox) {
	if(document.selection) {
		return document.selection.createRange().text;
	} else { //IE
		return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
	};
}
 
function selectText(textbox) {
	var startIndex = document.getElementById('startIndex').value, 
		stopIndex = document.getElementById('stopIndex').value;
	if(textbox.setSelectionRange) {
		textbox.setSelectionRange(startIndex, stopIndex);
	} else if(textbox.createTextRange) { //IE
		var range = textbox.createTextRange();		//创建范围
		range.collapse(true);				//折叠预选取范围到开始位置
		range.moveStart('character', startIndex);		//将预选取范围的起点和终点移动到相同的位置
		range.moveEnd('character', stopIndex - startIndex);		//选取字符长度
		range.select();			//选取范围
	alert(stopIndex);
	}
	textbox.focus();
}
 
getSelectedBtn.onclick = function() {
	alert(getSelectedText(textbox));
};
selectBtn.onclick = function() {
	selectText(textbox);
};

你也许会喜欢阅读这些：

• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2009年09月10日 -- Javascript:面向对象之静态、公有、私有、特权对象 (10)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)
• 2010年11月25日 -- CSS:position属性定位总结 (27)

现在国内关于HTML5的书籍几乎没有，即使有也还在翻译或编写中，没出版。这段时间在新公司或许英文文档看的多了，现在阅读器英文的书籍也相对轻松了许多。上上周的时候看完了Canvas API的相关，上周忙于工作，到现在也没在继续往下看。等时间空了继续看下去。

并不指望在实际的项目开发中用到，纯粹是兴趣爱好，或者是以后可能个人做些手机终端的开发。毕竟手机终端对HTML5的支持还是蛮多的。

上篇的插件推荐其实漏掉了一部分内容，虽然该插件使用了HTML5的Canvas标签实现了绘图功能，但其实在IE下是不支持的。那么在IE下它是如何实现兼容的呢？原来它是使用了IE下特有的VML API，更多的参考可以访问：VML教程 (Thinking in VML)，我这就不做什么解释了，因为我也没去研究。(略图：)

最后附上《Pro HTML5 Programming》的下载地址：http://www.fileserve.com/file/vy9367V/Pro.HTML5.Programming.pdf

你也许会喜欢阅读这些：

• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年07月4日 -- 读书:《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》 (10)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年12月7日 -- Python:Beginning Python['paiθən] (27)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)

接着我就试图去搜索一些相关全区高亮的资料，结果就让我搜到了maphighlight插件。基于jQeury库，结合了最新的HTML5的Canvas画布标签，通过绘画的方式实现了热点区域的高亮。

因项目还没上线（已结束），所以我的实现效果就不做公布了！

一、原理：

其实maohighlight插件的实现原理很简单，在图片的基础上建立一个同等尺寸的Canvas标签，通过坐标点coords画出不规则的线。关键的技术难点是对Canvas的各个画图方法的了解和应用！

至于精准的选取坐标可以通过Fireworks软件在图片上选取出来，然后将图片另存为Html页面格式，在源代码里即可看到选取的坐标。

二、Demo：

示例截图：

1. 简单示例
2. 世界地图
3. 美国地图
4. 特性示例

三、文档：

使用很简单，也可以自定义选取色彩等效果，更多请阅读官方文档：http://davidlynch.org/js/maphilight/docs/

四、代码版本：

http://github.com/kemayo/maphilight/

你也许会喜欢阅读这些：

• 2010年06月30日 -- Firebug:Javascript测试利器，Console面板函数详解 (4)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2009年11月2日 -- 插件:我的第一个插件–简约的scrollTop滑动插件 (23)
• 2009年08月21日 -- jQuery:Scrolltop滑动插件推荐（修正注释版） (25)
• 2009年06月18日 -- jQuery plugins for DW4 (2)
• 2011年11月25日 -- 插件：Firebug扩展插件FireQuery (2)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年05月21日 -- 扩展:Adobe放出Dreamweaver CS5 HTML 5扩展包 (16)

若有高手觉得写得有效率问题的也可以提出来，学习学习，研究研究。

除了数字外，字符串也可以格式化的，毕竟实现起来原理差不多嘛！可以自定义分隔符、分割长度，最终返回的格式化后的字符串。

一、jQuery扩展代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

;(function($) {
	$.extend({
		format : function(str, step, splitor) {
			str = str.toString();
			var len = str.length;
 
			if(len > step) {
				 var l1 = len%step, 
					 l2 = parseInt(len/step),
					 arr = [],
					 first = str.substr(0, l1);
				 if(first != '') {
					 arr.push(first);
				 };
				 for(var i=0; i<l2 ; i++) {
					 arr.push(str.substr(l1 + i*step, step));									 
				 };
				 str = arr.join(splitor);
			 };
			 return str;
		}
	});
})(jQuery);

二、调用方法

1
2
3
4

jQuery(function() {
	console.log($.format(2000000010, 3, ','));		//result:	2,000,000,010
	console.log($.format('abcdefghijklmnopqrstuvwxyz', 6, '-'));	//result:	ab-cdefgh-ijklmn-opqrst-uvwxyz
});

你也许会喜欢阅读这些：

• 2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)

先来看看这张比较图吧，变化是在太大。特别是13位置后的语言排行变化很大。很多语言都挤入了前20，当然开发语言的种类很多，也不是每个多知道的，有的了解些，有的关注过，有的听说过，有的在用。这些数据纯粹是扩充知识，不做学习和工作的依据！

前面的语言没什么排名变化，就是份额上的你增我减！

2010年09月份编程语言前20名：如图

2010年09月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

今天的实例算是很小的了吧，是在之前公司的公司网上做的效果，今天朋友让我扣出来给他。我便做了份，整理了分享出来给大家参考。

近期因新工作需要，在学习XML和XSLT相关的知识，以后也会在博客中记录一些学习笔记！

download demo

一、HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="selectBox">
    <div id="cats_seltor"><span>全部</span><em></em></div>
    <dl id="cats_lks">
        <dd><a href="#all_svys">全部</a></dd>
        <dd><a href="#social_svys">社会</a></dd>
        <dd><a href="#emotion_svys">情感</a></dd>
        <dd><a href="#product_svys">产品</a></dd>
        <dd><a href="#happiness_svys">开心</a></dd>
        <dd><a href="#literary_svys">文体</a></dd>
        <dd><a href="#finance_svys">财经</a></dd>
        <dd><a href="#tech_svys">科技</a></dd>
        <dd><a href="#point_svys">点子俱乐部</a></dd>
    </dl>
</div>

二、CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#333;}
a { text-decoration:none;}
#selectBox { margin:100px; position:relative; width:116px;}
#cats_seltor { height:22px; cursor:pointer;}
#cats_seltor span, #cats_seltor em { float:left; display:block;}
#cats_seltor span { border:1px solid #d4d5d8; width:74px; height:20px; line-height:20px; border-right:none; padding:0 10px; color:#f60; overflow:hidden;}
#cats_seltor em { width:20px; height:22px; background:url(arrow.png) no-repeat;}
#cats_seltor em.down { background-position:0 -30px;}
#cats_lks { width:114px; border:1px solid #d4d5d8; border-top:none; position:absolute; top:22px; left:0; background:#fff; display:none; z-index:10;}
#cats_lks dd { padding:2px 6px;}
#cats_lks dd a { color:#666; display:block; padding:1px 4px;}
#cats_lks dd a:hover { color:#fff; background:#f60;}

三、jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	$('#cats_seltor').click(function() {
		$('em', this).toggleClass('down');
		$('#cats_lks').toggle();
	});
 
	$('#cats_lks a').click(function() {
		var _text = $(this).text();
 
		$('#cats_lks').hide();
		$('#cats_seltor').find('span').text(_text)
					.end().find('em').removeClass('down');
		return false;
	});
});
</script>

你也许会喜欢阅读这些：

• 2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
• 2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
• 2009年07月10日 -- jQuery:书籍展示效果 (6)
• 2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
• 2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
• 2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
• 2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
• 2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
• 2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
• 2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)

一、Sizzle代码及注册：

在jQuery1.42版本中，Sizzle代码位于 2624行 至 3688行。相比单独的Sizzle.js，在jQuery框架中多了几行代码，将Sizzle注册到jQuery中：

单独的Sizzle.js可以到Github:http://github.com/jeresig/sizzle/blob/master/sizzle.js查看。

二、’:header’的用处：

就在我阅读Sizzle.js的源代码时，发现了’:header’选择器，代码如下（位于3132-3134行）：

1
2
3

		header: function(elem){
			return /h\d/i.test( elem.nodeName );
		}

这个选择器在正常的CHM API文档中没有给出，估计大家也很少用到过（我自己就没用过）。它的用处是匹配（h1-h6)标题标签，知道有这个选择器了，以后工作中也要多多应用才是。

使用方法：

1

		$(':header').css('...', '...');

更多’:header’相关请阅读：http://api.jquery.com/header-selector/

三、如何自定义选择器：

Sizzle中给出了很多的选择器，那么我们也可以自己定义自己所需的选择器，代码如下：

html实例代码：

1
2
3

    <div id="box">
    	<span>找到我</span>
    </div>

1
2
3
4
5
6
7
8
9

	jQuery(function($) {
		$.extend($.expr[':'], {
			hasSpan : function(e) {
				return $(e).find('span').length > 0;
			}
		});
 
		alert($('#box:hasSpan').html());   //输出：<span>找到我</span>
	});

四、附上百度博客的Sizzle选择器流程图：

点击查看大图：

John很强大，感谢他让我学习到如此美妙和优雅的代码。

你也许会喜欢阅读这些：

• 2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)
• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年06月30日 -- Firebug:Javascript测试利器，Console面板函数详解 (4)

更新每月一次的编程语言排行榜信息。

比较7月的编程语言排行榜的市场比例来看，8月的前10为的份额都在下降，除了Python小幅上升和Objective-C大幅上升外，其他语言的份额都是在下滑。Javascript又再次地滑落到了第11位。也许是因为7月苹果iPhone4的发布，带动了新一轮的苹果开发热潮，更多的开发人员加入了苹果开发的阵营。

2010年08月份编程语言前20名：如图

2010年08月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

C#语言花了很长的时间终于在排行榜上超过了Visual Basic。虽然C#被认为是继Java语言之后的第二企业开发语言，但它的增长速度确实逐步提升的！另一方面，Javascript语言从上月的第11位会带了前10的位置，苹果开发语言Objective-C的份额一直在以猛烈的趋势上升。而PHP语言的份额确实有下降的趋势，从上月的8.934%下降到了本月的8.566%。

2010年07月份编程语言前20名：如图

2010年07月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

今天推荐的这本书是《高性能网站建设指南》进阶版，原作者从更加详细的细节方面全面地介绍Web性能优化的知识。该书是今年4月的时候才出版，我也是近两天无意间发现有新书出版，便急切的在亚马逊购买了阅读起来。看了一些，发觉很是不错，便写篇文章推荐给大家。

下面部分介绍来自卓越亚马逊。

内容简介

《高性能网站建设进阶指南:Web开发者性能优化最佳实践》是《高性能网站建设指南》姊妹篇。作者Steve Souders是Google Web性能布道者和Yahoo！前首席性能工程师。在《高性能网站建设进阶指南：Web开发者性能优化最佳实践》中，Souders与8位专家分享了提升网站性能的最佳实践和实用建议，主要包括：理解Ajax性能，编写高效的JavaScript，创建快速响应的应用程序、无阻塞加载脚本，跨域共享资源，无损压缩图片大小，使用块编码加快网页渲染；避免或取代iframe的方法，简化CSS选择符，以及其他技术。

章节介绍

第1章：理解Ajax性能
第2章：创建快速响应的Web应用
第 3章：拆分初始化负载
第4章：无阻塞加载脚本
第5章：整合异步脚本
第6章：布置行内脚本
第7章：编写高效的JavaScript
第8章：可伸缩的Comet
第9章：超越Gzip压缩
第10章：图像优化
第11章：划分主域
第12章：尽早刷新文档的输出
第 13章：少用iframe
第14章：简化CSS选择符

《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》购买链接：http://www.amazon.cn/gp/product/product-description/B003FO0MEC/ref=dp_proddesc_0?ie=UTF8&s=books

你也许会喜欢阅读这些：

• 2010年11月3日 -- HTML5:《Pro HTML5 Programming》英文电子书推荐 (21)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年12月7日 -- Python:Beginning Python['paiθən] (27)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)

Console面板中自身含有多个可供使用的函数，诸如：console.log(),console.time()等一些常用的方法，我的想法是将这些函数写入在jQuery插件中，这样在项目的前端开发和测试阶段使用起来非常地方便。

代码执行后的效果需要打开Console面板后才可以看到，若出现错误提示，不要惊慌，那是因为使用console.error()方法抛出错误所致，页面的代码并没有出错！

download demo

下面的代码是将Console面板中的大部分比较常用的函数扩展到jQuery的fn对象中，作为一个插件，它的实现原理和使用都很方便。

一、插件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

	jQuery(function($) {
		$.fn.extend({
			log : function(typeIndex, msg) {
				switch(typeIndex) {
					case 0:
						console.log(msg);
						break;
					case 1:
						console.debug(msg);
						break;
					case 2:
						console.info(msg);
						break;
					case 3:
						console.warn(msg);
						break;
					case 4:
						console.error(msg);
						break;
				};
			}, 
 
			timer : function(type, mark) {
				if(type == 'start') {
					console.time(mark);
				} else if(type == 'end') {
					console.timeEnd(mark);
				};
			},
 
			trace : function() {
				console.trace();
			},
 
			group : function(type) {
				if(type == 'start') {
					console.group();
				} else if(type == 'end') {
					console.groupEnd();
				};
			},
 
			count : function(title) {
				console.count(title);
			},
 
			dir : function(object) {
				console.dir(object);
			},
 
			profile : function(type, title) {
				if(type == 'start') {
					console.profile(title);
				} else if(type == 'end') {
					console.profileEnd();
				};
			}
		});
	});

二、测试页的Html代码：

1

<div id="demo"></div>

三、测试页的调用代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

	jQuery(function($) {
		var $container = $('#demo');
 
		$container.profile('start', 'LoopAnchor');	//性能测试开始
		$container.timer('start', 'Loop');			//代码执行计时开始
 
		for(var i = 0; i< =1000; i++) {
			$container.html($container.html()+i+', ');
			$container.count('Loop count:');
			if(i%100 == 0) {
				$container.group('start');						//分组开始
				var index = Math.round(Math.random()*5);		//根据不同序号，给出不同的记录方式	
				$container.log(index, '<i%100==0>: i='+i);
				$container.trace();								//追踪执行过程
				$container.group('end');						//分组结束
			};
		};
 
		$container.timer('end', 'Loop');			//代码执行计时结束
		$container.profile('end');					//性能测试结束
 
		$container.log(0, '\n\rDir $.fn对象:');
		$container.dir($.fn);			//列出jquery中fn对象的所有方法和属性
	});

下载源压缩包的，记得引入jQuery库哦！

附上Console面板函数列表图片一张：

你也许会喜欢阅读这些：

• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2009年11月2日 -- 插件:我的第一个插件–简约的scrollTop滑动插件 (23)
• 2009年08月21日 -- jQuery:Scrolltop滑动插件推荐（修正注释版） (25)
• 2009年06月18日 -- jQuery plugins for DW4 (2)
• 2011年11月25日 -- 插件：Firebug扩展插件FireQuery (2)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年05月21日 -- 扩展:Adobe放出Dreamweaver CS5 HTML 5扩展包 (16)

Firefox将支持CSS3 calc()，它通过一个算术表达式用来计算出一个长度值。这就意味着你可以用它来定义DIVs的大小，margins的值，borders的宽度，等等。

一、calc()

例子一：下面的例子用来展示一个棘手的布局问题，通过CSS3 calc()可以轻松实现：

1
2
3
4
5
6
7
8
9
10

/*
* 两个DIVs对准，外间距为1em
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

不使用calc()的话，若通过百分比来控制宽度，并希望有1em外间距时，是无法实现的。当我们使用到外间距是，必须用页面宽度减去两个DIVs的宽度，这样的话就不够灵活了。

例子二：通过calc()计算以保证一个input框的宽度不会超出其父标签的宽度：

1
2
3
4
5
6

input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

一个重要的特性是：在calc()方法的算术表达式中可以联合多个不同的单位进行计算：

1

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

calc()方法支持+, -, *, /, mod, min, 和 max 运算符。

二、min() | max()

另外：Firefox4将也支持min() 和 max()方法，使用如下：

1
2
3
4

div {
  height: -moz-min(36pt, 2em);
  width: -moz-max(50%, 18px);
}

资料参考来自：http://hacks.mozilla.org/2010/06/css3-calc/ | http://www.w3.org/TR/css3-values/#calc

你也许会喜欢阅读这些：

• 2011年11月25日 -- 插件：Firebug扩展插件FireQuery (2)
• 2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)

本月上升最快的依旧的Objective-C语言，加上本月苹果大会的召开，苹果开发者的热情都很高涨！PS：我也开始关注苹果，关注iPhone 4代，四代的外观设计绝对符合我的审美，所以期待一下国内水货的来临，但也不知4代价格又是多高！！

另外Javascript从上月的12位又回升了一位，回到11位了。而Java语言在失落了两个月后又回到了第一位的宝座，不知道下一次的失落会在何时！

2010年06月份编程语言前20名：如图

2010年06月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

WordPress是2003年第一次发布，打造了用来作为博主们建立博客的内容管理程序，而现今它已被认定为最流行的博客程序。Wordpress不断地用新的功能、特性在新的版本中更新出来，这样利用Wordpress已经完全可以搭建出一个完善的CMS，而不仅仅是博客。许多博主和一些大的商业公司都用Wordpress作为他们的CMS：CNN, Wall Street Journal, Nikon, Pepsi等等…Wordpress 3.0 已扩展成为用户友好创建一个完整的CMS网站的客户端。

3.0正式版预定在5月发行的，但到了5月底都还没有发行。由此可见，3.0版本有可能推迟到6月初才能发行。在写这篇博文时，3.0的测试版本2已经发现，你可以点击链接下载：http://wordpress.org/development/2010/05/wordpress-3-0-beta-2/

一、新菜单管理功能

在我看来，该特性是3.0版本中最为期待的一个功能，在默认安装后即可使用。在此之前，一般都是通过一些插件或者Wordpress技巧来实现的，但这样相对复杂，普通用户一般都不能完成。而现在，它将变得非常的简单。

你可以添加单页面、文章分类，甚至自定义网站链接。通过自定义网站链接特性，你可以直接连接到一篇博文、另一个网站，或者任何你想链接的地方。用户可以很友好地用来设置类似于目前的侧边栏小工具，你可以轻松地拖放来定制位置，只要你自己喜欢的话。

二、自定义文章类型功能

在已发行的版本中，你只能添加文章或者单页面。在3.0版本中，你可以创建你专属的自定义文章类型，并建立相应的字段将他们联系起来。比如一个用户选择创建一个叫“播客”类型的文章，那么程序将仅添加“播客”类型的文章，就是那么简单。你不必通过程序走一个复杂的过程，去解释为什么需要添加一个新的分类为“播客”的文章，只需要点击某一特定的类别并填写某些自定义字段即可。只需要一个简单的步骤，而不再需要一些插件。

三、多站点功能

WordPress MU不久前宣布它将由一个独立的个体集成到Wordpress 3.0中。MU允许你通过一个管理员去管理多个站点。这对运行了多个站点或者博客的人来说是非常好的，只需一次登陆便可以在一个地方管理多个站点。这对于一些分享模板、内容、或者插件的站点来说是非常有用的。只需一次安装，即可用更少的工作和时间做同样的事情。

3.0版本中默认是不开放该功能的，不过可以通过很简单的步骤即可开启该功能。首先在wp-config.php中添加下面的代码：

1

define('WP_ALLOW_MULTISITE', true);

然后在后台的Tools菜单栏下就会出现“Network”菜单。点击后输入Network Title、管理员邮件地址后，点击安装。 WordPress会让您自行选择设置这些站点是存放在次级领域还是次级目录下。 如果你将Wordpress安装在一个子文件夹中或者是在本地测试，Wordpress将会推荐你使用子目录。

四、其他一些值得注意的功能

1.在安装的过程中，你可以选择自己的用户名和密码，而不像之前的版本是默认的admin用户名，而密码是自动随机生成；

2.新的默认主题：2010。看起来貌似不错哦，简洁和轻量级，尽可能少的样式属性。

本文整理和翻译自：http://webdesignledger.com/tools/wordpress-3-0-changing-the-way-we-manage-content

你也许会喜欢阅读这些：

• 2009年09月13日 -- Wordpress:2.9版本–新的特性 (13)
• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年05月13日 -- 开源:使用Imagevue Gallery搭建Flash动态相册 (21)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)

本月的重大突破是Objective-C语言，作为苹果公司的iPhone和iPad的开发语言，备受各类开发人员的亲耐。再加上近年来苹果电脑的逐渐平民化，更多的人选择使用苹果电脑，也带动了更多的开发者来开发苹果软件。

另外Javascript从上月的10位掉到了12位，而C语言的占有率继续上升，Java语言的占有率继续下降。

2010年05月份编程语言前20名：如图

2010年05月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

通过该扩展包，DW CS5 将获得以下新特性：

1. 多屏幕预览面板，适用于同时为不同设备开发 HTML 应用
2. 支持对 HTML 5 新增的标签库的代码提示
3. 支持对 CSS 3 代码提示
4. 增加 Video 和 Audio 标签的实时预览
5. 改进 CSS 3 实时预览效果
6. 改进设计视图下对 HTML 5 新增标签的渲染效果

安装了该扩展后再也不用担心不记得难记的css3样式代码了！

点击http://download.macromedia.com/pub/labs/html5pack/html5pack_p1_051910.zxp下载。

你也许会喜欢阅读这些：

• 2009年12月25日 -- 软件:查看页面的http请求软件HttpWatch (10)
• 2011年11月25日 -- 插件：Firebug扩展插件FireQuery (2)
• 2011年01月11日 -- 软件:使用IntelliJ IDEA，高效前端开发 (50)
• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年06月30日 -- Firebug:Javascript测试利器，Console面板函数详解 (4)
• 2010年04月23日 -- 软件:心智图法(Mindjet MindManager)，思维图制作 (10)
• 2010年03月17日 -- 软件:MyEclipse 8.5发布，附注册码 (12)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2010年01月13日 -- 软件:Mozilla软件系列之邮件、日历软件 (15)
• 2009年11月2日 -- 插件:我的第一个插件–简约的scrollTop滑动插件 (23)

1
2
3

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" />< ![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" />< ![endif]-->

这样的方法在我所有的网站或者博客中都是如此应用，但我也一直在纠结着多出了多余的样式表文件，HTTP请求也就多了一个。这对于我这个做前端的是一个严重的问题，但一直都没有找到可以优化的方法。

但是今天我看到了一篇文章，他教会了我另一种条件判断的方法。可以用条件判断的结果来添加多余的包含标签。同时也发现，自己思考的太少了。实现方法如下：

1
2
3
4
5
6
7
8
9
10
11

<!--[if IE 6]>
	<div id="ie6">
< ![endif]-->
		<div id="content">
			<div id="main"></div>
			<div id="sidebar"></div>
		</div>
		<div id="footer"></div>
<!--[if IE 6]>
	</div>
< ![endif]-->

通过这样的方法，我只需要一个样式表文件，然后在样式表中通过子选择器的方法来给出相应版本的css样式控制。如下：

1
2

#main {background: white;}
#ie6 #main {background: black;}

是不是你看到了也觉得惊奇呢，我就在感慨我怎么之前没有看到过这样的技巧文章了，发现原来该博主今天才更新了该文。我实在太幸运了，在我的新版主题里，我将采用这种区别IE版本的方法来控制css样式。

追加一个Demo页面，大家可以通过IETester查看，不同版本下，样式是不一样的。

download demo

Demo的css样式：

1
2
3
4
5
6

* { margin:0; padding:0;}
body { font:24px Tahoma, Geneva, sans-serif; color:#666;}
#main { margin:30px auto; width:400px; height:100px; line-height:100px; border:1px solid #ccc; background:#eee; text-align:center;}
#ie8 #main { color:#f00; border-color:#f60; background:#9FF;}
#ie7 #main { color:#36F; border-color:#009; background:#F0F;}
#ie6 #main { color:#f60; border-color:#090; background:#FFC;}

Demo的Html源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!--[if IE 8]>
	<div id="ie8">
< ![endif]-->
<!--[if IE 7]>
	<div id="ie7">
< ![endif]-->
<!--[if IE 6]>
	<div id="ie6">
< ![endif]-->
 
	<div id="main">Target-IE-Version</div>
 
<!--[if IE 6]>
	</div>
< ![endif]-->
<!--[if IE 7]>
	</div>
< ![endif]-->
<!--[if IE 8]>
	</div>
< ![endif]-->

该技巧学习自文章：Target Every Version of IE from a Single Stylesheet

你也许会喜欢阅读这些：

• 2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
• 2009年09月3日 -- CSS:分享一些常用的css技巧 (8)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年03月8日 -- CSS:CSS3基础（附图） (12)
• 2010年02月20日 -- Wordpress:如何将GoogleBuzz数据插入到博客中 (11)
• 2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
• 2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
• 2009年09月16日 -- Wordpress:正确地引入comment-reply.js文件 (23)

昨天终于发现之前看到的博友的Flash相册程序，发现官网上是需要购买的，价格还不便宜。在网上搜了下，可以下到源码。便利用今天白天的时候在Hiro个人站下搭建了一个子域名的相册网站：http://gallery.ihiro.me，欢迎大家前去围观。

博客空间暂时不支持Exif扩展，正在与酋长协商打开该PHP扩展，希望尽快即可浏览照片Exif信息。

Imagevue Gallery介绍：(部分摘自：Imagevue中文站)

Imagevue是一个超酷超炫的相册网站程序。
Imagevue易于安装升级，易于管理，可轻松的更新您的照片库的新图像，你只需要上传照片到您的服务器空间，其他工作都是自动的！
Imagevue包括相册、幻灯片播放和后台管理三大部分。

另外我发现，该程序是上传图片后生成相应缩略图，无需数据库支持，程序会根据相册目录结构读取相册层次关系。后台支持多中主题的切换，支持Flash和Html两个格式的相册展示。而且无需配置，只需传到空间后登陆后台设置即可！

相册展示：

Hiro’s Gallery:http://gallery.ihiro.me
更多的暂时效果请访问英文官网浏览：http://www.imagevuex.com/imagevue/demo

Imagevue Gallery2.16版本下载：

下载页面地址：http://www.newasp.net/code/php/21958.html

你也许会喜欢阅读这些：

• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)

.org域名本来就是用在非赢利机构的，用来分享开源的技术知识再合适不过了；而.me域名是个人个性域名，恰好用来分享个人的生活点滴。利用昨晚和今早的时间完成了数据的迁移和分类更新，大家可以通过访问两个博客看到具体的效果。经过规划后，将ihiro.org、ihiro.me两个域名的内容定位如下：

ihiro.org:分享前端、后台、互联网、开源、软件、技术书籍

ihiro.me:分享生活、摄影、影评、读书

Hiro两个博客的规划图：

希望大家不仅可以关注我的技术站，也要关注我的个人站，因为这两个站都是我的劳动成果。多谢支持！

你也许会喜欢阅读这些：

• 2010年04月23日 -- 软件:心智图法(Mindjet MindManager)，思维图制作 (10)

什么是思维导图？
思维导图，又叫心智图，是表达放射性思维的有效的图形思维工具。是一种革命性的思维工具。简单却又极其有效！
思维导图运用图文并重的技巧，把各级主题的关系用相互隶属与相关的层级图表现出来，把主题关键词与图像、颜色等建立记忆链接，思维导图充分运用左右脑的机能，利用记忆、阅读、思维的规律，协助人们在科学与艺术、逻辑与想象之间平衡发展，从而开启人类大脑的无限潜能。思维导图因此具有人类思维的强大功能…

MindManager的界面和Win Office2007的风格完全一致，只是里面的按钮功效有很多独特的。现在的最新版已经到8.2.319了，但网上实在找不到破解最新版的资料。我便用了一个有破解的8.0.127版本。操作和制作也非常简单，唯一的缺点貌似没有中文语言包，或许低版本的有吧，没去试过。

在这里我就不讲解怎么制作了，想用的人可以自己琢磨。分享一个下载链接吧（含破解文件）：
Mindjet MindManager Pro V8.0.217 破解版

最后再给大家看看我做的一个简单的关于上海居住证办理的导图：

你也许会喜欢阅读这些：

• 2011年01月11日 -- 软件:使用IntelliJ IDEA，高效前端开发 (50)
• 2010年05月21日 -- 扩展:Adobe放出Dreamweaver CS5 HTML 5扩展包 (16)
• 2010年05月7日 -- 规划:.org与.me域名的内容定位 (24)
• 2010年03月17日 -- 软件:MyEclipse 8.5发布，附注册码 (12)
• 2010年01月13日 -- 软件:Mozilla软件系列之邮件、日历软件 (15)
• 2009年12月25日 -- 软件:查看页面的http请求软件HttpWatch (10)
• 2009年10月21日 -- 软件:MyEclipse 8.0发布，附注册码 (10)
• 2009年09月11日 -- 游戏:3D动作冒险类游戏《迷你忍者》 (10)
• 2009年08月18日 -- 软件:用上了Zend Studio 7.0，分享序列号 (10)

在这里感谢Wopus提供了数据转移的技术支持，并不是我自己不会弄，而是没有那个时间折腾。经过一个上午的测试，发现新主机的速度非常快。之前我访问后台，因启动了Akismet插件的原因速度非常慢，弄得我有时得禁了该插件再访问后台。现在发现即使Akismet插件启动着，后台的访问速度依然很快，希望这样的速度一直可以保持下去！

昨天也花了点时间把增强型Ajax提交评论重新写了下，现在提交和反馈的速度应该快乐很多，当然若还遇到什么问题，希望大家可以给我提出来！同时也希望各位来访者留下你的访问速度测试意见，帮我测试现在博客的访问速度，非常感谢！！

在此也期待一下酋长可以尽快将我的ihiro.me域名备案完成，这样我就可以再用上新域名了。

你也许会喜欢阅读这些：

• 2009年06月22日 -- 6个选择虚拟主机的要点 (2)
• 2010年03月22日 -- GoDaddy:购入新域名ihiro.me (30)
• 2009年12月4日 -- DNS:Wopus服务器迁移，停博一天终恢复 (12)
• 2009年07月31日 -- 主机:空间转移成功，大家帮忙测试 (11)
• 2009年06月18日 -- 域名常识 (3)

Java语言第一次破天荒地从第一的位置掉到了第二位，被C语言抢占了第一的宝座。不知道这是不是受到被收购的原因。另外PHP语言被C++从上月第三的位置排挤到了第四。就该月的排名看来，现在微软的语言上升劲头强势啊，连C#的份额也在上升啊！

2010年04月份编程语言前20名：如图

2010年04月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

下面我对几处增强Ajax效果进行一下具体说明，大家以后访问我博客时也可以适当地使用。之所以说是增强型Ajax效果，是因为我并没有改变原先的代码，而是在原始代码基础上添加了jQuery控制，这样即使jQuery代码没有加载完成时，你也可以访问到相应的页面。

1.Ajax加载历史文章列表：

在博客的右边有一个最新文章板块，大家可以看到在标题的右边有上页、下页的链接，点击相应的链接便可Ajax加载上下页的文章列表，每次加载10条。图：

2.分类Ajax加载相关最新10条文章记录：

点击博客左边的每个摘要型Post的分类链接、博客右边的分类目录版块链接或者每篇完整型文章的分类链接。会出现一个loading的shadow层，加载完成后罗列出该分类下的最新文章。图：

3.标签Ajax加载相关最新10条文章记录：

点击博客左边的每个摘要型Post的标签链接、博客右边的热门标签版块链接或者每篇完整型文章的标签链接。同样会出现一个loading的shadow层，加载完成后罗列出该标签下的最新文章。图：

4.Ajax提交评论和回复别人的留言：

在此之前，没此提交评论后，当前页面都要重新加载一次，很是耗时。添加Ajax评论后，速度会更快，也大量减少了请求。我的博客一直只提供2层回复。不喜欢多层次回复，看着很难受！具体Ajax评论效果大家只需留言即可看到。

花了精力添加这些Ajax效果，无非是为了让各位博友和来访者可以更加方便地阅读我的博客，同时也希望大家可以多多给我意见。每次添加新的功能我都会在左边的蓝条里写出来，大家可以一目了然地看到我最新的修改信息。

希望我的努力可以让你多多回访，多多支持！！

你也许会喜欢阅读这些：

• 2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
• 2010年06月30日 -- Firebug:Javascript测试利器，Console面板函数详解 (4)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
• 2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)

后来想到大家都常说的GoDaddy国外注册网站，搜索了ihiro.me域名，只要$8.99，折合成人民币60元多点。比较符合我的心理价位，但没有立即就买。因为据我所知，用信用卡支付美元到时候还款很麻烦的！正好公司有个同事前段时间注册了个.me的域名，也在GoDaddy上买的。今天便咨询了一下他购买的事宜，结果他告诉我GoDaddy是支持支付宝支付的，支付宝会自动将美元折合成人民币支付的。就这样，按照步骤顺利地购入了ihiro.me。

我准备用ihiro.me做主域名，然后将ihiro.org设置为跳转。逐步地将ihiro.me的排名和PR都升上去。等机会成熟了将ihiro.org抛弃或者以后有了新的构思的话，再搞个别的网站或博客什么的！

今天下午的时候将ihiro.me和备案信息报给了酋长，让他帮我添加新的备案。等ihiro.me的备案下来后就设置过来。到时会在博客上贴出通知的，希望到时各位与我有交换链接的博友都更换我的域名到ihiro.me。ihiro.org就让搜索引擎去搜索吧！

你也许会喜欢阅读这些：

• 2010年04月15日 -- 空间:博客迁移新Wopus主机，大家帮忙测试 (16)
• 2009年06月22日 -- 6个选择虚拟主机的要点 (2)
• 2009年06月18日 -- 域名常识 (3)

发现新版本的安装速度相对之前快了，启动速度还是那样地慢。进去后，没有了欢迎页，而是换成了MyEclipser Configuration Center。整体使用起来貌似反映速度快了点，其他没啥感觉。

下载地址：

电驴、迅雷下载：MyEclipse 8.5M1下载

注册码：

在网上搜到的几组注册码，未测试！

name:myeclipse8.5
code:zLR8ZC-855550-68567156703100078

name:52accptech
code:0LR8ZC-855550-68567157524981450

name:bingchuan
code:oLR8ZC-855550-68567157669572882

你也许会喜欢阅读这些：

• 2011年01月11日 -- 软件:使用IntelliJ IDEA，高效前端开发 (50)
• 2009年10月21日 -- 软件:MyEclipse 8.0发布，附注册码 (10)
• 2009年08月18日 -- 软件:用上了Zend Studio 7.0，分享序列号 (10)
• 2010年05月21日 -- 扩展:Adobe放出Dreamweaver CS5 HTML 5扩展包 (16)
• 2010年04月23日 -- 软件:心智图法(Mindjet MindManager)，思维图制作 (10)
• 2010年01月13日 -- 软件:Mozilla软件系列之邮件、日历软件 (15)
• 2009年12月25日 -- 软件:查看页面的http请求软件HttpWatch (10)
• 2009年09月11日 -- 游戏:3D动作冒险类游戏《迷你忍者》 (10)

1.理解jQuery方法：

当你调用jQuery方法时会发生什么呢？看看jQuery的方法体，非常地简单。

1
2
3
4

jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

在表层的代码之下，jQuery方法（通常称之为“包装”方法）将返回一个实例化后的jQuery对象，即’jQuery.fn.init’构造函数的一个实例。

理解了这一点非常有用，当我们每次调用jQuery方法时，都会返回一个带有一组属性的完全独立的对象。而jQuery的聪明之处在于返回的这个对象是以数组的方式返回的。该对象中的所有元素（通称”集合“）都是由一个数字索引所指向，就像数组中的下标一样。而且jQuery还返回了一个对象的length属性，就像数组中的长度一样。这种思想给jQuery方法提供了无限的想象空间。比如，我们可以从’Array.prototype’中借用一些功能性方法。jQuery中的slice方法就是一个典型的例子：

1
2
3
4
5
6
7
8
9
10

/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(<wbr>arguments).join(",")
    );
},
/* ... */
</wbr>

在该slice方法不管this是否是一个真实的数组，它和其他的元素会和睦地相处，因为有着”length“这么一个属性。

jQuery中还有一些其他有趣的属性，比如”selector”—选择器，”context”—-上下文等。大部分的时候，只需给jQuery方法传递对象参数即可：

1
2

var jqObject = jQuery('a');
jqObject.selector; // => "a"

一个重要的提示是，jQuery有时会返回一个全新的对象供你使用。比如你试图通过执行一段代码来改变一个集合，如”parent()”方法，但是此时jQuery将不会修改当前的对象，它会返回给你一个全新的对象。

1
2
3
4

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();
 
originalObject === anotherObject; // => false

所有试图改变集合的方法都会返回一个新的jQuery对象，你可以通过”.end()”方法或”.prevObject”属性来访问之前的那个对象。

2.面包、奶油元素的建立：

jQuery创建DOM的能力，是其核心功能之一。jQuery1.4新版本带来了一个全新的便捷地创建DOM对象的方法，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var myDiv = jQuery('<div />', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('<a />', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

在1.4版本中，当你创建一个元素对象时，可以再传入第二参数，该第二参宿可以作为该元素对象的属性设置，也可以理解会调用了.attr()方法。当然，jQuery会自行匹配传入的参数们，如’click’对应了jQuery库中的.click方法，以及’css’、’html’分别对应了jQuery库中的.css()、.html()方法，等等…

3.序列化表单中的input元素：

jQuery提供了一个方法可以将1个或多个表单中的所有input元素进行序列化，这在Ajax提交数据时非常有用。其实该方法在jQuery库中已经存在很长的时间了，但一直很少谈及，所以很多的程序员都忽略了它。通过jQuery中的Ajax方法提交整个表单将变得非常简单。

1
2
3
4

var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
    alert('Data has been sent!');
});

jQuery同样也通过了一个’serializeArray’方法，他通常用在多个form表单存在，需要自行收集数据的情况。在jQuery的命名空间下有一个’param’辅助方法可以将一个数组对象处理后返回成一个查询字符串。

1
2
3
4
5
6
7
8

var data = {
    name: 'Joe',
    age: 44,
    profession: 'Web Developer'
};
 
jQuery.param(data); // => "name=Joe&age=44&profession=<wbr>Web+Developer"
</wbr>

4.任何元素都可以动画方式展现：

jQuery中的’animate’方法也许是最灵活的jQuery的方法。它可以用几乎任何东西来制作动画，而不仅仅是CSS属性，或者是DOM元素。通常会这样使用’动画’：

1
2
3
4

jQuery('#box').animate({
    left: 300,
    top: 300
});

当您给.animate()方法指定一个属性时（例如’top’），jQuery会检查你是否是想通过某个css属性来控制动画风格。首先jQuery会检查css样式中是否存在该top属性，若不存在，则jQuery会自行地给对应元素加上该属性。下面是一个例子：

1
2
3
4

jQuery('#box').animate({
    top: 123,
    foo: 456
});

上面的代码中’top’是一个可用的css属性，则jQuery就会改变’element.style.top’,但是’foo’不是一个可用的css属性，所以jQuery将只更新’element.foo’。

我们可以利用这个优点来实现一些有趣的效果。比方说，例如，您要在一个画布上使一个正方形动画起来。首先让我们定义一个简单的构造和一个在每一步都会调用的’drwa’的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function Square(cnvs, width, height, color) {
 
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.color = color;
 
    this.cHeight = cnvs.height;
    this.cWidth = cnvs.width;
    this.cntxt = cnvs.getContext('2d');
 
}
 
Square.prototype.draw = function() {
 
    this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
    this.cntxt.fillStyle = this.color;
    this.cntxt.fillRect(this.x, this.y, this.width, this.height);
 
};

通过jQuery方法创建一个canvas画布元素（需要html5支持），再实例化一个正方形对象，通过调用.animate()方法在动画的每一步过程中调用.draw()方法，这样就可以轻易地使该正方形动画起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Create a <canvas /> element
var canvas = $('<canvas />').appendTo('body'<wbr>)[0];
canvas.height = 400;
canvas.width = 600;
 
// Instantiate Square
var square = new Square(canvas, 70, 70, 'rgb(255,0,0)');
 
jQuery(square).animate({
    x: 300,
    y: 200
}, {
    // 'draw' should be called on every step
    // of the animation:
    step: jQuery.proxy(square, 'draw'),
    duration: 1000
});
</wbr>

这是一个非常简单的效果，但它清楚地表明了jQuery的无限可能性。你可以通过下面的链接看到具体的效果（需要浏览器支持html5）：Demo

5.jQuery.ajax方法返回XHR对象：

jQuery的 Ajax方法是一个多功能的方法，它包含了’jQuery.ajax’, ‘jQuery.get’, ‘jQuery.post’等多个方法，这些方法在调用后都会返回一个’XMLHttpRequest’ 对象，从而来实现请求完成后的后续操作。如：

1
2
3
4
5
6
7
8
9
10
11
12
13

var curRequest;
 
jQuery('button.makeRequest').click(function(){
    curRequest = jQuery.get('foo.php', function(response){
        alert('Data: ' + response.responseText);
    });
});
 
jQuery('button.cancelRequest').click(function(){
    if (curRequest) {
        curRequest.abort(); // abort() is a method of XMLHttpRequest
    }
});

上面的代码中当我们点击’makeRequest’按钮时，Ajax请求将会被触发。而当我们点击’cancelRequest’按钮时，该请求则会被取消。

另一个潜在的用途是同步请求：

1
2
3
4
5
6

var myRequest = jQuery.ajax({
    url: 'foo.txt',
    async: false
});
 
console.log(myRequest.responseText);

请多的资料可以阅读‘XMLHttpRequest’，也可以阅读Ajax的API文档jQuery’s Ajax utilities

6.自定义队列：

jQuery的有一个内置的队列机制，一般都是有.animate等动画方法使用的（如：.fadeOut()、.fadeIn()等，实质都是有.animate()方法实现）。这种队列机制可以用一个简单的动画就可以说明：

1
2
3
4
5

jQuery('a').hover(function(){
    jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
    jQuery(this).animate({paddingLeft:'-=15px'});
});

快速地在一个链接标记上鼠标移入、移出，当再次移入时，会导致动画的效果反复执行。不信你可以到这里试试：Demo

‘queue’方法和大家熟知的’each’方法比较相似，你通过给方法传递一个函数参数，则该函数将被匹配集合中的每个元素所调用：

1
2
3

jQuery('a').queue(function(){
    jQuery(this).addClass('all-done').dequeue();
});

给’queue’方法只传入一个函数参数的话会导致该函数被添加到默认的’fx’队列中。若刚好该队列会被jQuery中的所有动画对象所调用，那么只有等前面的这些对象都调用后，才会轮到自己。
鉴于该点，在上面的代码中我给对象添加了一个名为’all-done’的class，根据协议，这个class只有在当前所有的动画都执行完成后才会添加。在代码中我们也调用了.dequeue()方法。这一点很重要，它将使jQuery的继续进行队列。jQuery1.4版本提供了另一个可以继续队列的方法nextItemInQueue()，它可以用来取代调用.dequeue()方法。它的调用只需将第一个参数传递给方法即可：

1
2
3
4
5

jQuery('a').queue(function(<wbr>nextItemInQueue){
    // Continue queue:
    nextItemInQueue();
});
</wbr>

当然两个方法也不完全相同，nextItemInQueue()可以在方法体内部的任何地方都可以调用，即使在一团糟的匿名函数内（典型情况是’this’对象被破坏）。当然在1.4版本前，你可以尽可能地保存一个对’this’对象的引用，但这样使用起来有点累。

要想向自定义队列中添加方法，只需将你自定义的队列名称作为第一参数，而将方法体作为第二参数传入即可：

1
2
3
4

jQuery('a').queue('customQueueName', function(){
    // Do stuff
    jQuery(this).dequeue('customQueueName');
});

需要认识的一点，为了不将该队列添加到默认的’fx’队列中，我们需要将自定义的队列名传入.dequeue()方法中，这样在队列结束后，可以保证jQuery队列可以继续执行下去。

更多的资料可以阅读‘queue’,‘dequeue’,‘jQuery.queue’

7.事件命名空间：

jQuery提供了一个命名时间名称的方法，这在编写插件或第三方组件时非常有用。当需要时，您的插件用户可以通过取消绑定这些你注册事件名称即可。

向命名空间中添加注册一个事件处理名称，只需在事件名称后添加自定义的后缀名（如：.fooPlugin):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery.fn.foo = function() {
 
    this.bind('click.fooPlugin', function() {
        // do stuff
    });
 
    this.bind('mouseover.fooPlugin', function() {
        // do stuff
    });
 
    return this;
};
 
// Use the plugin:
jQuery('a').foo();
 
// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');

取消绑定是只需调用.unbind()方法，并传入自定义事件名称即可实现。

总结：

jQuery中的隐藏功能远远不止这些，在以后的文章中会再总结一些我自己发现的功能与大家分享。

本文翻译自：Uncovering jQuery’s Hidden Features

你也许会喜欢阅读这些：

• 2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
• 2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)
• 2010年03月8日 -- CSS:CSS3基础（附图） (12)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2009年12月16日 -- jQuery:通过事件委派一次绑定多种事件，以减少事件冗余 (7)
• 2009年12月1日 -- jQuery:如何在页面和插件代码中自定义别名 (5)
• 2009年11月30日 -- HTML:编写干净的且富有语义的html代码 (13)
• 2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
• 2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
• 2009年08月6日 -- jQuery:两个样式下拉菜单(click hover) (8)

这个月的编程语言排行榜比较平静，没有太大的变化。PHP仍旧保持的继续上升的势头，市场占有率继续增加。另外升的比较明显是的数学建模编程语言Matlab，上升了4个排名。就市场占有率来看，貌似微软的所有编程语言都在走下坡路，一直在少量地减少。

2010年03月份编程语言前20名：如图

2010年03月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年02月8日 -- 资讯:2010年02月编程语言排行榜 (6)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。

1.RGBA

RBGA是用于css的background属性，前三个参数是RBG颜色值，最后一个参数是透明度设置。RGBA也可以使用在css中与颜色相关的所有属性中，如color,border-color,background-color,shadow-color等。

2.Text Shadow

text-shadow的设置值是由x-offset, y-offset, blur, color四个参数组成。若给x-offset设置一个负值，则阴影偏向左边；若个y-offset设置一个负值，则阴影偏向顶部；当然你也可以使用RGBA来设置第四个参数color。你也可以给text-shadow设置一系列的值（用逗号隔开）。下面的图片展示了两个值来设置一个单词的印刷效果（1px向上，1px向下）：

3.Border Radius

对border radius的记忆方法就和padding、margin一样(如： border-radius: 20px)。为了达到多浏览器兼容，需要在该属性前加上“-moz-“用于火狐浏览器、加上”-webkit-“用于谷歌和苹果浏览器。（IE浏览器不支持此CSS3高级属性）你也可以分别设置四个角的圆角直径，火狐浏览器与苹果（谷歌)浏览器的设置属性有所差别，看图：

4.Box Shadow

box shadow属性设置值的构成与text-shadow是一样的，都是有四个属性：x-offset, y-offset, blur, color组成。当然，box-shadow也可以用一系列的值来设置属性，如：

1
2
3
4

-moz-box-shadow:
		-2px -2px 0 #fff,
		2px 2px 0 #bb9595,
		2px 4px 15px rgba(0, 0, 0, .3);

效果如下图：

最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！

本文翻译自:Web Designer Wall — The Basics of CSS3

你也许会喜欢阅读这些：

• 2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
• 2010年11月25日 -- CSS:position属性定位总结 (27)
• 2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
• 2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
• 2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2009年11月30日 -- HTML:编写干净的且富有语义的html代码 (13)
• 2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
• 2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)

在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！

先来看看重写后的播放效果吧！

download demo

一、下载后的初始Html代码和JS代码：

Html代码(在需要显示图片播放的代码处添加)：

1

<script type="text/javascript" src="flashImgPlay.js"></script>

flashImgPlay.js中的Javascript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var pic_width=480; 
var pic_height=166; 
var button_pos=3; 
var stop_time=3000; 
var show_text=0; 
var txtcolor="000000"; 
var bgcolor="DDDDDD"; 
var imag=new Array();
var link=new Array();
var text=new Array();
imag[1]="images/pics/news09-col-manual.jpg";
link[1]="news/coll-manual.php";
imag[2]="images/pics/news02.jpg";
link[2]="news/mid_school.php";
 
var swf_height=(show_text==1)?pic_height+20:pic_height;
var pics="", links="", texts="";
for(var i=1; i<imag .length; i++){
	pics=pics+("|"+imag[i]);
	links=links+("|"+link[i]);
	texts=texts+("|"+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="flash/focus.swf">');
document.write('</param><param name="quality" value="high"></param><param name="wmode" value="opaque">');
document.write('</param><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('');
</param></imag>

二、重写后的Html代码、Css代码以及JS代码：

Html代码(在需要显示图片播放的代码处添加)：

1
2
3
4
5
6
7
8

<div class="flash">
    <ul>
        <li class="first"><a href="#" target="_blank"><img src="1.jpg" alt="banner1" /></a></li>
        <li><a href="#" target="_blank"><img src="2.jpg" alt="banner2" /></a></li>
        <li><a href="#" target="_blank"><img src="3.jpg" alt="banner3" /></a></li>
        <li><a href="#" target="_blank"><img src="4.jpg" alt="banner4" /></a></li>
    </ul>
</div>

需要用到的Css代码：

1
2
3
4
5
6

* { margin:0; padding:0;}
body { text-align:center;}
img { border:none;}
.flash { width:500px; text-align:left; margin:50px auto;}
.flash li { list-style:none; display:none;}
.flash li.first { display:block;}

flashImgPlay.js中的Javascript代码（插件方式）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

;(function($) {
	$.fn.extend({
		flashImgPlay : function(options) {
			return this.each(function() {
				var defaults = $.extend({
					width : $('img:first', this).width(),
					height : $('img:first', this).height(),
					btn_pos : 3,
					stop_time : 3000,
					show_text : 0,
					txtcolor : '000000',
					bgcolor : 'dddddd',
					flash_src : 'focus.swf'
				}, options);
 
				var images = {
					imgs : [],
					links : [],
					texts : []
				};
 
				$('a', this).each(function() {
					images.imgs.push($('img', this).attr('src'));
					images.links.push($(this).attr('href'));
					images.texts.push($('img', this).attr('alt'));
				});
 
				var swf_height = (defaults.show_text == 1) ? (defaults.height + 20) : defaults.height,
					pics = '', links = '', texts = '';
 
				for(var i = 0, length = images.imgs.length; i < length; i++) {
					pics += '|' + images.imgs[i];
					links += '|' + images.links[i];
					texts += '|' + images.texts[i];
				};
				pics = pics.substring(1),
				links = links.substring(1),
				texts = texts.substring(1);
 
				$(this).html(
					'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ defaults.width +'" height="'+ swf_height +'">' +
						'<param name="movie" value="'+defaults.flash_src+'">' +
						'</param><param name="quality" value="high"></param><param name="wmode" value="opaque">' +
						'</param><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+defaults.width+'&pic_height='+defaults.height+'&show_text='+defaults.show_text+'&txtcolor='+defaults.txtcolor+'&bgcolor='+defaults.bgcolor+'&button_pos='+defaults.btn_pos+'&stop_time='+defaults.stop_time+'">' +
						'<embed src="'+defaults.flash_src+'" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+defaults.width+'&pic_height='+defaults.height+'&show_text='+defaults.show_text+'&txtcolor='+defaults.txtcolor+'&bgcolor='+defaults.bgcolor+'&button_pos='+defaults.btn_pos+'&stop_time='+defaults.stop_time+'" quality="high" width="'+ defaults.width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
					''
				);
			});
		}
	});
})(jQuery);
</param>

调用方法：

1
2
3
4

jQuery(function($) {
	$('.flash').flashImgPlay();
	//$('.flash').flashImgPlay({stop_time:200, show_text:1}); 自行设置播放间隔、是否显示图片标题  
});

三、重写前后的比较说明：

原始代码使用需要在Html代码内嵌入js文件，若一个页面中需要多个图片播放的话（大型网站上常有），就需要创建多个JS文件，并在一个页面中多次引入JS文件嵌套到Html代码内。这严重违背了三层分离的原则。重写后的插件版，只需在文档底部引入一次JS文件，通过方法调用就可以实现一个页面中多个图片播放效果。新代码是自识别图片的大小，从而实现自适应效果。

不过貌似该效果使用到的foucs.swf的as代码中没有支持.gif格式的图片（这也是我多花了半个小时来调试），又因我暂时还不太会AS编程，所以没对focus.swf进行修改。所以大家使用时图片需采用.jpg格式。另外貌似若设置show_text:1的话，就是显示图片的标题，默认的第一个是现实原作者的版权链接。这些只是对该foucs.swf的bug的说明！

你也许会喜欢阅读这些：

• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
• 2010年02月24日 -- Javascript:新消息闪烁标题提示代码分享 (7)
• 2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
• 2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
• 2009年07月10日 -- jQuery:书籍展示效果 (6)
• 2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
• 2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
• 2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)

特意将这些代码写成jQuery插件的格式，这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码，不知道怎么概括性地发布出来，所以就已文章的形式陆续贴出来与大家分享。

以单篇文章发布的插件代码都是一些简单的代码，若是一些复杂的代码或插件我会归纳到插件专区里去，这样大家下载起来也方便！

一、插件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

;(function($) {
 
	$.extend({
		/**
		 * 调用方法： var timerArr = $.blinkTitle.show();
		 *			$.blinkTitle.clear(timerArr);
		 */
		blinkTitle : {
			show : function() {	//有新消息时在title处闪烁提示
				var step=0, _title = document.title;
 
				var timer = setInterval(function() {
					step++;
					if (step==3) {step=1};
					if (step==1) {document.title='【　　　】'+_title};
					if (step==2) {document.title='【新消息】'+_title};
				}, 500);
 
				return [timer, _title];
			},
 
			/**
			 * @param timerArr[0], timer标记
			 * @param timerArr[1], 初始的title文本内容
			 */
			clear : function(timerArr) {	//去除闪烁提示，恢复初始title文本
				if(timerArr) {
					clearInterval(timerArr[0]);	
					document.title = timerArr[1];
				};
			}
		}
	});
})(jQuery);

注意其中调用方法中的timerArr变量，若你在前面调用代码显示了效果，在页面的后面代码中需要清楚该闪烁效果的话，需要注意timerArr变量的作用域。若只是出现效果而无需清楚，则可以直接调用$.hiro.blinkNews.show()

二、调用方法

1
2
3
4
5
6
7
8
9

jQuery(function($) {
	var timerArr = $.blinkTitle.show();
 
	setTimeout(function() {		//此处是过一定时间后自动消失
		$.blinkTitle.clear(timerArr);
	}, 10000);
 
	//若人为操作消失，只需如此调用：	$.blinkTitle.clear(timerArr);
});

downloaddemo

你也许会喜欢阅读这些：

• 2010年10月21日 -- jQuery:热区高亮maphighlight插件推荐 (23)
• 2010年09月20日 -- jQuery:数字、字符串格式化扩展 (31)
• 2010年06月30日 -- Firebug:Javascript测试利器，Console面板函数详解 (4)
• 2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
• 2009年11月2日 -- 插件:我的第一个插件–简约的scrollTop滑动插件 (23)
• 2009年08月21日 -- jQuery:Scrolltop滑动插件推荐（修正注释版） (25)
• 2009年06月18日 -- jQuery plugins for DW4 (2)
• 2011年11月25日 -- 插件：Firebug扩展插件FireQuery (2)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)

在国外的博客上发现了下面的一段代码，可以通过Ajax跨域读取Buzz数据，以Json数据格式返回，我只需将返回的数量罗列成一个列表即可。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

jQuery(function($) {
	(function(){
		var username = 'hiro.zhd',		//gmail用户名
			num = 5,		//期望加载几条数据	
			div = $('#buzz');	//列表显示的盒子
 
	   // 需要传给Google Feed API 的参数 : Buzz Feed URL, Number of Entries 
	   var data = {q:'http://buzz.googleapis.com/feeds/' + username + '/public/posted', 
				num:num,
				output:'json',
				v:'1.0'};
	   // 调用Google Feed API
	   $.ajax({
		  url:'http://ajax.googleapis.com/ajax/services/feed/load',
		  data:data,
		  dataType:'jsonp',
		  success:function(json){
			 // 通过Google Feed API返回json数据
 
			 // 若返回状态标记错误，给出错误提示信息
			 if(json.responseStatus!=200) {
				div.html('<b style="color:red">'+ json.responseDetails +'</b>');
				return; 
			 };
			 // Buzz 记录是以一个数组返回
			 var entries= json.responseData.feed.entries;
			 var length= entries.length;
 
			 // length为0，表示没有任何记录
			 if(length==0) return; 
 
			 // 默认开始添加一个隐藏的列表元素，以便后边动画地显示
			 var ul = $('<ul class="gb" style="display:none"></ul>').appendTo(div.html(''));
 
			 // 循环buzz数组
			 for(var i=0; i<length ; i++){
				// 格式化发布时间
				var pDate = new Date(entries[i].publishedDate);
				// 获得内容
				var snippet = entries[i].contentSnippet;
				// 通过正则表达式转换链接的http格式
				snippet = snippet.replace(/\b(https?\:\/\/\S+)/gi,' <a href="$1">$1');
 
				ul.append('<li>'
				   +'<span class="gb-content">'+ snippet +'</span>'
				   +'<span class="gb-meta">'
					  + '<a href="'+ entries[i].link +'">'+ pDate.toLocaleString() +'</a>'
				   +'</span>'
				+'</li>');
			 };
 
			 ul.fadeIn('slow');
		  }
	   });
	})(jQuery);    //只有jQuery方法实例化完成后才执行
});
</length>

在此处我使用的是匿名函数的方式（一般只使用一次的函数体比较适用），在函数体内部使用$.ajax()方法，通过设置dataType:’jsonp’来跨域读取json数据后，遍历数据获得列表并显示出来。

downloaddemo

你也许会喜欢阅读这些：

• 2009年09月16日 -- Wordpress:正确地引入comment-reply.js文件 (23)
• 2009年09月6日 -- Wordpress:高亮管理员的留言信息 (37)
• 2009年08月31日 -- Wordpress:4个常见的显示博客版权的方法 (10)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
• 2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
• 2011年02月24日 -- Javascript:图片无限循环滚动 (27)
• 2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)
• 2010年11月22日 -- Range:文本框选区学习笔记 (16)

编程语言排行变幻莫测啊，这月你升一点，下月我升一点。2月的排名榜亦是如此，貌似Javascript现在一直是在9、10名间徘徊，而PHP的上升势头依然强悍啊，继续保持了第三的宝座，而且它的市场占有率仍在继续增加。Objective-C和Go编程语言分别借助于自己的开发公司：苹果和谷歌，市场份额的上升速度算得上是飞速了啊！

2010年02月份编程语言前20名：如图

2010年02月份编程语言前10名的走势图：如图

更多信息请访问：http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

你也许会喜欢阅读这些：

• 2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
• 2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
• 2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
• 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
• 2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
• 2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
• 2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)
• 2010年04月6日 -- 资讯:2010年04月编程语言排行榜 (10)
• 2010年03月9日 -- 资讯:2010年03月编程语言排行榜 (7)
• 2010年01月8日 -- 资讯:2010年01月编程语言排行榜 (12)

到这个月的7号吧，阿里广告在我的博客上滞留就有半年了。相信大家一定对我赚的Money数额有所兴趣。我很悲哀地告诉大家，我半年来只赚的18元RMB，不知道算不算是赚了呢？

最近一直在继续深入地自我学习：有JS，也有Flex（刚刚起步）。重心暂时放在JS上，现在对我来说，jQuery库我已经使用的非常熟练了，各个方法、插件也都比较熟悉，我缺少的是对实现原理的了解和原生态JS的知识加固。去年6月的时候买了John Resig的《精通Javascript》，当时就看了一遍，非常朦胧。最近又将这本书重新看起来，发现这次理解的更多了，同时也学到了更多的编程技巧和编程原理。

这篇博文有点乱，主要是有近10天没有更新博客了，就当作是一片杂感文章吧！！

你也许会喜欢阅读这些：

• 2009年08月7日 -- 网赚:抛弃谷歌、百度，转战阿里妈妈 (47)

九、去除标签元素的父标签：

在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：

1
2
3

<div>
    <p>Foo</p>
</div>

jQuery1.4版本中实现代码：

1

jQuery('p').unwrap();

执行后的话题Html代码如下:

1

<p>Foo</p>

>>>>阅读更多关于.unwrap()方法的资料…

十、不用删除数据，即可删除掉DOM中的标签元素：

新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。
jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var foo = jQuery('#foo');
 
// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});
 
foo.detach(); // Remove it from the DOM
 
// … do stuff
 
foo.appendTo('body'); // Add it back to the DOM
 
foo.click(); // alerts "Foo!"

>>>>阅读更多关于.detach()方法的资料…

十一、对.index()方法进行了扩展：

1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

点击li标签获得该li标签的序号

jQuery1.32版本中实现代码：

1
2
3

$('li').click(function() {
       alert($('li').index(this));	
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9

$('li').click(function() {
       alert($(this).index());	
});
 
//或者
 
$('li').click(function() {
	alert($(this).index('li'));				   
});

>>>>阅读更多关于.index()方法的资料…

十二、DOM控制方法支持回调函数：

在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，
以确定哪些应作为该方法的实际值。

下面的这些DOM控制方法都支持回调函数：

• after
• before
• append
• prepend
• addClass
• toggleClass
• removeClass
• wrap
• wrapAll
• wrapInner
• val
• text
• replaceWith
• css
• attr
• html

在回调方法中，若你想访问该匹配集合的话，你需要使用”this”，或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码：

1
2
3

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。

jQuery1.4版本中实现代码：

1
2
3

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。

jQuery1.4版本中实现代码：

1
2
3

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

十三、检测对象类型方法：

jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。

第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。

jQuery1.4版本中实现代码：

1
2
3
4
5
6

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
 
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

>>>>阅读更多关于.isEmptyObject().isPlainObject()方法的资料…

十四、.Closest()方法扩展：

扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !DOCTYPE html>
<html>
<head>
  <style></style>
  <script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
	<ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html>

执行后的结果是：

1
2

    * ul: UL
    * body: BODY

另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。

>>>>阅读更多关于.closest()方法的资料…

十四、新的事件机制（focusIn 、focusOut）：

新版本中若要给事件对象委派”focus”和”blur”事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7

   jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });