AJAX学习笔记05

//在页面加载时，让所有的td都拥有一个点击事件 $(document).ready( function(){//找到所有的td标签 var tds = $("td"); //为td标签添加单击事件 tds.click( tdClick );} );function tdClick(){//0.保存当前的td节点 var td = $( this );//1.取出当前td中的内容文本保存起来 var text = td.text();//2.清空td里面的内容 td.empty();//3.建立一个文本框，即一个input的元素节点 //为什么创建<input>标签就创建出文本框， //经过测试，input的type属性默认类型为text  var input = $("<input type='text'>");//4.设置文本框的值是保存起来的文本内容 //input.attr( "type" , "button"); input.attr( "value" , text );//4.5让文本框响应键盘事件 input.keyup( function( event ){//0.获取用户按下的键值 var keyEvent = event || window.event;var keyCode = keyEvent.keyCode;//1.判断是否按下回车 if ( keyCode == 13 ){//2.获取当前文本框的内容 var inputNode = $( this );//3.清空td里面的内容 td.empty();//4.将保存的文本框中的内容填充到td中 td.html( inputNode.val() ); //5.让td重新拥有点击事件 td.click( tdClick );}//扩展作业：按下ESC可以恢复操作 //ESC键的keyCode为27 if ( keyCode == 27 ){var inputNode = $( this );input.val( text );}});//5.将文本框中的内容加入到td中 td.append( input ); //input.appendTo( td ); //当td中的内容变成一个input的元素节点以后，不再响应onclick事件 //当td中的内容从input的元素节点变成文字信息时，再将onclick事件注册上去 //5.5将文本框中的文字被选中 //将JQuery对象转换为普通的DOM对象，才能调用select()方法 var inputDom = input.get( 0 );inputDom.select();//6.取消td上的点击事件 API，事件——unbind(); td.unbind();}