JerryJi !

就在不久之前， Flash 是被web设计师用来为网站添加交互的重要技术之一！自从Ipad诞生， 并且不支持 Flash Player， 加速了web开发中使用其他技术代替flash，比如 jQuery， Ajax 还有其它。

尽管在很多情况下Flash在仍然是一个非常强大和有用的工具，web设计师习惯于用flash完成一些特效，但这些都能用jQuery轻松实现！ 下面有21 个在线的演示来显示jQuery在制作高级特效和交互方面的强大能力，可以媲美Flash！

1. Flip! 一个 jQuery 插件

这个演示 模仿流行的卡片翻转的效果，可以360度旋转自身，x或y维度！

2. jQuery Quicksand 插件

这是一个强大的插件用来在页面上排序数组的元素/图标,有酷的渐入 /渐出和动画特效！

3. ImageFlow

这个图像浏览器和苹果的CoverFlow界面很相似，让用户能够很熟悉他们的产品和应用！

4. 用jQuery代替flash建立一个交互性地图

这个演示展示了jQuery用ajax技术创造迷人的界面的强大能力！

5. 用jQuery & CSS3滑出消息

点击+号用漂亮的光滑的动画效果展示附加的信息！

6. Zoomer Gallery

在这个演示中看起来静态的画廊被multi-layer zoom特效变得富有交互性，当移到图像上时会产生缩放！

7. jQuery Circulate

这个演示展示了滚球的粒子效果，所有的特效都是用jQuery

8. Photo Zoom Out Effect

这个也是一个图像伸缩的特效，看起来静止的画面，会随着你的鼠标移过而变得富有生机！

9. Sliding Boxes and Captions with jQuery

这里我们可以看到原本只能被flash开发者创造的过渡特效，现在使用jQuery一样可以办到！

10. CSS3 Lightbox Gallery

这个插件看起来是为媒体展示图片特别制作的，你可以任意拖拽图片达到图片拼接的效果，你还可以单击放大图片！这是一个强大的图片展示特效！你还可以 用API使用ajax技术让人们分享图片到Flickr，twitter，Facebook或者其他网站！当然中国的新浪微博、人人网、开心网也能！

11. 用jQuery和CSS3创造一个拍照效果！

一眼看去这个演示像游戏狙击，乍一看居然是拍照功能！这是一个很强大的工具，当用AJAX或者HTML5本地存储时，用来对付特别大的图像！

12. Awesome Bubble Navigation-可怕的泡沫导航效果

开发者用色彩变换和动画创造出一个非常吸引人的并且富有交互性的菜单！

13. Beautiful Background Image Navigation

酷炫的图片展示特效，用来做导航会有惊人的效果！

14. AviaSlider

AviaSlider采用经典的类似Flash的过渡效果，以强化滑块界面。

15. Background Image Slideshow

动画背景的地方flash用来支配的网页设计之一。这里有一个例子使用jQuery代替。

16. Panning Slideshow

另一个独特采取典型幻灯片界面。在这里，笔者增加了对角线导航的接口，并使其脱颖而出。

17. jqFancyTransitions

这个插件可以用来显示作为一个具有奇特法拉盛般的幻灯片过渡效果的照片。

18. iCarousel – Horizontal images slider

另一个幻灯片，添加了缓和的过渡和真的挺身而出。这也难怪他们选择在此演示，展示性感的Mac产品。

19. Making an Interactive Picture with jQuery

该演示可用于拍摄的网站那里有很多优势的屏幕空间。该网站上发现的第一个模式框点击它显示更多关于点击部分的信息。

20. Cloud Zoom

一个插件，看起来好像是在考虑电子商务设计。云缩放易于实现，能真正提高用户的体验。

21. Apple-like Retina Effect

任何人谁使用了一iPhone，iPod的触摸，或ipad，将扩大在屏幕上时，你碰了长时间的面积小面积熟悉。此演示实现这个桌面效果。

专为WDD编译 Kalim舰队， 。他是一个专业网站设计者和博客与超过6年的经验。这个网站是他的激情，他自己的时间写博客的分裂，软件的发展和社会的媒体。他喜欢使用和开发新的应用网 络、移动、桌面。

