JS对象中数字命名的属性名(jQuery对象原来真的是对象)

标题很奇怪,这不废话嘛~

平时要从一组jQuery对象里面取原生DOM对象,常用的方法是使用$('div')[0]这样来取得其中的第一个div,久而久之,我习惯性地把$('div')当成是一个数组了,当然虽然知道它是对象,但是脑袋就是转不过弯来。

<div>1</div>
<div>2</div>
<div>3</div>

对于上面的HTML代码,使用$('div')可以取得含有这3个DOM对象的一个jQuery对象,要取第三个div就使用$('div')[2],看起来很像是取数组的第三个值是不是,是不是,是不是?看一下这个jQuery对象是怎么构成的吧:

- 阅读剩余部分 -

[译]JS事件顺序/捕获/冒泡详解

问题:如果一个元素和其父元素都绑定了同一事件,哪一个先触发?——这当然取决于浏览器。

先来看一个简单的问题,假设你有一个一个element1元素,里面还有一个element2元素。

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

这两个元素都绑定了click事件,如果用户点击element2,则element1和element2都会触发点击事件,但是哪一个先触发呢?换种说法,事件触发的的顺序。

两种事件模型

很久很久以前,那时候网景公司Netscape还如日中天的时候,它和微软在这一事情上反着干。

- 阅读剩余部分 -

Typecho使用markdown输入表格(为知笔记适用)

虽然Markdown原生是没有表格(table)支持的,只能通过插件实现,不过对Typecho来说是内置了支持的。

太简单了,直接举例说明

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

↓↓↓↓将会得到↓↓↓↓↓

TablesAreCool
col 1 isleft-aligned$1600
col 2 iscentered$12
col 3 isright-aligned$1

主要就是使用竖线 | 来连接,然后关键的是第二行,这是Typecho将之识别为表格的关键,没有不行。

默认是左对齐,如果要让某一列居中就在这一列的第二行输入 :---: 这样,如果是右对齐就是 ----:


20141009补充:

表格两端的竖线不是必须的,所以,可以写成:

 Tables   |      Are      |  Cool 
----------|:-------------:|------:
 col 1 is |  left-aligned | $1600 
 col 2 is |    centered   |   $12 
 col 3 is | right-aligned |    $1 

效果是一样的。

那么,问题来了,输入要输入|怎么办?目前我只知道使用&#124;来代替。

20141231补充:

Typecho升级到1.0以后,这个功能以及失效,不过在为知笔记里依然可以使用。什么?你不知道为知笔记支持Markdown?

20150126补充:

Typecho继续升级到开发版,这个功能又回来了,╮(╯▽╰)╭

[译]illustrator混合模式详细介绍(Photoshop适用)

illustrator界面右面的透明度面板设置图形的透明度,同时能为图形设置混合模式,混合模式是用来决定图像及其下面的图形的重叠在一起的颜色如何混合,下面将分别介绍几种混合模式。

当新建一个illustrator文档的时候,默认的不透明度是是100%,滑动滑块或者直接输入数字即可改变不透明度。

illustrator不透明度

左边面板包含了混合模式,选中一个物体之后,这里的选择将会应用于选中的物体。这将决定当前图形和下面图形的颜色混合的方式。

不透明度面板

正常/Normal

这是默认值,图形之间颜色如同是固体颜色,100%的不透明度,图形所有的颜色都是按照原先的颜色显示。

请输入图片描述

蓝色的方块被花纹方块挡住,正常模式下,看不到被挡住的蓝色方块,但是下面的几种模式就不一样了。如果你用过Photoshop的图层模式就会知道,不过illustrator的混合模式是有差别的:它对图形起作用;而Photoshop是对图层起作用。

因此你可以把3个图形设置不同的混合模式,然后看它们互相之间的混合效果。

- 阅读剩余部分 -

GIF动画在浏览器中播放卡的问题

GIF动画原理简单说明

GIF图片可以内含多张图片,称之为帧,然后以一定的间隔播放,看起来就动画了。当间隔越小,看起来动画越流畅。

关于GIF动画常见疑问:

  • 为什么在Photoshop里面做GIF的时候播放流畅,导出GIF到浏览器看就慢了?甚至很卡?

  • 为什么我电脑看起来是正常的,别的人还是说GIF慢/卡了?

答案很简单

不同的浏览器GIF的最低的帧间隔时间支持的不同;并且一旦低于这个最低数值,将会被转换为某个特定的时间间隔。

测试页面:

点击查看:GIF不同帧间隔的表现

页面测试说明:从上到下的11个进度条一样的东西依次为间隔0、1毫秒、2毫秒、3毫秒……的GIF图片,共11张GIF图片。

比如最后那个进度条,就是一张理论上每帧间隔为10毫秒的GIF动画图片,换成FPS来说,就等于1秒/10毫秒=100FPS/s啦。

建议使用不同的浏览器查看,就能知道是什么意思。

比如我的是Windows7,Chrome35正式版,看到的效果是前面两个进度条速度异常:比第三个还慢,大约等于7毫秒的那个进度条。意思就是,我当前的系统下,当GIF帧间隔小于2毫秒,为0或者1的时候,浏览器会将其转换为7毫秒左右,所以设置帧间隔为1的反而比帧间隔为2的看起来FPS更低了。

下面是不同系统和浏览器的区别(2007年时候的数据)。

- 阅读剩余部分 -