JS实现即点即改之jQuery繁简对比
Post by
yaohuaq
  2009-12-12 04:31:05 Saturday Tags:javascript,jquery

简单的一个效果，JQUERY大大简化了代码..... 不得不说JQ之强大

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <script type="text/javascript" src="jquery.js"></script>  
  5. <script type="text/javascript">   
  6. function changeClick() {  
  7.     var obj = document.getElementById('c7is');  
  8.     var newobj = document.createElement('input');  
  9.     var text;  
  10.     typeof (text=obj.innerText)=='undefined' ? obj.textContent : obj.innerText;  
  11.     newobj.setAttribute('id','c7is');  
  12.     newobj.setAttribute('type','text');  
  13.     newobj.setAttribute('value',text);  
  14.   
  15.     newobj.onblur=function() {  
  16.         if(typeof obj.innerText=='undefined'){  
  17.             obj.textContent = newobj.value;  
  18.         }else {   
  19.             obj.innerText = newobj.value;  
  20.         }  
  21.         document.body.replaceChild(obj,newobj);  
  22.     }//失去焦点  
  23.     document.body.replaceChild(newobj,obj);  
  24.   
  25. }  
  26. function xx() {  
  27.     $('#c7').replaceWith('<div id="c7" onClick="JchangeClick()">'+$('#c7').val()+'</div>');  
  28. }  
  29. function JchangeClick() {  
  30.     $('#c7').replaceWith('<input type="text" id="c7" value="'+$('#c7').text()+'" onblur="xx()"/>');  
  31. }  
  32. </script>  
  33. </head>  
  34. <body>
  35. <div id="c7is" ondblClick="changeClick()">c7isqingyaohua</div>  
  36. <div id="c7" ondblClick="JchangeClick()">C7_yaohuaq</div>  
  37. </body>  
  38. </html>  

 

发表评论:
姓名：
联系方法:(选填)
评论内容:
个人信息
迎接
昵称:C7_yaohuaq
QQ:88523499
Email:c77cc#vip.qq.com
居住地:北京 海淀
星座:天蝎
毕业院校:广西民族大学
工作点:喜讯无限