原文：http://www.webdesignerdepot.com/2010/07/20-demos-showing-advanced-jquery-effects/

翻译：http://fenxiang.me/reproduced-and-translation/20-demos-showing-advanced-jquery-effects.html

全文阅读>>

2010-07-26 14:22:37 | 作者:jerryji | 评论:0 | 标签:21个演示展示强大的jQuery特效

每个 Web 设计师都在 UI 设计上费尽了心血，即使这样，资源的匮乏，视野的狭窄，也常常让他们的呕心沥血之作并不为人看好，事实上，UI 设计并不需要闭门造车，很多 UI 元素是通用的。本文收集了 20 套非常前端的 UI 元素库，它们多数是可以后期修改的 PSD 或 SVG 版。

Modern Web UI Set (.psd)

这套 UI 库包括了从按钮，到渐变，到文字各种 UI 元素，非常整齐地存放在不同目录下，由于是 PSD 矢量分格式，里面的任何元素都是可以修改的。

Massive Web UI & Button Set (.psd)

这套 UI 元素库包含3种风格，水晶，渐变色，单色，渐变色还包含7种颜色组合。

Web UI Element Pack (.psd)

包含 19 个 UI 元素，从加载进度条，到按钮，到页码，到滑动条。

Web UI Wireframe Kit (.psd)

这套 UI 库中的元素全部基于 Photoshop 矢量图案。

Browser Form Elements (.psd)

如果你想设计浏览器，会发现这套 UI 很有用（设计浏览器在国内很时髦，是不是）。

Web Page Elements (for Omnigraffle)

这套 UI 库几乎包含了全部常用 Web 元素，Header，表单元素，图标等等。

Wireframe Kit (Google Drawings)

这是一套用于 Google Drawing 的 UI 库。

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

这是一套用于原型草图设计的 UI 库，包含的元素有表单，图标，指示器，反馈消息，工具提示，导航元素，图片框，内嵌视频，滑动条以及广告 Banner，包括 Illustrator 和 SVG 两种矢量格式。

Wireframe Symbols (.ai)

这套 UI 包含一个 Illustrator 符号库和一个 Illustrator 文件，可以用来创建设计原型。

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo! 为 Web 设计师们贡献过很多好东西，包括著名的 YUI 框架，还有这套 UI 元素库，包括广告单元，日历，图表，表单，网格，菜单，按钮，导航等等，提供多种矢量和非矢量格式。

Ext JS v3.0 Stencil (for Omnigraffle)

这是一套用于可以著名 JavaScript 框架 Ext JS 的 UI 库。

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

这套来自 Liquidicity 海量图标库包括 5 种不同配色。

Flex 3 Stencil (for Omnigraffle)

这套流程图 UI 包含 Flex 3 风格的面板，表格，按钮，链接，菜单，滚动条，手风琴式菜单，选项卡等等。

Twitter Widget Stencil (for Omnigraffle)

Twitter 相关的 UI 图库。

Web Designer Toolkit (.psd)

这个 PSD 格式的 UI 库包含非常整洁的 Web 元素库。

Facebook GUI (.psd)

大名鼎鼎的 Facebook UI

Facebook Applications (Omnigraffle)

如果你要创建 Facebook 应用，这套 UI 库非常有用。

Web Elements Kit (.psd)

这套 Web 元素库包括 17 个模块，每个模块包含四种配色。

Flex Darkskin UI (.psd)

漂亮的 Flex UI 皮肤。

WEB UI Treasure Chest

非常值得收藏的 Web 元素库，卷边效果很漂亮。

本文国际来源：speckyboy.com 20 Free Web UI Element Kits and Stencils

全文阅读>>

2010-07-26 14:13:02 | 作者:jerryji | 评论:0 | 标签:UI设计师的盛宴：Web UI设计资源大系

tabs是现在网页应用最广的一种效果，jquery插件和非jquery插件也有不少，有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次

原来我想其实很简单，看看官方的API就了解，不过我在回复这些朋友之前，用firebug查看了官方的ui.tabs发现，声明了ajax缓存，每点一个tabs时，仍然会有服务器请求

