主流JS框架中DOMReady事件的实现

2010-08-31 08:58:03.0

在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。这对于很多 实际的应用而言有点太“迟”了,比较影响用户体验。为了解决这个问题,FF中便增加了一个DOMContentLoaded方法,与onload相比,该 方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。Webkit引擎从版本525(Webkit nightly 1/2008:525+)开始也引入了该事件,Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有,但总是有解决办法 的,下文对比了一下几大主流框架对于该事件的兼容性版本实现方案,涉及的框架包括:

jQuery绑定事件的命名空间详解

2010-08-23 10:41:40.0

以前写过一篇

jQuery的事件绑定命名空间

说句实话,我现在回头去看下自己的这篇文章,我都看不懂,今日碰巧在网上看到一篇介绍jQuery的时间绑定命名空间的文章

jQuery

jquery鼠标事件

2010-08-11 10:26:18.0

鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件,

包括点击,双击,移动等鼠标事件

  1. click事件:jquery中的click事件是最常用的一个事件了,就是猛击鼠标左键
    $("sel").click(function(){
    alert('哈哈 !');
    });
  2. dbclick事件:鼠标双击事件是用户迅速猛击两次以后触发的事件..,一般双击事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件

改造jQuery lazyLoad插件

2010-07-30 13:01:16.0

最近前端数据延迟加载(lazyload)技术很流行...

淘宝,新浪网都有使用延迟加载技术,

这样做的目的可以使得一些未在本屏幕显示的图片随着滚动条的滚动进行延迟显示。

好处显而易见,可以减少客户端对服务器端图片的Http请求,减轻服务器的压力,

对于长篇并且大批量的图片的网页效果非常明显

可惜淘宝网的延迟加载是基于YUI写的。。

 

ajax请求中高效率的获取XMLHttpRequest

2010-07-24 16:13:25.0

现在一直都是用jquery的ajax,对于原生js的ajax的原理 只能看懂....却不会写,翻开保存的网络资料,刚好找到司徒的一篇高效的获取XMLHttpRequest,剔除了原文中他自己框架中的代码。。。

本文仅记录ajax原理中的xmlhttprequest对象的创建.....

首先是W3C标准的XMLHttpRequest对象,微软从IE7开始也支持XMLHttpRequest对象,so我们在支持W3C标准的现代浏览器中(包括 IE 7)只需要

Array数组的each方法

2010-07-20 16:10:44.0

在jQuery中有个很方便的each方法来遍历数组,Firefox中的Array也有each方法,这里我们自己实现一个array的each方法

Array.prototype.each = function( callback ){ 
for( var i = 0 ,j = this.length ; i < j ; i++ ){ 
    callback.call( this, this[i], i ); 
      }    
   } 

jquery.add()追加元素

2010-07-12 15:02:21.0

我们先来看下jQuery官方文档上add()方法的使用

1)add(expr)  在原对象的基础上附加符合指定表达式的jquery对象 

2)add(el)  在匹配对象的基础上附加指定的dom元素。

3)add(els)  在匹配对象的基础上附加指定的一组对象,els是一个数组。

4)add(html)在匹配对象的基础上再附加指定的一段HTML片段

兼容各浏览器的event以及srcElement,fromElement,toElement属性

2010-07-06 23:23:18.0

在 IE 中获取事件对象很容易,直接用 event,event.srcElement,event.fromElement,event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target,但其他两个 fromElement 和 toElement ,属于IE的专属方法,如果要兼容IE的用法就要费些周折了

虽然IE经常我行我素,但无可否认,在这里,srcElement,fromElement,toElement.这三个方法很好用!

所以,为了保持一致的使用方式,也为了保持原有的使用习惯,我们来为非IE浏览器也加上这三个方法,我们通过继承prototype来实现这三个函数

对Array,String,Number,Function这四个原生对象进行原型扩展

2010-06-25 00:12:05.0

在网上看到的非常精致的代码!

对Array,String,Number,Function这四个原生对象进行原型扩展。虽然有人反对这样做,但于我看来,这对生产力带来极大的提升。 加之str.trim()总比dom.lang.trim(str)来得直观方便 吧

对 Array、String、Number等对象的原型进行扩展,绝对利大于弊。

但是坚决禁止扩展Object对象的原型的。

Object的原型位于原型链 的最顶层,如果扩展了它的原型,影响范围带广了,在一些情况下会带来负面影响,比如:

js添加事件attachEvent和addEventListener的用法

2010-06-23 13:36:34.0

一般我们在js中添加事件,是这样子的

obj.onclick=method

这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

obj.onclick=method1;
obj.onclick=method2;
obj.onclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法