春风得意的 jQuery

Posted by admin on 30 March, 2010
No comments yet
This item was filled under [ ajax-jquery-effect ]

from : http://blog.csdn.net/comsharp/archive/2010/03/27/5422299.aspx

5年前，没有人听说过 jQuery，当时，它只是 JavaScript 大师 John Resig 的一个设想。今天，jQuery 已经是世界上最成功的 JavaScript 库，互联网上 28% 的网站使用 jQuery。最为开源工具，Web 开发者们喜欢 jQuery，大公司也对它张开臂膀，它几乎已经成为 Web 开发与设计的标准，甚至得到了微软的支持。

到底什么是 jQuery， jQuery 团队有一段很好的阐述：

jQuery 是一个快速，精确的 JavaScript 库，简化了对 HTML 文档的操作，动画以及事件处理，同时又是快速 Ajax 开发交互平台。jQuery 的使命是改变你编写 JavaScript 代码的方式。

使用 jQuery 的网站

越来越多的网站使用 jQuery，包括下面这些全球最受欢迎的站点：

  • Twitter.com
  • Wikipedia.org
  • MLB.com
  • Amazon.com
  • Bing.com
  • Microsoft.com
  • Bit.ly
  • ESPN.com
  • Digg.com
  • Reddit.com
  • Netflix.com
  • Wordpress.com

甚至包括美国政府网站(Whitehouse.gov)。

目前，全世界有 28% 的网站使用 jQuery，这个趋势还在上升，下图是根据全球最大的 10000 个网站使用 jQuery 的比例趋势L

jQuery usage
上图: jQuery 使用趋势图 from BuiltWith .

其它 JavaScript 库

jQuery 是目前最流行的 JavaScript 库，在所有使用 JavaScript 库的站点中，超过 38% 使用 jQuery，而位居第二的 Prototype 只有 7.55%。

Javascript library stats
上图: Javascript 库的使用分布 from BuiltWith .

对 jQuery 的讨论也非常多，几年前，人人都谈 Prototype，现在，jQuery 成了人们的话题，下图是人们对各个 JavaScript 库的关注程度：

jQuery dominance

下图是根据 Google Insights for Search 制作了各个 JavaScript 库近几年受关注程度的变化：

jQuery popularity rise
上图: 蓝色代表 jQuery，红色代表 Prototype.

jQuery 得到众多公司的帮助

不仅开发社区喜欢 jQuery，很多大公司也纷纷对它伸出橄榄枝，这是它成功的关键。

比如：

  • 微软 和 Google 都在他们的 CDN 网络中为 jQuery 库提供托管。
  • Media Temple 竭尽全力捐助托管 jQuery 网站。
  • 微 软 表示 帮助对 jQuery 进行测试甚至开发，Visual Studio 和 ASP.NET MVC 都内置 jQuery。
  • 诺基亚 参与 jQuery 测试 ，并雇佣了 jQuery 核心成员 Brandon Aaron。
  • 当然落不了开源领头羊 Mozilla ，他们雇佣了 jQuery 创始人 John Resig。

jQuery 还有更多赞助者 ，根据 John Resig 的介绍，jQuery 的资源 100% 来自捐赠，任何人都可以捐赠 jQuery ，不独大公司。

小团队，大成功

jQuery 的核心开发团队只有 6 人，包括 jQuery 创始人 John Resig，还有一个 6 人的开发者关系团队。还有一些开发 jQuery 插件的人，总之，他们不是个大团队，另外，他们是开源团队，人人都是义务开发。这里是 jQuery 团队的情况 。 阅读更多…

Bookmark and Share

jQuery 页面载入进度条

Posted by admin on 29 January, 2010
1 comment so far
This item was filled under [ ajax-jquery-effect ]

页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

loading Process traditional

上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。

new loading bar

如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。

先来看一个演示：地址。

要得到演示上的进度条效果，首 先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

<div id=”loading”><div></div></div>

CSS 可以这么写：

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

准备工作到这里就做好了。

接着，请随意发 挥，依照你对图二的理解，在模板各个部分的适当位置放置：

<script type=”text/javascript”>
$(“#loading div”).animate({width:”16px“})
</script>

其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

<script type=”text/javascript”>
$(“#loading”).fadeOut()
</script>

用于载入完毕后隐藏进度条。

Bookmark and Share

jQuery相关资料在这里啦

Posted by admin on 30 May, 2009
No comments yet
This item was filled under [ ajax-jquery-effect ]

jQuery相关资料在这里啦，打算在这里放一些jQuery的资料，比较重要的是，打算在这里放一个jQuery效果的展示库，并在这基础上做一个排行榜。

相信学过jQuery的童鞋，都应该对他很喜欢的，同时也对很多很有趣的程序也很喜欢的。在这里我们将会陆续把我们在开发学习过程中的一些自己分享给大家的。

Bookmark and Share