分类 Web笔记 下的文章

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还如日中天的时候,它和微软在这一事情上反着干。

- 阅读剩余部分 -

使用Canvas生成照片直方图

最近刚接触HTML5的Canvas,然后想做点小东西。

什么是照片直方图

直方图是用来直观地表示图片的RGB三种颜色通道在不同亮度值上面,所占的量的多少。

大家都知道,电脑上的数码照片的每个像素由红绿蓝三种颜色合成,所以一个像素具有R-红色,G-绿色,B-蓝色三种颜色的信息;每种颜色取值是0-255————当为0的时候,表示当前像素没有这种颜色,当为最大值255的时候,表示这种颜色含量已经最高。

比如,纯红色的RGB就是(255,0,0),即红色最多,不含绿色和蓝色。黄色由红色和绿色合成,所以纯黄色RGB就是(255,255,0)。

Photoshop的直方图

然后,直方图的横坐标从左到右依次是0到255,纵坐标没有上限,当x为定值的时候,不同颜色的y值表示的是:亮度(姑且这么称呼)为x的这种颜色的量有y这么多。

直方图在摄影中经常用到,通过查看照片的直方图,可以知道曝光是否准确。如果需要的是正常的曝光,那么就应该使照片的各种颜色集中在x的中间值,大约100-150区间内,直方图呈现中间凸起的形状。

更多的信息,大家可以搜索查看照片直方图

说了这么多,终于进入正题了。

DEMO演示

点击查看:Canvas生成照片直方图

思路说明:

先载入一张图,然后获取图片的每个像素的值,然后对每个像素的RGB值分别统计,然后得到一个数组包含了3种颜色的量。这里设的是一个叫做tj的二维数组,红色是tj[0],绿色是tj[1],蓝色是tj[2];用tj0的值来表示亮度为210的红色像素的数量。

得到tj数组之后转换为直方图:例如tj1=3872转换为在x为145,y为3872的像素的地方用绿色画一个点,当然,y太大的话,直方图太高,所以下面会将y除以10来“压扁”直方图。

代码部分的说明直接写到注释中了。

- 阅读剩余部分 -

JS中“较高级”的正则表达式知识点

Javascript的正则表达式虽然很早以前就接触过了,那时候还在做编辑的时候,用AS写了一个文本替换的小程序。

最近逛书店,发现有本21天学通XXX的系列书,一向对这种名字的书没有好感,不过还是很好奇地拿了起来,随便翻了一下,正好看到一些以前没有注意到的地方,回来继续查看犀牛书等书补充了一下。

(XXX)

capturing groups(捕获性分组,犀牛书上叫组合)。

这个最常见的,就是用括号把一部分表达式包起来,方便在后面用+或者*或者{n,m}等来表示数量等,又或者有时候要用到|的情况。


(?:XXX)

non capture group (非捕获性分组,犀牛书上叫只组合)

和捕获性分组的区别就是,这里的括号内的内容不被计算入分组,也就是说是不存入$1,$2这些里面的。


x(?=y)

lookahead (零宽度正预测先行断言、先行断言)

- 阅读剩余部分 -