这应该是服务器缓存，而不是实际上我们要求的只ajax一次，不再请求服务器了

接下来我找了一下其它的tabs插件，基本上没有符合要求的，不是太庞大就是太简单，太过庞大的话不如用ui.tabs，文档和代码规范上都是可靠的

因此，自制一个简洁的tabs插件还是有必要的

在设计之前，先整理好思路，实现tabs，自动轮换，ajax等主要功能，然后是dom的排列形式，这里采用传统的

<div id="tabs">

<ul>

<li><a href="#tabs1">tabs1</a></li>

<li><a href="#tabs2" rel="ajax.htm">tabs2</a></li>

</ul>

<div id="tabs1">Hello World!</div>

<div id="tabs2"></div>

</div>

一个li对应一个div的方式，当ajax时，添加一个a的rel属性，并将内容写入对应的div中，再去掉rel属性，这样就只请求服务器一次，接下来都是div已经写入的内容了

我这里没有使用cookie，可以结合jquery.cookie插件，这样即使用户关闭网页下次再打开，也不用请求服务器了

一，首先写个jquery插件的闭包，园子里这两天有个朋友写了javascript的闭包概念，挺好的，有兴趣的朋友去看看
view source
print?
1 (function ($) {
2 //code here
3 })(jQuery);

二，插件命名，这里命名为aTabs，这样绑定的时候可以用$(...).aTabs()，本人英文名Allen，所以用a字头命名了~
view source
print?
1 $.fn.aTabs = function (options) {
2 //api
3 //main function
4 }

三，把想好的功能写成API，供外部修改
view source
print?
01 $.fn.aTabs.defaults = {
02 firstOn: 0,
03 className: 'selected',
04 eventName: 'all', //click,mouserover,all
05 loadName: '加载中...', //ajax等待字符串
06 fadeIn: 'normal',
07 autoFade: false,
08 autoFadeTime: 3
09 };
10 var opts = $.extend({}, $.fn.aTabs.defaults, options); //这里可以将外部输入的代替掉默认的值，$.extend作用详见 <a href="http://api.jquery.com/jQuery.extend/">http://api.jquery.com/jQuery.extend/</a>，看不懂英文的直接看其中的例子就行

四，编写主体功能，说明在代码中看注释
view source
print?
01 return this.each(function () { // 这里为每个绑定dom插件
02 var target = $(this);
03 var div = target.children().not("ul,span"); //所有的tabs显示体div
04 var tabs = target.find('ul:eq(0) li'); //所有的 tabs头部索引
05 function Tabs() {
06 if ($(this).hasClass(opts.className)) {
07 return false;
08 }
09 tabsShow(div, $(this));
10 return false;
11 }
12
13 function tabsShow(div, li, index) {
14 div.stop(true, true).hide();
15 //自动轮换用
16 if (typeof (index) == "number") {
17 if (li.find("a").attr("rel")) ajax(div, li);
18 $(div[index]).stop(true,true).fadeIn(opts.fadeIn);
19 tabs.stop(true, true).removeClass(opts.className);
20 $(tabs[index]).stop(true, true).addClass(opts.className);
21 }
22 //非自动轮换
23 else {
24 var tabBody = div.filter(li.find("a").attr("href"));
25 if (li.find("a").attr("rel")) ajax(div, li);
26 tabBody.stop(true,true).fadeIn(opts.fadeIn);
27 tabs.stop(true, true).removeClass(opts.className);
28 li.stop(true, true).addClass(opts.className);
29 }
30 }
31
32 function ajax(div, li) {　　//这里是关键ajax，通过操作rel的方式实现只请求服务器一次
33 var href = li.find("a").attr("href");
34 var rel = li.find("a").attr("rel"); //ajax 请求url
35 var i = div.filter(href); //当前div
36 if (rel) { //如果ajax请求url不为空，只ajax一次
37 i.html(opts.loadName);
38 $.ajax({
39 url: rel,
40 cache: false,
41 success: function (html) {
42 i.html(html);
43 },
44 error: function () {
45 i.html('加载错误，请重试！');
46 }
47 });
48 li.find("a").removeAttr("rel"); //只ajax 一次
49 }
50 }
51 if (opts.autoFade) {
52 var index = opts.firstOn + 1;
53 setInterval(function () {
54 if (index >= div.length) {
55 index = 0;
56 }
57 tabsShow(div, $(this), index++);
58 }, opts.autoFadeTime * 1000);
59 }
60
61 tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件
62 .filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件
63 });

最后，将以上整合，tabs插件就诞生了，下面是全部源码：
view source
print?
01 /*
02 * 作者：黑曜石
03 */
04 (function ($) {
05 $.fn.aTabs = function (options) {
06 $.fn.aTabs.defaults = {
07 firstOn: 0,
08 className: 'selected',
09 eventName: 'all', //click,mouserover,all
10 loadName: '加载中...', //ajax等待字符串
11 fadeIn: 'normal',
12 autoFade: false,
13 autoFadeTime: 3
14 };
15 var opts = $.extend({}, $.fn.aTabs.defaults, options);
16
17 return this.each(function () {
18 var target = $(this);
19 var div = target.children().not("ul,span"); //所有的tabs显示体div
20 var tabs = target.find('ul:eq(0) li'); //所有的 tabs头部索引
21 function Tabs() {
22 if ($(this).hasClass(opts.className)) {
23 return false;
24 }
25 tabsShow(div, $(this));
26 return false;
27 }
28
29 function tabsShow(div, li, index) {
30 div.stop(true, true).hide();
31 //自动轮换用
32 if (typeof (index) == "number") {
33 if (li.find("a").attr("rel")) ajax(div, li);
34 $(div[index]).stop(true,true).fadeIn(opts.fadeIn);
35 tabs.stop(true, true).removeClass(opts.className);
36 $(tabs[index]).stop(true, true).addClass(opts.className);
37 }
38 //非自动轮换
39 else {
40 var tabBody = div.filter(li.find("a").attr("href"));
41 if (li.find("a").attr("rel")) ajax(div, li);
42 tabBody.stop(true,true).fadeIn(opts.fadeIn);
43 tabs.stop(true, true).removeClass(opts.className);
44 li.stop(true, true).addClass(opts.className);
45 }
46 }
47
48 function ajax(div, li) {
49 var href = li.find("a").attr("href");
50 var rel = li.find("a").attr("rel"); //ajax 请求url
51 var i = div.filter(href); //当前div
52 if (rel) { //如果ajax请求url不为空，只ajax一次
53 i.html(opts.loadName);
54 $.ajax({
55 url: rel,
56 cache: false,
57 success: function (html) {
58 i.html(html);
59 },
60 error: function () {
61 i.html('加载错误，请重试！');
62 }
63 });
64 li.find("a").removeAttr("rel"); //只ajax 一次
65 }
66 }
67 if (opts.autoFade) {
68 var index = opts.firstOn + 1;
69 setInterval(function () {
70 if (index >= div.length) {
71 index = 0;
72 }
73 tabsShow(div, $(this), index++);
74 }, opts.autoFadeTime * 1000);
75 }
76
77 tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件
78 .filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件
79 });
80 };
81 })(jQuery);

全文阅读>>

2010-07-06 16:26:15 | 作者:jerryji | 评论:0 | 标签:一步一步制作jquery插件Tabs ajax一次多行请求

Web Developer Plus， 是一个提供网页设计与开发技巧指导的博客，分享基于jQuery和jQuery UI的“精品内容滑动展示”(即图片轮显)。

它包含了描述每个步骤 (HTML\CSS\JS)的教程，并且附带源文件。

本特效可以定义每隔X秒自 动切换显示的内容，点击后立即切换到选中的内容。

按照主图像的大小比例，可 以控制限制显示的内容数目（示例中显示的是4个）。

这也间接证明了 “jquery UI 在使用少量JavaScript代码的情况下，能够制作出一款漂亮的程序”！

• 要求：jQuery ，jQuery UI
• 兼容性：所有主流浏览器
• 演示：http://demo.webdeveloperplus.com/…
• 下载:   http://demo.webdeveloperplus.com/source-code/

全文阅读>>

2010-05-13 13:52:10 | 作者:jerryji | 评论:0 | 标签:使用jQuery界面的图片轮显效果（适合做精品推荐）

jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分 开。比如我们要改变链接颜色，我们可以使用下面的代码：

$("#61dh a").css('color','#123456');

//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。

//.css(‘color’,'#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方 法。示例如下：

var divcss = {

  background: '#EEE',

      width: '478px',

      margin: '10px 0 0',

      padding: '5px 10px',

      border: '1px solid #CCC'

};

$("#result").css(divcss);

//这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。

//然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以用来查看某个元素的css属 性值。例如，我们想查看链接的颜色，可以使用下面的代码：

$("#61dh a").css("color")

//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方 法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：

$("#61dh a").css('color','#123456');

  $("#61dh a").hover(function(){

  $(this).css('color','#999');

  },

  function(){

  $(this).css('color','#123456');

});

//hover()方法的两个函数使用用逗号分隔

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用添加/移出CSS的方法来改变鼠标 划过的链接样式。

全文阅读>>

2010-05-03 15:23:29 | 作者:jerryji | 评论:0 | 标签:jQuery 基础 改变CSS样式

table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为 div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go 将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、 jQuery树形表格插件、设置颜色、点击、替换等效果。

1.DataTables- 强大的jQuery表格插件

DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩 展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。

2.uiTableFilter-jQuery 表格过滤插件

uiTableFilter是一个用于表格行筛选的jQuery插件。插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成 表格筛选。

3.Scrollable HTML Table-jQuery表格滚动插件

Scrollable HTML Table jQuery插 件可以让你的表格变得可以滚动控制。

4.Tablesorter-jQuery 表格排序插件

Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。它不但 支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。

5.Flexigrid-Web2.0 jQuery表格插件

Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。

6.HeatColor-jQuery 表格颜色插件

HeatColor可以让你根据元素的值来为元素设置颜色。 它的值的比对时根据预设的一个范围来进行比较，最后对他们自动进行颜色值的设置。

7.JQTreeTable-jQuery 树形表格插件

使用JQTreeTable插件你可以得到一个树形表格，如果用户的浏览器禁用了JavaScript，那么他们也能看到普通形式的表格，并不影响 可访问性。

8.Ingrid-jQuery 表格插件

Ingrid是另一个数据表jQuery插件。它也有很多特性，比如列调整尺寸、排序、行列添加样式等。在作者网站提供了很棒的文档来告诉大家如何 从头使用这个jQuery表格插件。

9.jQuery ColumnManager plugin

columnManager是可以控制任意表格列显示或隐藏的jQuery插件，而且它可以保存当前表格的状态至你下次访问。这个jQuery插件 非常小巧轻量，仅3.6kb。

10.jQuery treeTable-jQuery树形表格插件

jQuery treeTable是小型的JQTreeTable, 它也能让你的table显示成树形结构. 这个插件也可以在浏览器禁用JavaScript时保持文档整洁并让原始table可以使用.

11.CSV2Table-CSV格式读取 表格插件

CSV2Table 可以读取CSV文件，它从CSV文件中读取内容并创建成table表格.

12.Table Pagination-jQuery 表格分页插件

这个jQuery表格分页插件可以在表格下面创建分页元素，你还可以通过各种设置来定制分页。

13.jQuery TableRowCheckboxToggle

这个jQuery表 格插件可以让你再点击表格行的时候改变多选框状态并修改该行CSS样式。

14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。

15.uiTableEdit

uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件，它允许用户编辑表格内容。

全文阅读>>

2010-04-21 23:36:50 | 作者:jerryji | 评论:0 | 标签:十五款提高表格操作的jQuery插件

围剿 Flash 的不仅有 HTML 5，还有 JavaScript，著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅，有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效，这些效果可以更有效地展示你的内容。

1. 流感导航菜单下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。

2. 转花灯Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。

3. 拉洋片拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。

4. jQuery Quicksand 插件这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。

5. 导航滑块这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。

