CSS nth-child 选择符,以及 jQuery 中 nth-child 和 eq() 的区别

Feng Zhichao @ 12 May 2013

背景

了解 css 选择符的同学估计都知道 nth-child 选择符,在 jQuery 的选择符中,也有对应的 nth-child,并且 jQuery 还有自己一个 eq() 方法。

如果要问问 css/jQuery 中 nth-child 是如何筛选元素,以及 nth-child 和 eq 在 jQuery 中有什么区别?可能很多同学都会回答,“nth-child 就是选择第 n 个子元素”,“nth-child 在 css/jQuery 中都是从 1 开始计数,而 eq 是从 0 开始计数”。

这个回答只能说是还不够完整不够准确。

最简单的情况

给出一个最简单的 html/css:

如何使用‘纯CSS’来实现秒表时钟效果

Feng Zhichao @ 29 April 2013

背景

朋友的一个网页上,用 javascript 和 html canvas 实现了一个走动的时钟秒表效果。我们这次尝试用纯 CSS 来实现。

最终的期望效果如下图:

(图片为 gif 截图,实际效果请看 这里)

秒表时钟效果

第一步

首先我们需要画一个圆圈。这个需要给外层 box 加上一个 border-radius: 100%; 即可。效果如下图:

如何使用‘纯CSS’来实现菜单滑块效果

Feng Zhichao @ 04 April 2013

背景

很多网站的菜单栏都是一个 inline 布局的 ul/li 列表,为了突显,会在当前选择的菜单项目上加一个 background-color 或者 border 之类的,并且在用户 hover 到其他菜单项目上时,也会用一些样式来凸显。为了让这个效果更加好看,会使用一些技术来做成动画效果。如下图(gif)所示:

菜单滑块动画效果

这个效果实现起来,使用 javascript 的话比较简单。我们可以通过处理 li 的 hover 事件,来动态的调整选择符的位置。

那么,可不可以通过纯 CSS 来实现这个菜单动态滑块效果呢?

DOM 结构

菜单的 DOM 结构比较简单,就是一个 ul/li,通过一个 selected 来表示当前所选择的项目。如下代码:

几个 Ruby XML Parser 及其性能比较

Feng Zhichao @ 10 March 2013

背景

最近的一处 ruby 代码里,需要在服务启动时,加载并解析一个较大的 XML 文件(大约 20M 多),将其数据缓存在内存中。

在之前代码处理 XML 解析时,用了 sax_machine 这个 gem。继续使用 sax_machine 处理这个 20M 的文件时,文件的加载和解析需要大概 90 多秒(Mac OS 10.8,i7,8G 内存,SSD 硬盘!)导致服务启动时间不可接受。所以我们比较了几个 ruby xml parser。

比较

直接看比较结果:

ruby xml parser 性能比较 图表:

一次简单的 Cross-Site Scripting XSS 跨站脚本攻击

Feng Zhichao @ 03 February 2013

Cross-Site Scripting XSS 做网页应用的都了解。之前一直知道在开发中要注意防范这个,但是没有试过。一个偶然的机会,在朋友开发的一个网站上小试了一把。

发现漏洞

说实话现在同事或者朋友的网站,见了输入框就想试一把 Javascript 注入。这次有一个某数据调查网站,做的十分精巧,用起来也很不错。其中有一个页面,是用户可以自己创建一个表单。表单可以有很多种元素,包括单选、 多选、 单行文本、 多行文本、 数字、 日期、 下拉框等。大多数用户输入都是安全的,但是还是发现了用户自定义单选选项,这个的 Javascript 输入没有被转义。

在 input 中输入 Javascript

上图可以看到在用户自定义表单的单选项目时,在项目选项中输入了一个简单的 <script>alert(1);</script>

没有被转移的 Javascript

保存后,打开这个编辑页面,都可以看到这个没有被转移的 Javascript 被执行了。

进行攻击

哦耶,下一步就是想如何利用这个漏洞了。如何让更多的用户访问到被恶意代码注入的网页?我测试的将表单发给用户,但是表单填写页面的 Javascript 都被转移了,即 注入 只存在在编辑页面上。幸好该产品有一个合作编辑功能,即可以把某个表单共享给好友让他一起编辑。

© feng zhichao 2016