[转载]jQuery设计思想

蓝飞 蓝飞 | 时间:2013-08-23, Fri | 10,145 views
前端开发 

jQuery是目前使用最广泛的javascript函数库。

统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。

虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。

目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的《jQuery基础》(jQuery Fundamentals)。在Google里搜索"jQuery 培训",此书排在第一位。jQuery官方团队已经同意,把此书作为官方教程的基础。

这本书虽然是入门教材,但也足足有100多页。我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。

下面就是我的笔记,它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识,就能看懂它,在最短的时间里,掌握jQuery的所有主要方面(除了ajax插件开发)。

(阅读全文…)

jQuery Bug:获取不到Chrome自动填充表单的值

蓝飞 蓝飞 | 时间:2013-03-03, Sun | 10,606 views
前端开发 
// Stop chrome's autocomplete from making your input fields that nasty yellow. Yuck.
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
	$(window).load(function(){
		$('input:-webkit-autofill').each(function(){
			var text = $(this).val();
			var name = $(this).attr('name');
			$(this).after(this.outerHTML).remove();
			$('input[name=' + name + ']').val(text);
		});
	});
}

纯CSS无表达式实现图片等比缩放(支持IE7及以上)

蓝飞 蓝飞 | 时间:2013-02-27, Wed | 18,955 views
前端开发 

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:

  1. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
  2. 给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决:

<img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

(阅读全文…)

Yahoo!网站性能最佳体验的34条黄金守则——图片、Coockie与移动应用

蓝飞 蓝飞 | 时间:2013-02-25, Mon | 7,837 views
前端开发 

我们在前面的几节中分别讲了提高网站性能内容服务器JavaScript和CSS等方面的内容。除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要。这主要包括:

Coockie:

  1. 减小Cookie体积
  2. 对于页面内容使用无coockie域名

图片:

  1. 优化图像
  2. 优化CSS Spirite
  3. 不要在HTML中缩放图像
  4. favicon.ico要小而且可缓存

移动应用:

  1. 保持单个内容小于25K
  2. 打包组件成复合文本

(阅读全文…)