6. 文字的移动纹理在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。

7. jDiv: jQuery 导航 Tab一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。

8. 基于 CSS3 和 jQuery 的半透明导航系统鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。

9. 云台式拉洋片常规的拉洋片效果要么左到右，要么右到左，或者垂直上下，这个 jQuery 效果可以象云台那样扫镜头。

10. SlideDeckSlideDeck 是一种新颖的内容展示方式，有点类似 Outlook 的手风琴菜单，但视觉效果和用户体验更好一些。

全文阅读>>

2010-04-01 16:46:11 | 作者:jerryji | 评论:0 | 标签:直逼Flash的流畅感：jQuery 运动特效展示

使用jQuery，可以 很容易的选择HTML元素。但有些时候，在HTML结构较为复杂时，提炼我们选择的元素就是一件麻烦的事情。在这篇教程中，我们将探讨十种方 法去精炼和扩展我们将要操作的集合。

HTML

首先，让我们看看下图所示的简单的页面，通过这个教程我们将选择这些元素。

div.container是包裹元素；

div.photo、div.title、div.rating是div.container的直接子级；

每个div.star是div.rating的子级；

当div.satr的class为“on”时， 它是一个完整的star。

为什么要遍历？

“为什么我们要进一步提炼一系 列元素，难道是jQuery选择语法不够 强大？”

好，让我们从示例开始。在上面提到的网页中，当一个star被 点击时，我们需要给它以及左边的每个star添加class“on”。与此同时，我们要改变所有star父元素的背景颜色，因此，我们的代码如下：

$('.star').click(function(){

         $(this).addClass('on');

//       如何选取当前对象的 父元素?

//       如何获得当前star左侧所有的star?

});

在第二行，我们得到了我们点击的当前对象。但是，如 何得到stars的父级？即div.rating。但是，在一个页面中，有很多div.rating。哪一个是我们想要的？如何获得“this”左边所有 的star？

可喜的是，jQuery允 许我们基于这些基层关系，在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。

1、children

这个函数得到一组元素的直接子级。

在很多情况下会很方便，看看下面这张图：

开始的时候容器中的star全部被选择；

给children()传递一个选择表 达式将选择结果缩小至选中的star；

如果chilidren()每接受任何 参数，将返回所有直接子级；

不返回孙级元素。

2、filter

这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除。

下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

3、not

与filter恰恰相 反，not()从集合中移除匹配的元素。

看下面这个例子。偶数列的star从 选择集合中移除，留下的是奇数行的star。

“ 注意：'Even'和'odd'选择器是从0开始的，从0开 始计数，不是从1。”

4、add

如果我们想在集合中增加一些元素怎么办？add()函 数正是做这件事的。

同样简单明了，photo盒 子被添加到集合中。

5、slice

有时候，我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。

第一个参数是从零开始的第一个元素的位置，它包含在返回的片段中；

第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略，将延伸至集合的末尾；

所以，slice(0,2)将选取前两 个star。

6、parent

parent()函数选取一系列元素的直接父级。

正如下图所示，第一个star的 直接父级被选中。非常方便，应当指出，它仅仅返回直接父级，为什么很奇特？因为没有祖父元素或祖先元素被选中。

7、parents

这是复数形式，parents()选 择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。

通过给parents()传 递.container参数，div.container将被选中，它实际上第一个star的祖父。

8、siblings

这个函数选择一组元素的所有兄弟姐妹，传递一个表达式可以筛选结果。

看看这个例子：

谁是第一个star的兄弟节点？其它的四个，对 不？

如图所示，“odd”的节点被选中。索 引是从零开始的，看看下面star的红色数字。

9、prev & prevAll

prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。
如 果你正在构建一个星级部件，这将相当方便。第三个star前面的兄弟节 点被选中。

10、next & nextAll

这些函数与prev和prevAll工作方式相同，不过它选择的是下一个兄弟姐妹。

结论

最后，让我们来看看如何利用这些函数来解决现实世界中令我们头痛的问题。

 

