一、效果直击

CSS3下的圆形遮罩效果demo

因为是使用纯洁的CSS3实现，因此，IE6~8浏览器又一次光荣获得“打酱油”的称号！

将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单，代码如下：

然而想将一个javascript对象转化为json格式的字符串却并不那么简单，特别是对象的属性值递归包含一个对象时(如 var obj={a:[2,3],b:{m:[3,4],n:2} } ),那么有没有什么方法将obj转化为json格式的字符串呢？

一、使用 opacity + Alpha Filter


看起来手挺简单的吧？嗯。挺简单的… 希望你能很方便实现这个方案！其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 滤镜来实现。然后，我们得到这样的效果：

Tags: 半透明半透明

这是一个效果图

前端实现页面垂直居中的几种思路：

一、利用 position 和负边距

利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：

Tags: 垂直居中垂直居中

最近在做一个自定义表单的项目，由于各种原因，需使用前台javascript模板，上网google了一下，javascript模板方面的介绍不是很多，不像extjs等框架已经有很成熟的模板系统了，最近微软也发布了一个基于jquery的模板插件（http://github.com/nje/jquery-tmpl），基本用法类似，这些模板都定义了自己专用的模板语言。同事介绍了一个mustache.js的模板类，与大家分享下。

据作者写道Twitter也使用了这个模板类，国内腾讯也有自己的js模板类，请看QQ群空间源码。

Web 开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。

CSS3 media queries

目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

原文地址：http://www.alfajango.com/blog/exploring-jquery-live-and-die/

作者和大多数的开发人员都知道jQuery的.live()函数，知道它是做什么用的，但是不知道它是怎么样工作的，使用起来也不得心应手，甚至也没听说过.die()(去掉bind事件)。即使你能熟悉这些，但你能意识到.die() 的问题所在吗？

什么是 .live()？

函数的.live()类似.bind(),除此之外,它允许你绑定事件DOM元素现在和动态生成出来的dom节点,你可以绑定的事件不存在的元素。

Tags: die()die() live()live() bind()bind()

腾讯新闻、新浪新闻有一个常见功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到微博，原理很简单，先获得鼠标选 中文字，然后调用博客中提供的页面，把文字作为参数传过去就OK了。【有个小问题就是，选中的文字有特殊字符会报错，需要过滤一下】

分三步走：

1、文字的选中

区分document.selection和window.getSelection();

 原文地址：http://www.hujuntao.com/archives/ie6-position-fixed.html

CSS实现固定浮动层效果，类似于QQ空间顶部的工具条。标准浏览器、IE7+只需在CSS里面设置position:fixed;top:0;就可以了。不论你怎么滚动页面，工具条都会固定在头部。那么IE6怎么实现呢？
众所周知IE6 position不支持fixed属性，下面介绍两种纯CSS模拟实现position:fixed效果。

第一种：HTML、BODY高度100%方案

看了群的聊天记录，一直有人问IE6下png图片怎么透明，其实有关png透明的文章网上有很多，方法也有很多，这里就小小的总结一下：

1、使用GIF代替

.pngImg { background:url(image.png); _background:url(image.gif);}

缺点：PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，所以降低了效果

JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。

sort() 方法用于对数组的元素进行排序。语法如下：

 返回值为对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

方式1，splice

方式2，length赋值为0

这种方式很有意思，其它语言如Java，其数组的length是只读的，不能被赋值。如

每次申明一个jQuery对象的时候，返回的是jQuery.prototype.init对象，很多人就会不明白，init明明是 jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可以实现继承，加上js的对象只是引用不会 是拷贝，new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同。

当我们使用选择器的时候$(selector,content)，就会执行init(selectot,content)，我们看看inti中是怎样执行的：

这里就说明只有选择器写成$('#id')的时候最快，相当于执行了一次getElementById，后边的程序就不用再执行了。当然往往我们需 要的选择器并不是这么简单，比如我们需要id下的CSS为className， 有这样的写法$('#id.className')和$('#id').find('.className');这两种写法的执行结果都是一样的，比 如<div id=”id”><span class=”className”></span></div>，返回的肯定都是<span class=”className”></span>，但是执行的效率是完全不一样的。

如果没接触过动态语言 ,以编译型语言的思维方式去理解javaScript 将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆,让JavaScrip 慢慢融化以前一套凝固的编程意识,注入新的生机!

好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply , call 两个方法的运用上.

js中function对象是一个令人着迷的东西，但由于他太过于灵活，常常令人迷惑，

大多数人这样简写：

《jsvascript语言精粹》整本书这样写：

 

事件冒泡(又称事件传播)

当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

1 $('a').bind('click',function(){alert('that tickles!')})

因此一个单击操作会触发alert函数的执行。

click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。

 

在操纵DOM的语境中，document是根节点。

 

现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

 

.bind()

1 $('a').bind('click',function(){alert('That tickles!');})

 

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

 

.live()

$('a').live('click',function(){alert('That tickles!')})

 

JQuery 把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查 看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

 

live方法还可以被绑定到具体的元素(或“context”)而不是document上，像这样：

 

$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})

.delegate()

$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery 扫描文档查找$('#container')，并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定 到$('#container')上。任何时候只要有事件冒泡到$('#container')上，它就查看该事件是否是click事件，以及该事件的目 标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

 

可 以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论， 即$('a').live() == $(document).delegate('a')，是这样吗?嗯，不，不完全是。

 

为什么.delegate()要比.live()好用

基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

 

$('a').live('click', function() { blah() }); 

 

或

 

$(document).delegate('a', 'click', function() { blah() }); 

 

后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未“知道”被链接的方法将会是.live()。

 

而另一方面，delegate方法仅需要查找并存储$(document)元素。

 

一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

 

灵活性和链能力

live 函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死 人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一 些。

 

仅支持CSS选择器

最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

欲了解更多关于CSS选择器的缺点，请参阅Exploring jQuery .live() and .die()一文。

更新：感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

 

为什么选择.live()或.delegate()而不是.bind()

毕竟，bind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

2. 如果你运行了$('a').bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一 方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

3. 或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理 程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

 

停止传播

最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

 

$('a').bind('click',function(e){
   e.preventDefault()
   e.stopPropagation()
})

不过，当我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。

Tags: die()die() live()live() bind()bind()

 递归做为一种算法在程序设计语言中广泛应用.是指函数/过程/子程序在运行过程中直接或间接调用自身而产生的重入现象.递归是计算机科学的一个重要概念,递归的方法是程序设计中有效的方法,采用递归编写程序能使程序变得简洁和清晰.。

　　递归函数：把直接或间接地调用自身的函数称为递归函数。函数的构建通常需要一个函数或者一个过程来完成。在数学上，关于递归函数的定义如下：对于某一函数f(x)，其定义域是集合A，那么若对于A集合中的某一个值X0，其函数值f(x0)由f(f(x0))决定，那么就称f(x)为递归函数。

递归函数是在一个函数通过调用自身的情况下去解决的。方式如下：