slice / splice / split ,晕了没?

slice / splice / split这三个方法,不仅单词拼写非常像,而且字符串和数组涉及其中几个方法,非常容易混淆,有必要写篇文章来记录一下。

数组Array

slice

arrayObject.slice( start [,end] )

start 开始选取的位置;如果为负,将从数组尾部开始算起。即-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end 结束选取的位置。如果未指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果为负,将从数组尾部开始算起。

start含,end不含,所以选取的是 [start, end) 的前闭后开的区间。

该方法并不会修改数组,而是返回一个子数组。

splice

arrayObject.splice(index, howmany [,item1,.....,itemX] )

index 进行操作的位置,为负则从数组尾部开始算起。

howmany 要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 向数组添加的新项目,用来替代前一个参数删掉的那些项目。

splice() 方法会直接对数组进行修改。


- 阅读剩余部分 -

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个图形设置不同的混合模式,然后看它们互相之间的混合效果。

- 阅读剩余部分 -