有了上面的这些已经能做许多事了，再来看看上面说的第二种方法

1. $(document.ready(function() {
2.    $("#orderedlist".find("li".each(function(i {
3.      $(this.append( " BAM! " + i ;
4.    });
5.  });

出现了find方法，这句话的意思还是比较好理解的，定位到id为orderedlist的dom，找到所有的li元素，每一个都添加一个默认函数。
append方法是添加一些文字到所选的dom，所以这些文字会出现在dom的末尾。

如果要在提交form成功后，清空form

1. $(document.ready(function() {
2.    // use this to reset a single form
3.    $("#reset".click(function() {
4.      $("#form".reset();
5.    });
6.  });

当点击reset后，通过调用reset方法，id为form的表单将会被重置。

如果要使所有的表单都清空，则只需去掉form前面的”#”即可。

如果要从dom中选取一组相似的元素，可以使用filter() 和 not()，filter将只选取符合表达式的元素。而not则正相反。

1. $(document.ready(function() {
2.    $("li".not("[ul]".css("border", "1px solid black";
3.  });

这段代码的意思是选取所有的li元素（但该li不能包含ul子元素），给它们加上边框。
css方法，前面是属性，后面是值（这只是用法之一）。

更进一步，如果我们要选取所有包含name属性的链接，则可以使用下面这段代码。

1. $(document.ready(function() {
2.    $("a[@name]".background("#eee";
3.  });

很简单吧，通过@指定就行了，如果要指定name为jquery的链接，也很方便，a[@name=jquery]就OK啦。
如果只匹配部分，只需将=改为*=，比如要找到所有包含jquery的name，（匹配jquery plugin、jquery home 等等）a[@name*=jquery]

可以选择parent，比如这段代码

1. $(document.ready(function(){
2.    $("a".hover(function(){
3.      $(this.parents("p".addClass("highlight";
4.    },function(){
5.      $(this.parents("p".removeClass("highlight";
6.    });
7.  });

顺便说一句，$(document).ready(callback) 可以缩写成 $(callback)

使用 ajax

这里不使用原来的例子，因为我觉得不是那么容易明白，所以用了jquery官方的例子，edit in place

url：http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax

示范1
浏览者能够在他所看的页面的相应位置点击编辑，而无需打开新页面。

demo1：http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php

1. $(document.ready(function(){
2.    setClickable();
3.  });

当页面载入完成后，激活setClickable函数。

1. function setClickable() {
2.    $('#editInPlace'.click(function(){ ... });
3.  }

这个应该就不用说了吧，设置id为editInPlace的dom的click事件。

1. var textarea = '<div><textarea rows="10" cols="60">' + $(this.html() + '</textarea>';
2.  var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton"/></div></div>';
3.  var revert = $(this.html();

这个对应上面的省略号，也就是函数体。分别定义了3个变量，textarea是用来生成编辑框的，$(this).html指代的是原来该dom的内容。button用来生成保存和取消按钮。revert用来相应取消事件。

然后是

1. $(this.after(textarea+button.remove();

after的作用就是在目标dom的后面加上相应的内容，remove就是移去目标内容，所以这里有两步，先是加上编辑框和按钮，然后移去之前的内容。

1. $('.saveButton'.click(function(){saveChanges(this, false;});
2. $('.cancelButton'.click(function(){saveChanges(this, revert;});

为两个按钮定义click事件。

1. .mouseover(function() {
2.    $(this.addClass("editable";
3.  })
4. .mouseout(function() {
5.    $(this.removeClass("editable";
6.  });

定义鼠标移入和移走事件。

接着定义saveChanges函数

1. function saveChanges(obj, cancel { ... }

如果cancle是false的话，那就意味着要保存编辑后的内容

1. if (!cancel {
2.    var t = $(obj.parent().siblings(0.val();
3.    // ...
4.  }

parent()对应的是input外面的div，siblings对应的是相邻的dom，0指的是前面的dom，也就是

1. <textarea rows="10" cols="60">' + $(this).html() + '</textarea>

接下来该来点关键的了

1. $.post("test2.php",{content: t},function(txt){
2.    alert(txt;
3.  });

jquery的ajax方法，.post表示以post方式提交，第一个参数是目标页面，在这里就是”test2.php”，第二个参数是提交的内容，最后是回调函数。txt是服务端传递过来的参数。

1. else {
2.    var t = cancel;
3.  }

如果cancle不为false的话，就执行revert()方法。

1. $(obj.parent().parent().after('<div id="editInPlace">'+t+'</div>'.remove() ;

移走textarea和button，恢复原状。
最后再调用setClickable方法就可以了，所有的js

1. $(document.ready(function(){
2. setClickable();
3. });
4.  
5. function setClickable() {
6. $('#editInPlace'.click(function() {
7. var textarea = '<div><textarea rows="10" cols="60">'+$(this.html()+'</textarea>';
8. var button     = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
9. var revert = $(this.html();
10. $(this.after(textarea+button.remove();
11. $('.saveButton'.click(function(){saveChanges(this, false;});
12. $('.cancelButton'.click(function(){saveChanges(this, revert;});
13. })
14. .mouseover(function() {
15. $(this.addClass("editable";
16. })
17. .mouseout(function() {
18. $(this.removeClass("editable";
19. });
20. };
21.  
22. function saveChanges(obj, cancel {
23. if(!cancel {
24. var t = $(obj.parent().siblings(0.val();
25. $.post("test2.php",{
26.   content: t
27. },function(txt){
28. alert( txt;
29. });
30. }
31. else {
32. var t = cancel;
33. }
34. if(t=='' t='(click to add text)';
35. $(obj.parent().parent().after('<div id="editInPlace">'+t+'</div>'.remove();
36. setClickable();
37. }

动画效果

使用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 });

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

多选框插件

如果将jquery用于form，那么碰到radio和checkboxes时，可能会这么处理

1. $("input[@type='checkbox']".each(function() {
2.    this.checked = true;
3.    this.checked = false; // or, to uncheck
4.    this.checked = !this.checked; // or, to toggle
5.  });

如果嫌麻烦的话，可以写个插件来处理each

1. jQuery.fn.check = function() {
2.    return this.each(function() {
3.      this.checked = true;
4.    });
5.  };

现在就可以这么使用这个插件了

1. $("input[@type='checkbox']".check();

当然也可以为uncheck() 和 toggleCheck()写个插件，但在这里我们作为参数选项来达到这个目的。

1. jQuery.fn.check = function(mode {
2.    // if mode is undefined, use 'on' as default
3.    var mode = mode || 'on';
4.  
5.    return this.each(function() {
6.      switch(mode {
7.        case 'on':
8.          this.checked = true;
9.          break;
10.        case 'off':
11.          this.checked = false;
12.          break;
13.        case 'toggle':
14.          this.checked = !this.checked;
15.          break;
16.      }
17.    });
18.  };

这样默认就是on，调用的话，就可以这样

1. $("input[@type='checkbox']".check();
2. $("input[@type='checkbox']".check('on';
3. $("input[@type='checkbox']".check('off';
4. $("input[@type='checkbox']".check('toggle';

可选设置

1. jQuery.fn.rateMe = function(options {
2.    // instead of selecting a static container with
3.    // $("#rating"), we now use the jQuery context
4.    var container = this;
5.  
6.    var settings = jQuery.extend({
7.      url: "rate.php"
8.      // put more defaults here
9.    }, options;
10.  
11.    // ... rest of the code ...
12.  
13.    // if possible, return "this" to not break the chain
14.    return this;
15.  });

调用的时候

1. $(....rateMe({ url: "test.php" });

下一步

如果想更加熟悉或者开发js项目，可以考虑一下firefox的firebug插件