前端天空

致力于前端开发应用

一个简单的jQuery事件冒泡实例

08月 24th, 2011

今天一个负责奥数网的朋友问我一个简单的问题,就是点击出现下拉列表,再点击消失(点击空白处也同样消失),如图:

用到了jQuery的取消事件冒泡的方式:event.stopPropagation();

代码如下:

//下拉
function dropDown(moreArea,moreOn){
	$(moreArea).click(function(event){
		event.stopPropagation();
		$(this).toggleClass(moreOn);
	});

	$(document).click(function(event){
		$(moreArea).removeClass(moreOn);
	});

}

参照:http://hi.baidu.com/liquorbar/blog/item/59a6d0f3c8232c1eb17ec542.html

jQuery1.6 一些特性

05月 30th, 2011

jQuery1.6发布 提升性能重写属性模块

据jQuery官网消息,5月3日JQuery 1.6正式发布了,主要改动包括几处性能和跨浏览器兼容性的改进,包括了对属性(Attribute)模型的重要重写。
同时透露,在发布之前jQuery已经着手开发jQuery1.7版本,有任何jQuery1.7版的开发建议可以上官方网站提交建议,jQuery欢迎任何个人或团队测试并给出jQuery1.7新版本的开发建议。
jQuery 1.6官方下载地址:
http://code.jquery.com/jquery-1.6.js
http://code.jquery.com/jquery-1.6.min.js

Microsoft CDN 下载: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js
新版本中的部分重要改进:

  • attr()val()data()方法有了更好的性能;
  • 在attr()方法中支持Boolean属性;
  • 添加了钩子函数,允许对attr()和val()方法进行扩展;
  • map()方法添加了对对象的支持(将JavaScript对象的属性映射到函数)
  • 允许使用相对值(“+=”,“-=”)更新CSS;
  • 添加了deferred.always(), deferred.pipe()方法,减少了代码量,提高了代码易读性;
  • 同步动画 – 现在所有动画都同步到相同的时间间隔. 使用新的浏览器功能,动画也更顺畅;
  • find()closest()is()可接收所有的DOM元素和JQuery对象作为参数。

所有这些新特性连同整个bug修复列表在官方博文中都有详细说明。
不幸的是,其中包含了部分破坏性的变更,团队已经在官方更新中用单独的章节强调了它们:

变更 JQuery 1.5.2 示例 JQuery 1.6 示例
data()方法使用破折号创建驼峰格式。 data-max-value=”15″ 创建{ max-value: 15 } data-max-value=”15″ 创建{ maxValue: 15 }
区分了Property与Attribute。attr()方法现在不能用于获取preperty的值。为了处理property的值,引入了prop()和removeProp()方法。 如果复选框被选中,checkbox.attr(“checked”)返回(true) checkbox.attr(“checked”)返回空字符串。
要判别是否选中,需在事件处理程序中使用
$(this).prop(“checked”)或
$(this).is(“:checked”)。

不出意外的话,第二项变更将会影响到现有打算升级到1.6的那些项目。
这一版本是在1.5发布后3个月及1.5.2发布后1个月推出的。目前1.7的工作已经开始了,JQuery团队已经接受了功能建议书
主要代码修改为:
整体上看,1.6修改了约8%的代码,主要有以下这些:
1.(559行)修正了JSON解析BUG,改变了JSON解析方式。1.5.2是调用Window.execScript执行脚本,1.6里改成了类似JSONP的方式,把代码直接当脚本插入文档了。
2.(1188行)重写了浏览器兼容性检测代码。旧版里通过动态创建一批元素,再反向检测他们的值来判断浏览器特性。这些代码在1.6中差不多都被干掉了。取而代之的是更精细的特性检测。还重写了关于脚本解析的兼容性测试。
3.(1835行)重写了队列的代码。
4.(2052行)本次更新的重头戏,涉及attr、val、html、css、test、data、width、height、offset这些函数完全重写。
5.(2009行)重写了trigger函数。
6.(6401行)重写了clean函数。
7.(8308行)修正了ajax在各浏览器中的某些微小的不一致。其实就是BUG。
8.(8833行)修正animate相关函数的BUG。性能优化。
官方博客更新内容部分翻译:
jQuery更新1.Data  更新内容:性能改进。高性能改进 .data()是通过提高性能触发事件。 jQuery的.data()方法使用setData事件触发GetData和扩展插件触发就如何改善,他们可以允许.data()变得更快。

