querySelectorAll 和 getElementsByTagName 的区别

当我们通过 tag 来选取页面元素(比如 p 元素)的时候,有两种方法,document.querySelectorAll(‘p’) 和 document.getElementsByTagName(‘p’)。他们在使用时有稍许不同,querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List(via)。大致可以理解为,getElementsByTagName 返回的是一个可变的对象,当 DOM 刷新的时候,这个对象里面的值也会发生改变,而 querySelectorAll 返回的是一个静态的对象,其值不随 DOM 刷新而改变,所以当页面动态刷新时,两个值是不同的。见代码:

点击查看 DEMO

使用 iframe 避免表单刷新时的重复提交

使用同步方式提交表单时最郁闷的事情就是刷新时表单重复提交了,一次重复提交以后,后续做各种操作(reset 表单、删除表单都不奏效)都很难避免,搜了一下网上的答案,无外乎以下两种:

  1. 改为 AJAX 进行表单交互;
  2. 改进服务端,使用一个中转页面进行 redirect

然而很多时候我们并不能去修改服务端(比如没有权限,或者后端功能已经趋于稳定、修改成本高),那么这样就不能避免重复提交了吗?于是我根据页面中转的思路使用 iframe 做了一次尝试,果然页面就不会重复提交了,方法如下:

  1. 为页面添加一个隐藏的 iframe(假设 css 中 .hide 的样式已经设置为了 display:none )
  2. 将 form 的 target 绑定到 iframe 上
  3. 编写 JS 绑定相关事件
  4. 这个逻辑的精髓在于,使用了一个 iframe 充当中间跳转页面的角色,在不需要修改后端代码的情况下既可以避开页面刷新重复提交了。当然,如果页面提交后,会有某些提示信息,也可以在 iframe 的 load 事件中进行监测,获取相应字符串以后再判断接下来做什么。获取 iframe 中的内容方法如下(以 body 为例):

Zen Coding

有幸接触到一种集实用性与逼格于一体的书写代码方式(主要是 HTML 代码了):Zen Coding

Zen Coding 的核心思想是你可以像书写 CSS 选择器那样去简写 HTML 代码,而不需要不停的复制粘贴,这样离搬砖似乎又稍微远了一点。

官网上有一个如此的示例:

然后你按 Tab 之后,它就会被自动填充为这样:

忽然之间就高大上了有木有?这儿有一段操作视频:

目前 Zen Coding 的插件几乎兼容市面上各种主流编辑器,官网上就可以找到对应的,比如我所使用的 Sublime Text 的 package 就在这里可以找到:http://docs.emmet.io/

Have Fun !

使用 CSS 控制需隐藏的文字

在一个限定了高宽的容器中放入文字,当文字超出时就会出现杯具,简单的控制使用 CSS 即可;
观察了一下,使用四大金刚即可使此文字超出时自动截去末尾,并加上省略号:

点击此处测试各个属性添加或不添加所造成的影响:http://jsfiddle.net/interjc/ZsvBL/

图片预读

尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题,但有些情况下依然需要使用JS脚本的手段来实现图片预读。

以下是基于jQuery实现图片预读的方法(用jQuery只是为了方便,你也可以使用原生js或者其他类库),以下代码请放入js文件中或者 <script/>块里(事先请保证已加载jQuery类库):

调用的时候,使用以下代码:

如果不喜欢使用jQuery,那么可以将这个方法改写为: