摘要：使用與實現了一個比較簡單但功能齊全的增刪改查功能的后臺管理頁面，雖然只是一個頁面，但麻雀雖小五臟俱全，常用的功能都用到了，本例用原生的與配合使用，不考慮的重構性及打包，該例子零耦合，開箱即用。相關文章實現雙擊內容變為可編輯狀態

使用jquery與bootstrap實現了一個比較簡單但功能齊全的增刪改查功能的后臺管理頁面，雖然只是一個CRUD頁面，但麻雀雖小五臟俱全，JS常用的功能都用到了，本例用原生的jquery與bootstrap配合使用，不考慮JS的重構性及打包，該例子零耦合，開箱即用。

先看Demo：

1、獲取/賦值input輸入值

$("#my_id").val();// 獲取
$("#my_id").val(“user_id");// 賦值

2、獲取/賦值textarea文本域輸入值

$("#my_textarea").val();// 獲取
$("#my_textarea").val("my_textarea");// 賦值

// 文本域顯示默認值，這個和input不一樣，不能通過value賦默認值
這里是文本域默認的內容

3、隱藏/顯示輸入框

$("#my_input").hide();
$("#my_input").show();

4、獲取表單form輸入的數據

$("#my_input").hide();
$("#my_input").show();

5、js相關方法

 < a href="javascript:history.back()">回退
  刷新
 
 

6、異步請求實例

// 1.簡單的異步請求 $.post
  $.post("./express_statement.php",{act:"import_data", year:year,month:month}, function (data){
      $("#tip").html("恭喜您，處理完成！");
      console.log(data);
   }, "json");
             
// 2. 復雜一點的請求 $.ajax (該請求可以設置更多的參數，如超時時間）
$.ajax({
  url:url,
  type:"POST",
  data:{name:name},
  timeout:30000,
  dataType:"json",
  success:function(data){
    //var msgJson = eval(data); dataType為json，就不用轉了
    if (msgJson.status == "0") {
        $("#infoRefund").attr("style", "display:block")
    } else {
        alert("查詢錯誤，請稍后再試")
    }
  },
  error:function(){}
});

        
       

從以上我們可以看出，$.post是$.ajax的一個簡化。簡化，所以就會省去很多參數。要用更多功能，就用$.ajax。

如果ajax返回的為json 字符串，則要轉為json對象：

 var obj = eval("("+data+")");
 if(obj.code > 0){

 }

7、dom自動加載
jquery中的$(function(){...})什么時候執行？

這個是在頁面DOM文檔加載完成后加載執行的，等效于$(document).ready(function(){...});
優于window.onload，后者必須等到頁面內包括圖片的所有元素加載完畢后才能執行。

如果你不想讓它自動執行可以把這些放到一個函數中，想執行時調用就可以了

8、$.fn用法
在 jQuery 中，fn 其實就是 JavaScript 中 propotype 的一個別名，$ 是 jQuery 的別名，所以

$.fn.pluginName 等同于 jQuery.prototype.pluginName
$.fn.pluginName 表示創建一個 jQuery 的屬性，通俗的說是寫一個 jQuery 函數

pluginName 才是函數名
實例：

$.fn.setRedText = function() {
    return $(this).css("color", "red");
};
 
$("p").setRedText();

9、$.extend用法
Jquery的擴展方法extend是我們在寫插件的過程中常用的方法，該方法有一些重載原型，在此，我們一起去了解了解。

Jquery的擴展方法原型是:　　　

extend(dest,src1,src2,src3...);

它的含義是將src1,src2,src3...合并到dest中,返回值為合并后的dest,由此可以看出該方法合并后，是修改了dest的結構的。如果想要得到合并的結果卻又不想修改dest的結構，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...) //也就是將"{}"作為dest參數。

這樣就可以將src1,src2,src3...進行合并，然后將合并結果返回給newSrc了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的結果

result={name:"Jerry",age:21,sex:"Boy"}

也就是說后面的參數如果和前面的參數存在相同的名稱，那么后面的會覆蓋前面的參數值。

示例前端active_list.html代碼：

    
    
    
    
    

    






    活動列表

    

    

        

        

            
標題：
            
   
                
                    添加活動
                
            
        
        

            

                  默認
            
        
        
    
    

    總數（{total_count}）

    

    

        
排序
        
顯示標題
        
圖片鏈接
        
標簽
        
截止時間
        
狀態
        
活動詳情
        
獎項設置
        
簡介
        
備注
        
操作
    
    
    

    
    

        
{order_num}
        
{title}[{active_id}]
        

        
{tag_name}
        
{expire_time}
        
 上架 下架
        
內容編輯
        
 設置獎項
        
{summary}
        
{remark}
        

            編輯
              
        刪除
        

    

    


    

    {page_str}       

    

    

        

            

                

                    
                        ×
                    
                    

                        活動詳情
                    
                
                

                    

                        上傳封面圖片
                        

                            
                            
                        
                    
                    

                        

                            排名
                            

                                
                            
                        
                        

                            標題
                            

                                
                            
                        
                        

                            標簽
                            

                                
                            
                        
                        

                            封面圖鏈接
                            

                                 
                                
                                
                            
                        

                        

                            截止時間
                            

                                
                                
                                
                                不限時
                                    

                            
                        

                        

                            狀態
                            


                                
                                    上架
                                
                                
                                    下架
                                
                            
                        

                        

                            簡介
                            

                                
                                
                            
                        
                        

                            備注
                            

                                
                                
                            
                        
                   
                

                    關閉
                    
                    
                        提交
                     
                
                
            

        

    

動作處理頁面active_action.php

 0 ? 1 : 0;

  $("#b4").click(function(){
              //alert($("select option:selected").text());
            //必須 用這個 val()函數把每個值打印;
//alert($("select option:selected").val());    //會彈出 選項1   ？？？
            // 選項1^^因為它取得不是文本框里的值 選項1^^，而是value的值選項1
        var $objs=$("select option:selected");

        /*    $.each($objs,function(){
                alert($(this).val());
            });*/
        
        /*    $.each($objs,function(i,n){
            //    alert(n.value);
                alert($(n).val());
            })*/
            
        /*    $objs.each(function(){
                window.alert($(this).val());
            })*/
            
            $objs.each(function(i,n){
                window.alert("ok"+$(n).val());
            })
            
            
      })
      

在一些網站上我們經常看到交互性很強的功能。一些用戶資料可以直接雙擊出現文本框，并在此輸入新的資料即可修改，無需再按確定按鈕等。。
我在網上查了很多資料，但都有一個小bug，就是當獲取焦點后，光標的位置在文本框內容是開始處，這樣編輯時還需要用戶再重新選擇一下光標位置，這樣的交互感覺不好；后來查到新的資料解決了此問題，希望可以幫助到更多的人。

代碼部分：

注意：設置選擇文本的內容或設置光標位置

    

        
你的用戶名:
        
三人行
        
你的個性檔
        
三人行，必有我師焉！
    

雙擊事件：ondblclick
替換div中的內容：

document.getElementById("spxx").innerHTML = res.content;  // document
$("#"+remark_id).html(remark);     // jquery

jQuery中沒有innerText、innerHtml

發現如果我在div或者其他非表單的標簽中賦值，原本用普通的js就直接document.getElementById("id").innerHtml（或者其他幾個）就可以了。
但是在jQuery中不行
例如：

document.getElementById("t").innerHTML="ffffdffffdffffddd";     -----------A
$("#t").innerHTML="sdsds";      -----------B
 
document.getElementById("t") 獲得的是dom對象,所有對象都有innerHTML
$("#t")獲得的是jquery對象,無innerHTML
 
所以我們可以這樣使用：
$("#t").html("sdsds");
or
$("#t")[0].innerHTML="sdsds";

如果是innerText，也類似就是把html改成Text即可。

相關文章：
JS實現雙擊內容變為可編輯狀態