2.Attributes  更新内容:性能改进,测试数据中只有IE7和IE8略微有提升。其他浏览器下的性能都是大大的改善。
1).attr(“value”)性能测试图

2).attr(“name”,”value”)性能测试图

3).val()(get)性能测试图

3.Build  更新内容:错误修正。#8854 :minifier过程问题
4.Core  更新内容:jQuery.map(对象)它现在可以映射一个JavaScript对象的属性使用jQuery.map方法。
5.CSS  更新内容:CSS相关。我们已经从.animate()方法移植出功能,使您能够使用相对更新CSS属性的值。现在,您可以在它前面加上CSS值以“+=”或“-=”来更新属性相对关系到当前价值。
6.Event  更新内容:性能改进。正如.data的性能,触发事件的表现有所改善。
更多更新,请查看官方网站: http://blog.jquery.com/2011/05/03/jquery-16-released/

 

8个对于Web设计和开发人员非常有用的在线工具

02月 10th, 2011

导读:作者Henry Jones写了一篇《8 Useful Online Tools for Web Designers and Developers》,现将译文《8个对于Web设计和开发人员非常有用的在线工具》转载,以下是文章内容:

在工作中借助一些非常好用的工具可以让你专注于更重要的事情,进而提高工作效率。本文收集了一些设计和开发相关的在线工具,分享给大家,希望对你有帮助。

ProCSSor

web development tools

ProCSSor是一个很不错的CSS代码美化工具,它可以帮助你很轻松的把代码转换成很美观。

jsFiddle

web development tools

JsFiddle有多种用途,其中一个用法就是可以在线编辑HTML, CSS 和JavaScript片段,而且代码可以分享,还可以嵌入到你的博客中等等。

Frame Box

web development tools

Frame Box是一个非常好用的用于在线分享线框图(wireframes)的工具。

Spritebox

web development tools

Spritebox是一个所见即所得的工具,帮助Web设计者迅速而轻松地从一张精灵图片(CSS Sprit Image)创建CSS类和ID选择符样式。这里涉及到一项技术叫CSS Sprites,在国内很多人叫CSS精灵,它是的基本原理是使用CSS的背景系列属性的组合进行背景图片的精确定位。

CSS3 Generator

web development tools

这是一个简单的跨浏览器CSS3样式生成器,可以生成你想要的任何值。

Super Conversion Button

web development tools

这个工具可以帮助你瞬间生成一个美观的试用(Try it now)按钮。

wordmark.it

web development tools

这个工具之前曾介绍过,可以帮助你直观的查看当前电脑上安装了哪些字体。

0 to 255

web development tools

网页设计师Shaun Chapman设计开发了0To255.com平台,让人们更简单、方便、快捷地选取合适的颜色。

译文链接:http://www.cnblogs.com/lhb25/archive/2011/02/08/1949787.html

原文链接:8 Useful Online Tools for Web Designers and Developers

jQuery 1.5的改进细节

02月 10th, 2011

导读:作者GrayZhang写了一篇关于jQuery 1.5的文章《jQuery1.5的改进细节》,他总结出jQuery 1.5 beta1改进的内容,以下是文章内容:

jQuery 1.5 beta1出来了,从学习跟进上来说,这一次已经比较晚了(我竟然不知道1.5什么时候出的alpha,就这么beta了)。

这个1.5版本最大的更新是AJAX的完全重写,提供了更强的可扩展性。但是受制于精力和篇幅,对新的AJAX的分析还是放到下回,本篇先简单介绍一下细节方面的改进。

jQuery._Deferred和jQuery.Deferred

首先不得不说这两个新生事物,因为他们是作为基础设施存在,不把这两个东西讲明白了,有些问题根本没办法解释。

首先,jQuery.Deferred是jQuery._Deferred的增强版,因此对于这个问题,从jQuery._Deferred入手,就能说明一大半的问题。

什么是Deferred?从字面上看,我的第一反应是“延迟加载”,首字母大写的应该是“类型”的定义,所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上,虽然确实带有那么一点点“延迟”的意思,这个东西却不是用来实现延迟加载的。

简单来说,jQuery._Deferred是一个函数队列,他的作用有以下几点:

1. 保存若干个函数。

2. 在特定的时刻把保存着的函数全部执行掉。

3. 执行过后,新进来的函数会立刻执行。

感觉是不是和啥东西很像?对,jQuery的ready函数就是这样的逻辑,实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。

jQuery._Deferred提供下面的接口:

1. done:function(fn1, fn2, …)的形式,用于把函数添加到队列中。

2. fire:function(context, args)的形式,使用context指定this对象,args指定参数,调用队列中所有函数。fire被调用后,_Deferred会进入 isResolved状态,未来对done的调用不会再保存函数,而是直接调用函数。

3. resolve:相当于调用fire(this, arguments),一个简化的方法。

4. isResolved:用来判断_Deferred是否在isResolved状态,具体参考前面的fire函数的解释。

5. cancel:取消掉整个队列,这样不管未来是不是fire,队列中的函数都不会再被调用。

说明白了jQuery._Deferred,再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的,第一个称为 deferred,用于保管“正常”状态下的函数;第二个称为failDeferred,用于保管“出错”状态下的函数。同时 jQuery.Deferred提供了一些新的接口:

1.then:function(done, fail)的形式,把done添加进deferred,把fail添加进failedDeferred。

2. fail:相当于failDeferred的done函数。

3. fireReject:相当于failDeferred的fire函数。

4. reject:相当于failDeferred的resolve函数。

5. isRejected:相当于failDeferred的isResolved函数。

同时jQuery.Deferred取消了cancel函数。

那么这个是啥用的呢?有“正常”和“出错”2个状态,同时又是异步的,很容易就能想到……对,给AJAX用的,在下一篇分析中再详细说明。

jQuery.ready的变化

因为有了jQuery._Deferred这个东西,jQuery.ready函数变成依赖于函数队列,具体的变化有:

原来的readyList变量已经不再是一个数组,而变成了jQuery._Deferred对象。

原本在DOMContentLoaded时,调用readList中所有函数的逻辑,现在也使用了jQuery._Deferred中,原来的代码:

while ( (fn = ready[ i++ ]) ) {

    fn.call( document, jQuery );

}

变成了:

readyList.fire( document , [ jQuery ] );

jQuery.parseXML函数

新增了静态函数jQuery.parseXML,用于提供浏览器兼容的从字符串转为XML文档的功能。

该函数的逻辑网上有很多,jQuery也没有特别的地方,大致分为以下2种:

      对于标准浏览器,使用DOMParser对象:

      var parser = new DOMParser();

      var xml = parser.parseFromString(text, ‘text/html’);

      对于IE,使用Microsoft.XMLDOM对象:

      var parser = new ActiveXObject(‘Microsoft.XMLDOM’);

      parser.async = ‘false’;

      parser.loadXML(text);

      var xml = parser.documentElement;

data部分

添加了jQuery.hasData函数,用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现,在原来单纯地取当前时间的基础上,添加了一个随机数:

expando = “jQuery” + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, “” );

这样保证在同一时间,引入多个jQuery副本,这几个副本之间的expando不会相互冲突,导致元素上的data变得错乱。一般来说,是不会引入多个jQuery副本的,但是使用SealJS等的时候,配置不当的话,也是很容易出现此类问题的。

DOM操作部分

原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组,在1.4.4版本中,通过\n或\t进行分隔,在1.5中增加了一个\r,用于对应Windows平台下的换行符(\r\n)。

jQuery.fn.attr函数,1.4.4版本中拒绝从TextNode和CommentNode上获取属性,在1.5版本中添加了一个AttributeNode(noteType == 2)。

在1.4.4版本中,jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件,这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了,不知是出于什么考虑。

对于IE下使用cloneNode复制节点,会将事件也一起复制过来的问题,1.4.4中是采取复制innerHTML的方式给予解决,而在1.5中则采纳了mootools团队提供的方法,使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行,处理IE的BUG的原理很简单,当然前端里一些看似简单的东西,都是很难发现的:

1. IE中有个叫clearAttributes的函数,会清除到节点上的所有属性,顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数,就会把属性清得干干净净。

2. IE中还有一个叫mergeAttributes的函数,把一个节点的属性复制到另一个节点上,但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes,把属性重新放回复制出来的节点上,这就相当于起到了去除事件相关属性的作用。

另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题,非常值得详细研究。