$('.star').click(function(){

         $(this).addClass('on');

//       如何取得当前对象的 父级?

         $(this).parent().addClass('rated');

//       如何获得当前对象左 侧的star?

         $(this).prevAll().addClass('on');

         $(this).nextAll().removeClass('on');

});

这就是这篇教程中早期提到的问题，对吗？在这几行代码中我们使用了这几个遍历函数。

在第5行，看看parent()函数，啊哈，真简单。

在第8行和9行，prevAll()和nextAll().选择填充的star和 空的star。

现在，遍历函数是做么的方便。当在一起使用时，它们将更加强大。也就是说，一个函数的输出是另一个函数的输 入，它们是链式的。

全文阅读>>

2010-03-31 23:05:03 | 作者:jerryji | 评论:0 | 标签:jQuery中10个非常有用的遍历函数

jquery是一个非常容易使用，同时也是扩展性很好的一个 javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教 程。

插件

 

LavaLamp

 

相信很多人都见过这个很酷的菜单插件，也有很多网站成功的应用了这个插件。

插件主页

jquery Kwicks 插件

 

如果你多Mootools有些了解，或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效 果，很酷，也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单，制作某些步骤演示也非常合适——比如购物流程的演示。插件主页

查看演示 | 下载

仿Mac的停靠菜单插件

 

这是个仿苹果机的停靠菜单的一个jQuery插件，支持水平和竖直两种。查看插件页面。

查看演示 | 下载

jquery滑动菜单

 

一个和LavaLamp很像的菜单，而且脚本只有不到1kb(lavalamp也是这么小)，也比较容易使用。该菜单的原理是，通过在当前ul元素 的下面(或者说”后面”更合适些？)添加一个额外的div，用position定位该div。然后用jquery和插件来控制这个div的大小和位置，并 实现动画效果。

查 看演示 | 下 载

教程

 

CSS Sprites2 – 使用jquery制作动画菜单

 

知名博客alistapart的 一个关于CSS Sprites的教程，这个网站对CSS Sprites的技术的普及起到了非常重要的作用。本文的目的是介绍基于javascript的CSS Sprites技术，只是是通过制作动画菜单的例子来讲解。非常值得一读。查看教程

查 看演示

 

使用jQuery的动画菜单

 

教你如何使用CSS和jquery的animate()函数改变背景色的透明度(opacity)来实现动画菜单的一个教程，讲的很详细，如果你看 不懂英文没关系，能看懂教程中的代码就OK了。查看教程

查看演示

 

使用CSS和jquery创建很酷的动画导航菜单

 

Nettus推出的一个教程，非常详细的讲解如何使用CSS和jquery制作很酷的动画效果的菜单。查 看教程

查 看演示 | 下载源文 件

 

CSS Dock Menu

 

来自www.ndesign-studio.com的 一篇使用CSS制作停靠菜单的教程，使用了jquery机器FishEye插件。查看教程

查看 演示 | 下载

 

使用jquery制作平滑的动画导航

 

一个很不错的导航效果，这个教程很详细的讲解了制作这个菜单的步骤。使用了jquery的easing组件。查 看教程

查看演示 | 下载

 

使用jquery实现动画背景图片

 

这是一个教程，作者结合了上面提到的CSS Sprites2教程，结合jquery 背景动画插件来实现的一个效果。这个效果很不错，很酷。查看教程。

查看演示 | 下载

全文阅读>>

2010-03-31 23:04:14 | 作者:jerryji | 评论:0 | 标签:推荐10个jquery动画菜单 十分漂亮的插件

jQuery的开篇声明里有一段非常重要的话：jQuery是为了改变 javascript的编码方式而设计的。从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库。jQuery改变 javascript编码方式！

那么它是如何实现它的声明的呢？这里，用以下的一段简短的使用流程：

1、查找(创建)jQuery对象：$("selector");

2、调用jQuery对象的方法完成我们需要完成的工作：$("selector").doOurWork();

好了，jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的。这两个步骤是jQuery的编码逻辑核心！

要实现这种简洁编码方式，创建jQuery对象这一环节至关重要。因此，jQuery的dom元素查找能力相当强悍。此外，jQuery对象的方法 肯定是有限的，有限的方法满足不了日益增长各有所需的要求，所以，必须提供jQuery对象方法的扩展能力。

