软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > jQuery > JQuery 应用过程详解

JQuery 应用过程详解

终极目的:想做一个方便的排序功能。

具体实现:点击后可以输入排序的数字编号,移开后自动更新数据库

1,我想把这个功能用<span>来完成,也就需要一个在页面上监控指定的span的东西,他就是:

ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
$(document).ready(function(){

// 在这里写你的代码...

});

2,页面上<span>很多,如何才能区分呢?用id?还是class?id太单一,于是用class,因为排序不是针对一条数据,而是多条。

Copy to ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
$(document).ready(function(){<BR> $(".BY").click(function() {<BR> alert('测试下先');<BR> });<BR><BR>}); <BR>

4,然后要让span变成一个输入框才行,go

Copy to ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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来获取。

8,再改进一下,排序肯定要指定一个数据ID

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<span class="BY" DbID="3" title="点击修改">3</span><br />
<span class="BY" DbID="2" title="点击修改">2</span><br />
<span class="BY" DbID="1" title="点击修改">1</span><br />
<span class="BY" DbID="0" title="点击修改">0</span><br />

Copy to ClipboardLiehuo.Net Codes引用的内容:[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: "ID=" + o.attr("BYID") + "&BY=" + $(".OnBY").val(),

success: function(msg) {

if (msg.indexOf("[BYNOK]")>0) {

o.html($(".OnBY").val());

} else {

alert("发生错误: " + msg);

o.html(old);

}

}

});

});

});

});

还有更多想法,等有空再增加上去。比如修改时,数据处理有个时间,在等待的时间里,改变下鼠标样式为繁忙等。

或更新后,重新装载数据,因为具体数据不同,只能具体应用。也或者直接刷新页面。

作者博客:http://www.cnblogs.com/myjddy/

    相关阅读
    栏目导航
    推荐软件