找了那么多,似乎就这篇比较通俗易懂,就偷过来了

DOM树


首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:
事件冒泡(又称事件传播)
当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

代码如下:
$('a').bind('click',function(){alert('that tickles!')})
因此一个单击操作会触发alert函数的执行。
click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。
在操纵DOM的语境中,document是根节点。
现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。
.bind()

代码如下:
$('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()的处理函数早已运行了。

 

网上搜了一些资料,大家也可以搜到,笔者只是整理了一下下而已。

对于webkit,radial(放射状)方式的背景渐变有两种,一种是旧的,一种是新的。

旧的那种语法跟Firefox差别比较大,而新的那种终于跟FF统一了。

先看一下旧的语法吧

/* 语法,参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 实际用法… */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

  • 渐变的类型? (linear)
  • 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
  • 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
  • 开始的颜色? (from(red))
  • 中途改换颜色color-stop
  • 结束的颜色? (to(blue))

新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。

先看代码

.selector{

background:-moz-linear-gradient(left, white, black);/*gradient for firefox*/

background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */

background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/*the old grandient for webkit*/

}

放射渐变也同样做了优化:

.selector{

background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/

background:-webkit-radial-gradient(10% 30%, white, black);/*new gradient for webkit */

background:-webkit-gradient(radial, 0 10%, 0 30%, from(#white), to(#black));/*the old grandient for webkit*/

}

语法:

<radial-gradient>:radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
<position>:[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>:circle | ellipse
<size>:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<shape-size>:<length> | <percentage>
<color-stop>:<color> [ <length> | <percentage> ]?

取值:

<position>
<percentage>①:
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①:
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left:
设置左边为径向渐变圆心的横坐标值。
center①:
设置中间为径向渐变圆心的横坐标值。
right:
设置右边为径向渐变圆心的横坐标值。
<percentage>②:
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②:
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top:
设置顶部为径向渐变圆心的纵坐标值。
center②:
设置中间为径向渐变圆心的纵坐标值。
bottom:
设置底部为径向渐变圆心的纵坐标值。
<color-stop>:
指定渐变的起止颜色。
<shape>
circle:
指定圆形的径向渐变
ellipse:
指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值
<size>
closest-side:
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain:
包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover:
覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
<shape-size>
写本文档时Firefox尚不支持<shape-size>
<percentage>:
用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>:
用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<color-stop>
<color>:
指定颜色。请参阅颜色值
<length>:
用长度值指定起止色位置。不允许负值
<percentage>:
用百分比指定起止色位置。

写法:

内核类型                                                               写法
Webkit(Chrome/Safari)                              -webkit-radial-gradient()/-webkit-gradient()
Gecko(Firefox)                                               -moz-radial-gradient()
Presto(Opera)                                                 -o-radial-gradient()
Trident(IE)                                                      -ms-radial-gradient()
W3C                                                                     radial-gradient()

实例:

.test{
background:-moz-radial-gradient(center center,circle,#f00,#ff0,#080);
background:-webkit-radial-gradient(center center,circle,#f00,#ff0,#080);
background:-o-radial-gradient(center center,circle,#f00,#ff0,#080);
background:-ms-radial-gradient(center center,circle,#f00,#ff0,#080);
background:radial-gradient(center center,circle,#f00,#ff0,#080);
}

图1

.test{background:-moz-radial-gradient(circle contain,#f00,#ff0,#080);
background:-webkit-radial-gradient(circle contain,#f00,#ff0,#080);
background:-o-radial-gradient(circle contain,#f00,#ff0,#080);
background:-ms-radial-gradient(circle contain,#f00,#ff0,#080);
background:radial-gradient(circle contain,#f00,#ff0,#080);
}

图2

.test{
background:-moz-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:-webkit-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:-o-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:-ms-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
}

图3

.test{
background:-moz-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:-webkit-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:-o-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:-ms-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
}

图4

IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ff0000′); /* IE6,IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ff0000′)”; /* IE8 */

参考:

http://www.qianduan.net/understand-the-css3-gradient.html

http://www.qianduan.net/webkit-style-syntax-for-the-gradient-update-css3.html

http://hi.baidu.com/cmoooo/item/977e87569af11a3633e0a93d

© 2012 Hedgehog Suffusion theme by Sayontan Sinha