强悍的dom元素查找能力，以及随心所欲的方法扩展，这两点正是jQuery的核心所在！

来一个简单的示例，来说明jQuery是如何工作的：

< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head> <title> 无标题页</title> </head> <body id=”bd”> <a href=”http://www.baidu.com”>baidu</a> </body> </html> <script type=”text/javascript” src=”../Script/jquery.js”></script> <script type=”text/javascript” > $(function(){ $(“a“).click(function(e) {//1)查找$(”a”);2)jQuery对象事件click;3)jQuery对象方法hide $(this).hide(“slow“); return false; }); }); </script>

jQuery中有一个“配置”的思想，这一点使得对象的属性/事件等设置变得容易理解且十分简便，如下一个拖拽组件的初始化：

$(document).ready( function() { $(’#drag1′).Draggable({ handle: “ax“, //属性设置 onStart: function(el,x,y){ //事件监听器设置 } }); } );

可以看到，$("#drag1")是查找并创建一个jquery对象，然后调用Draggable方法进行拖拽初始化，在此方法调用时，传递一个 “配置”对象，进行拖拽操作的初始化配置。这一“配置”的思想，极大简化了一些编码步骤，并相当直观和易懂。

以下我进行三个问答：

1、问：为什么$(selector)之后，返回的是jQuery对象？

答：从jQuery的源代码中，我们可以知道：var $ = jQuery 。因此当我们$(selector)操作时，其实就是jQuery(selector)，创建的是一个jQuery对象。当然正确的写法应该是这样 的：var jq = new $(selector); 而jQuery使用了一个小技巧在外部避免了new，在jquery方法内部：if ( window == this ) return new jQuery(selector);

2、问：为什么创建一个jQuery对象之后，我们可以这样写$(selector).each(function(index){…});进行遍 历操作呢？
答：其实jQuery(selector)方法调用时，在jQuery(selector)方法内部，最后返回的是一个数 组：return this.setArray(a); 而each方法体内部是一个for循环，在循环体内是这样调用的：method.call(this[i]，i) 。

3、问：为什么jQuery能做到jQuery对象属性/方法/事件的插件式扩展？
答：如果您有一些javasciprt的面向对象方面的 知识，就会知道，jQuery.prototype原型对象上的扩展属性/方法和事件，将会给jQuery的对象“扩展”。基于这一点，jQuery是这 样写的：jQuery.fn = jQuery.prototype 。所以，当我们扩展一个插件功能时，如下：

jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); };

其实就是：

jQuery.prototype.check = function() { return this.each(function() { this.checked = true; }); };

综上所述,jQuery给我们带来了一个简洁方便的编码模型(1>创建jQuery对象;2>直接使用jQuery对象的属性/方法 /事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的”配置”对象思想.

附:实现自己的jQuery

< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Untitled Page</title> </head> <body> <div id=”d”>divvv</div> <div id=”fsd”>fdsf</div> </body> </html> <script type=”text/javascript”> //实现自己的 MyQuery框架 var MyQuery = function(selector){ if ( window == this ) return new MyQuery(selector); //这里只实现dom类型的简单查找,嘿嘿 var doms = document.getElementsByTagName(selector); var arr = []; for(var i=0; i<doms .length; i++){ arr.push(doms.item(i)); } return this.setArray(arr); } MyQuery.prototype.setArray = function( arr ) { this.length = 0; [].push.apply( this, arr ); return this; } MyQuery.fn = MyQuery.prototype; var $ = MyQuery; // 插件扩展1)each MyQuery.fn.each = function(method){ for(var i=0,l=this.length; i<l; i++){ method.call(this[i],i); } } //插件扩展2)show MyQuery.fn.show = function(){ this.each(function(i){ alert(i+“:“+this.id+“:“+this.innerHTML); }); } //debugger $(“div“).show(); </script></doms></script>

全文阅读>>

2010-03-31 23:02:09 | 作者:jerryji | 评论:0 | 标签:jQuery工作原理解析以及源代码示例