jQuery学习笔记（二）

什么都不说了，先上代码再解释

<script type="text/javascript">
$(document).ready(function(){
	setClickable();
		});
function setClickable() {
	$('#editInPlace').click(function() {
		var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>'; 
		var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>'; 
		var revert = $(this).html();
		$(this).after(textarea+button).remove();
		$('.saveButton').click(function(){saveChanges(this, false);}); 
		$('.cancelButton').click(function(){saveChanges(this, revert);}); 
		}).mouseover(function() { 
			$(this).addClass("editable"); 
			}).mouseout(function() { 
			$(this).removeClass("editable"); 
			}); 
}//end of function setClickable

function saveChanges(obj, cancel) {
	if(!cancel) { 
		var t = $(obj).parent().siblings(0).val();
		$.post("test2.php",{ 
			content: t},
			function(txt){ 
			alert( txt); 
			}); 
			} 
	else { 
		var t = cancel; 
		}
	$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
setClickable(); 
}
</script>

首先

$(document).ready(function(){
	setClickable();
		});

在$(document).ready(function(){
})里面调用一个函数

function setClickable() {
	$('#editInPlace').click(function() {

函数体，表明是一个id为eidtInPlace的div的click事件

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

声明的3个变量，其中textarea是活的当前对象的HTML代码并附上样式，button是写出SAVE和CANCEL的button，revert用来接当前对象的HTML内容

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

[color=red]jQuery的DOM函数“after”用来将新生的textarea HTML代码放置在我们指定的div元素后。我在后面紧跟
着连锁上了一个remove()方法 来移除div元素以节省代码。[/color]
以上是官方解释。
我自己的理解是：
[color=orange]
首先是用after来确定位置，但是如果不确定位置为什么不弄一个默认的位置呢？如果把这行代码删了就会没有任何效果。这个看起来挺诡异的；另外为什么要remove呢？不光是节省代码，而且省去了一些麻烦。比如如果remove，那么如果再次点当前对象，又会出现一个输入框，点多少出来多少，很不和谐。还是需要注意很多细节的。
[/color]

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

这里定义了saveButton和cancelButton的click时间，调用的是saveChanges函数。

}).mouseover(function() { 
			$(this).addClass("editable"); 
			}).mouseout(function() { 
			$(this).removeClass("editable"); 
			}); 
}//end of function setClickable

这里要做的就是最简单的鼠标悬浮和移出事件，就是加一些class，其中还加上了链式结构，就是对于一个对象连续定义事件

function saveChanges(obj, cancel) {

一个函数

	if(!cancel) { 
		var t = $(obj).parent().siblings(0).val();
		$.post("test2.php",{ 
			content: t},
			function(txt){ 
			alert( txt); 
			}); 
			} 

[color=red]
如果cancel为假，则函数将保存更改并使用html格式发送给服务器端的php脚本。我在这里使用了jQuery内
置的一个DOM函数实现对textarea内容的提取操作：parent()和siblings()。
[/color]
[color=orange]
老实说，这里真的看不懂。不过，parent应该是和父类的第一个同级的东东，然后post到test2.php里
还有，这里面据说涉及到“DOM风格”，这个我也不明白啊，所以……要学的东西也太多
[/color]

	else { 
		var t = cancel; 
		}

[color=red]
如果cancel有一个值，那么必然是保存在revert变量中的原始html内容。所以，在这个时候我希望变量t变为
原始html内容
[/color]
这里应该就是赋值的意思

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

[color=red]
下一步是通过jQuery提供的DOM函数放置一个新的div元素，id为“editInPlace”，在这之后包含了
textarea元素。。。然后删除掉这个div元素
[/color]
[color=orange]
为什么是两个parent呢？做了个测试，发现：
1、没有parent：
[/color]
[img]http://dl.iteye.com/upload/attachment/300045/5adfae3b-bb2d-3e1f-810b-3bf330b1ba6f.bmp[/img]
[color=orange]其中，内容也可以点

2、有一个parent：
[/color]

[img]http://dl.iteye.com/upload/attachment/300047/280fb220-0651-3b93-939d-35d411313ca5.bmp[/img]
[color=orange]
内容也可以点


3、两个parent：
很完美！就是把对象的值给改变了。
[/color]

[color=red]
在果壳中，这将告诉jQuery“在DOM树中上跃两次。将HTML代码附在到达位置的对象之后，然后移除那个对
象。”
最后，我们再次调用setClickable函数并关闭saveChange()函数。重调setClickable()函数的含义是重新设
置onMouseover,onMouseout,和onClick事件到初始状态。
[/color]

setClickable();

思路其实很清晰，但是由于基础不行，所以看起来还是挺累的，哎，努力吧！

附：原版教材，感谢原作者！
以前的PDF没有链接，又加上了一些超链，但是一些失效的没加