JQuery 应用过程详解
发布时间：2018-08-13 18:21:58 所属栏目：业界 来源：站长网
导读：终极目的：想做一个方便的排序功能。 具体实现：点击后可以输入排序的数字编号，移开后自动更新数据库。 1，我想把这个功能用span来完成，也就需要一个在页面上监控指定的span的东西，他就是： ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
|
副标题[/!--empirenews.page--]
终极目的：想做一个方便的排序功能。
具体实现：点击后可以输入排序的数字编号，移开后自动更新数据库。 1，我想把这个功能用<span>来完成，也就需要一个在页面上监控指定的span的东西，他就是： ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
$(document).ready(function(){ // 在这里写你的代码... }); 2，页面上<span>很多，如何才能区分呢？用id？还是class？id太单一，于是用class，因为排序不是针对一条数据，而是多条。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<span class="BY">3</span><br /><BR><span class="BY">2</span><br /><BR><span class="BY">1</span><br /><BR><span class="BY">0</span><br />
3，绑定的事件我想肯定是click Copy to Clipboard引用的内容：[www.veryhuo.com]
$(document).ready(function(){<BR> $(".BY").click(function() {<BR> alert('测试下先');<BR> });<BR><BR>}); <BR>
4，然后要让span变成一个输入框才行，go Copy to Clipboard引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".BY").click(function() { var old = $(this).text(); var o = $(this); o.html("<input class="OnBY" type="text" value="" + old + ""/>"); }); }); 5，这时发现了一个 问题，无法点击的。点了之后数字没了。因此就无法输入更改了。想个什么办法呢？还记得自动获取选择么？ Copy to Clipboard引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".BY").click(function() { var old = $(this).text(); var o = $(this); o.html("<input class="OnBY" type="text" onMouseOver="this.select();" value="" + old + ""/>"); }); }); 6，很简单的可以更改了。不过当鼠标移开的时候，不能变回去了。郁闷，咋整？ Copy to Clipboard引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".BY").click(function() { var old = $(this).text(); var o = $(this); o.html("<input class="OnBY" type="text" onMouseOver="this.select();" value="" + old + ""/>"); $(".OnBY").blur(function() { o.html($(".OnBY").val()); }); }); }); 用失去焦点函数，把html代码替换回来就是。换回来的还是修改的值。 7，不过 不能更数据库交涉，接下来就要用到ajax。看看。 Copy to Clipboard引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".BY").click(function() { var old = $(this).text(); var o = $(this); o.html("<input class="OnBY" type="text" onMouseOver="this.select();" value="" + old + ""/>"); $(".OnBY").blur(function() { $.ajax({ type: "GET", url: "Admin_BY.aspx", data: "BY=" + $(".OnBY").val(), success: function(msg) { alert(msg); o.html($(".OnBY").val()); } }); }); }); }); 把修改的By参数提交给Admin_BY.aspx处理，后台的处理我就不多说了。用Requst.QueryString来获取。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
