初学者全面接触学习jquery(译文)(6)

动画效果

使用show()和hide()方法就能完成简单的动画效果

1. $(document.ready(function(){
2.    $("a".toggle(function(){
3.      $(".stuff".hide('slow';
4.    },function(){
5.      $(".stuff".show('fast';
6.    });
7.  });

toggle方法对应点击事件，当点击目标dom时，轮流执行函数。所以上面这段代码的意思是当点击链接时，class名为stuff的dom出现和隐藏的效果交替。

可以通过animate()函数来创建复杂的动画效果。

1. $(document.ready(function(){
2.    $("a".toggle(function(){
3.      $(".stuff".animate({ height: 'hide', opacity: 'hide' }, 'slow';
4.    },function(){
5.      $(".stuff".animate({ height: 'show', opacity: 'show' }, 'slow';
6.    });
7.  });

jquery有一个非常好的插件 interface plugin ，通过它可以创建更多更炫的效果，浏览地址：http://interface.eyecon.ro/

排序：tablesorter 插件

tablesorter 插件 可以在客户端排序表格的数据，插件下载地址：http://motherrussia.polyester.se/jquery---escaped_anchor:cdcc6a6e460c630945c44113b9c458c7--/tablesorter/

在载入这个插件的后，可以这么调用它

1. $(document.ready(function(){
2.    $("#large".tableSorter();
3.  })

点击表头，表格的数据就会进行相应的排序

1. $(document.ready(function() {
2.    $("#large".tableSorter({
3.      // Class names for striping supplied as a array.
4.      stripingRowClass: ['odd','even'],
5.      // Stripe rows on tableSorter init
6.      stripeRowsOnStartUp: true
7.    });
8.  });

tablesorter的官方网站可以查看示例和使用方法，浏览地址：http://motherrussia.polyester.se/jquery---escaped_anchor:cdcc6a6e460c630945c44113b9c458c7--/tablesorter/

编写自己的插件

只要照着下面的方法做，那么编写一个插件也是很简单的。
插件名称
给插件命名，这里以”foobar”为例，创建一个jquery.[pluginName].js，比如jquery.foobar.js
添加一个客户端方法

1. jQuery.fn.foobar = function() {
2.    // do something
3.  };

之后就可以这么调用了

1. $(....foobar();

默认设置

1. jQuery.fn.foobar = function(options {
2.    var settings = jQuery.extend({
3.      value: 5, name: "pete", bar: 655
4.    }, options;
5.  };

可以直接调用，也可以自己添加参数

1. $("...".foobar({ value: 123, bar: 9 });

说明文档
如果开放自己的插件，那么应该有一个说明文档再配上实例。有了这些基本的概念之后，我们就来写一个小插件