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

可以选择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就是移去目标内容，所以这里有两步，先是加上编辑框和按钮，然后移去之前的内容。