发布于 2016-09-21 13:16:27 | 129 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

使用Jquery实现点击文字变为文本框效果，可对文本框文字进行修改，具体的实现思路如下，感兴趣的朋友可以参考下，希望对大家有所帮助
使用Jquery实现点击文字变为文本框效果，可对文本框文字进行修改。

1.点击文字变为文本框
2.文本框自动全选文字
3.对文本框内容进行修改
4.点击文本框以外的地方文本框再次变为修改后的文字
5.同步更新SQL数据库内容

Html部分代码

 
<table width="200"> 
<tr> 
<td><b>ID</b></td> 
<td><b>名称</b></td> 
<td><b>操作</b></td> 
</tr> 
<tr> 
<td><b>1</b></td> 
<td class="caname"><b>哈哈</b></td> 
<td><b>删除</b></td> 
</tr> 
<tr> 
<td><b>2</b></td> 
<td class="caname"><b>哈哈</b></td> 
<td><b>删除</b></td> 
</tr> 
<tr> 
<td><b>3</b></td> 
<td class="caname"><b>哈哈</b></td> 
<td><b>删除</b></td> 
</tr> 
</table> 

新建edit.js文件，代码如下

 
$(function() { 
//获取class为caname的元素 
$(".caname").click(function() { 
var td = $(this); 
var txt = td.text(); 
var input = $("<input type='text'value='" + txt + "'/>"); 
td.html(input); 
input.click(function() { return false; }); 
//获取焦点 
input.trigger("focus"); 
//文本框失去焦点后提交内容，重新变为文本 
input.blur(function() { 
var newtxt = $(this).val(); 
//判断文本有没有修改 
if (newtxt != txt) { 
td.html(newtxt); 
/* 
*不需要使用数据库的这段可以不需要 
var caid = $.trim(td.prev().text()); 
//ajax异步更改数据库,加参数date是解决缓存问题 
var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date(); 
//使用get()方法打开一个一般处理程序，data接受返回的参数（在一般处理程序中返回参数的方法 context.Response.Write("要返回的参数");） 
//数据库的修改就在一般处理程序中完成 
$.get(url, function(data) { 
if(data=="1") 
{ 
alert("该类别已存在！"); 
td.html(txt); 
return; 
} 
alert(data); 
td.html(newtxt); 
}); 
*/ 
} 
else 
{ 
td.html(newtxt); 
} 
}); 
}); 
}); 

Html头部引用jq类库文件和自己写的edit.js文件，注意顺序

 
<script src="../js/jquery.js" type="text/javascript"></script> 
<script src="../js/edit.js" type="text/javascript"></script>