AJAX部分

AJAX已经完全重写了,只留下一点边边角角保留着1.4.4版本的风采,这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似,具体来说仅有一个method配置项不同,因此在1.5版本中被合并起来了:

$.each(['get', 'post'], function(i, method) {

    $[method] = function() { … };

});

ajaxSetup函数现在加了一行return this;,可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格(\r\n)。

AJAX的回调函数中,作为参数的对象不再是原生的XMLHTTPRequest,而是jQuery自己封装的称为jXHR的对象,这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码,除200-299以及304外,还有一个1223,来自于IE的一个BUG,会将204的状态码变成 1223。现在因为有了jXHR对象,相当于中间多了一层,因此从jXHR对象获取statusCode不会出现1223的情况,已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项,其结构为map,用于指定返回特定状态码时的回调函数,大致形式如下:

jQuery.ajax({

    url: ‘xxx’,

    statusCode: {

        200: function() { 处理请求成功 },

        404: function() { 处理页面未找到 },

        503: function() { 处理Service Unavailable }

    }

});

再添加了这个回调后,jQuery.ajax函数已经有非常多的回调函数,其触发过程如下:

1. 根据返回的状态码,触发success或者error回调。

2. 根据状态码,触发对应的statusCode回调。

3. 触发complete回调。

4. 触发全局ajaxComplete回调。

5. 如果此时没有正在执行的AJAX,触发全局ajaxStop回调。

其他细节

入口函数jQuery.fn.init现在多了一个参数,值始终为rootjQuery,用于加速init函数中对rootjQuery变量的查找速度(减少了一层作用域):

//jQuery 1.5 beta1 源码23行

jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor ‘enhanced’

    return new jQuery.fn.init( selector, context, rootjQuery );

}

jQuery对象支持继承了,具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用:

202行:return this.constructor( context ).find( selector );

253行:var ret = this.constructor();

334行:return this.prevObject || this.constructor(null);

同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型,由于不是很常用jQuery,更是从来没有用到过需要继承jQuery的情况,因此也不方便说这个功能的作用有多大。

原文链接:http://www.cnblogs.com/GrayZhang/archive/2011/01/18/jquery-1-5-enhanced-detail.html

转自:CSDN

jQuery1.5发布

02月 10th, 2011

美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经如期开发完成,可以下载使用。压缩版本jQuery Minified 29KB,不压缩版本jQuery Regular(用于阅读和调试)207KB。由于jQuery已经成为目前最流行的JavaScript库,得到广泛的支持,新版本的发布当然非常引人注目。

