JQuery 應用過程詳解
來源：程序員人生 發布時間：2014-04-17 14:28:23 閱讀次數：3263次
終極目的：想做一個方便的排序功能。
具體實現：點擊后可以輸入排序的數字編號，移開后自動更新數據庫。
1，我想把這個功能用<span>來完成，也就需要一個在頁面上監控指定的span的東西，他就是：
ready(fn)當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
$(document).ready(function(){
// 在這里寫你的代碼...
});
2，頁面上<span>很多，如何才能區分呢？用id？還是class？id太單一，于是用class，因為排序不是針對一條數據，而是多條。
<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
$(document).ready(function(){<BR> $(".BY").click(function() {<BR> alert('測試下先');<BR> });<BR><BR>}); <BR>
4，然后要讓span變成一個輸入框才行，go
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class="OnBY" type="text" value="" + old + ""/>");
});
});
5，這時發現了一個 問題，無法點擊的。點了之后數字沒了。因此就無法輸入更改了。想個什么辦法呢？還記得自動獲取選擇么？
$(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，很簡單的可以更改了。不過當鼠標移開的時候，不能變回去了。郁悶，咋整？
$(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。看看。
$(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
<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 />