jQuery创始人John Resig在CSDN TUP活动上演讲(相关报道

另外,微软和Google也为jQuery 1.5提供了CDN支持,可以直接导入:

微软:http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js

Google:https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js (发稿时为止尚未上线)

新版本的主要改进可以参见变更日志:http://api.jquery.com/category/version/1.5/

John Resig总结了几点比较引人注目的变化。

1. Ajax重写

Ajax模块完全进行了重写。新增一个jXHR对象,为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档

此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。(详情参见:Ajax扩展文档

2. 延迟对象

延迟对象(Deferred Object,jQuery.Deferred对象)是一个可链接的(chainable)实用工具对象,实现了Promise接口,可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的,其结果是在jQuery中能够将依赖于某个任务(事件)结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。

开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器。

例如,使用了新的jQuery内部Ajax API就可以实现下面的代码了:

// Assign handlers immediately after making the request,
// and remember the jxhr object for this request
var jxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jxhr.complete(function(){ alert("second complete"); });

此外,使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见:延迟对象文档。 

3. jQuery.sub()

jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget工厂。

值得注意的是,sub函数并不提供真正的隔离,所有方法、数据、调用仍然依靠jQuery本身来支持。

4. 遍历性能提高

在新版本中.children(), .pre(), .next()几个常用的遍历函数性能有了显著提高。比如.children()的数据如下所示:

详细的测试用例和数据可以参考这里

5. 内部开发系统

John Resig还特别提到了jQuery团队内部开发系统的两点改变:一是服务器端用Node.js替换了老的Java/Rhino系统,使得团队可以专注于JavaScript环境的新变化;二是所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意。

有意思的是,此前UglifyJS开发者曾经公布过自己的测试结果,表明对jQuery的压缩结果UglifyJS要比Closure略大(都在72KB左右),但运行速度快得多,而且Closure不太安全。看来,这段时间UglifyJS的进展也很快啊。

对了,如果你在使用中发现问题,可以直接到这里报告bug:http://bugs.jquery.com/。另外,也可以到Reddit上参与讨论,别忘了,John Resig同学是那里的版主,随时盯着呢。

转自:CSDN

又见雅虎的13条军规

12月 29th, 2010

记得最初听到”军规”这个词还是在我面试央视前端优化工程师时他们的技术总监提到的.今天我们的副总也提到了检测军规的工具YSlow .看来现在优化页面必须提到第一级别来处理了!任务艰巨时间紧迫,只剩下2天的时间来完成12个JS的整合; 6个频道页面的样式整合;102张现有图片整合以及代码优化等。拼了…

Translate This Button 在线翻译按钮

08月 25th, 2010

翻译成52种语言的按钮:

只需复制并粘贴您网站上的任何地方TranslateThis按钮,它的自由和方便。有没有文件上传和它在几乎所有网站的作品。

该TranslateThis按钮是一个轻量级的Javascript翻译工具 。它翻译成任何页面快速使用Ajax和谷歌语言的API。

只不过Google在国内访问时断时续不是太稳定

jQuery自定义动画animate的一些使用心得

08月 24th, 2010

今天在工作中遇到了表单验证时提醒的动画效果,效果很简单:如果必填表单为空则此表单项的边框会闪烁几下并最终为红色。
如果只是简单的input和textarea元素的话,很简单,直接设置其边框颜色即可。
可是如果是select元素的话,在IE6/7中元素的边框色是不起作用的,于是想到了在其外面套上一个内联元素,动画操作此内联元素即可。

思路如下:
1. 一个专门接口的函数,其参数为表单元素对象;
2. 利用jQuery的animate方法来自定义动画效果:设置其border属性;
3. 监听需要验证时的事件:当前元素失去焦点时、表单提交时;

思路屡清楚之后开始行动:
1. 接口函数:

function checkForm(d){
	var isIE= !jQuery.support.cssFloat;
//	var _dom=isIE?jQuery(d).parent():jQuery(d);
if(isIE){
	jQuery(d).wrap('span');
	_dom=jQuery(d).parent('span');
}else{
	_dom=jQuery(d);
}

	if (d.value =='') {
		_dom.addClass('checkform-error');
		 _dom.animate({border: '1px red solid'}, 100)
			.animate({border: '1px white solid'}, 100)
			.animate({border: '1px red solid'}, 100)
			.animate({border: '1px white solid'}, 100)
			.animate({border: '1px red solid'}, 100);
	}else{
		_dom.removeClass('checkform-error').removeAttr('style');
	}
}

经过测试,FF(火狐)下没任何问题,边框啥的都可以闪烁,但到了IE下问题就来了。
首先是IE下jQeury的animate中不能直接设置border样式的属性,提示“参数错误”,经过网上一顿乱找后仍然没有解决。
于是换成 .animate({borderColor:’red’}) 再试试吧,结果还是不行,测试了几次之后发现IE下面只有borderWidth是可以用的。
没办法只能继续想起他的办法……

在网上查了下animate里面可以用到的属性中可以包括:

$().animate(
        {
               left: 100,
               style: 'margin: 10px;',
               className: 'checkWrap',
               opacity: 0.5,
               backgroundColor: 'yellow',
               borderWidth:'1'
        },

而且IE下还有个问题就是$().unwrap();不起作用,于是之前的想法就不成立了,继续想……

< 未完.待续…… >

jquery之css选择器

08月 17th, 2010

使用过jquery的人都知道,jquery的选择器是很强大的,特别是对CSS选择器的支持

这里的地址是测试:http://www.tiscs.com/wyx/slickspeed/index.html#

所以想用好jquery的话,还是要先权威的了解一下W3C的css1—css3,

http://www.w3.org/TR/css3-selectors/

本节非规范性,因为它只是概括了以下几个部分。

甲选择是一个结构。这种结构可以作为一个条件(例如,在一个正确的CSS ) ,文档树中匹配一个元素的CSS,或作为一个单位说明HTML或XML片段相应的结构。

选拔范围可以从简单的元素名称,以丰富的内容表述。

前端天空

致力于前端开发应用