摘要：使用與實現(xiàn)了一個比較簡單但功能齊全的增刪改查功能的后臺管理頁面，雖然只是一個頁面，但麻雀雖小五臟俱全，常用的功能都用到了，本例用原生的與配合使用，不考慮的重構(gòu)性及打包，該例子零耦合，開箱即用。相關(guān)文章實現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)

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

先看Demo：

1、獲取/賦值input輸入值

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

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

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

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

3、隱藏/顯示輸入框

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

4、獲取表單form輸入的數(shù)據(jù)

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

5、js相關(guān)方法

 < 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. 復(fù)雜一點的請求 $.ajax (該請求可以設(shè)置更多的參數(shù)，如超時時間）
$.ajax({
  url:url,
  type:"POST",
  data:{name:name},
  timeout:30000,
  dataType:"json",
  success:function(data){
    //var msgJson = eval(data); dataType為json，就不用轉(zhuǎn)了
    if (msgJson.status == "0") {
        $("#infoRefund").attr("style", "display:block")
    } else {
        alert("查詢錯誤，請稍后再試")
    }
  },
  error:function(){}
});

        
       

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

如果ajax返回的為json 字符串，則要轉(zhuǎn)為json對象：

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

 }

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

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

如果你不想讓它自動執(zhí)行可以把這些放到一個函數(shù)中，想執(zhí)行時調(diào)用就可以了

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

$.fn.pluginName 等同于 jQuery.prototype.pluginName
$.fn.pluginName 表示創(chuàng)建一個 jQuery 的屬性，通俗的說是寫一個 jQuery 函數(shù)

pluginName 才是函數(shù)名
實例：

$.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的結(jié)構(gòu)的。如果想要得到合并的結(jié)果卻又不想修改dest的結(jié)構(gòu)，可以如下使用：

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

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

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

那么合并后的結(jié)果

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

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

示例前端active_list.html代碼：

    
    
    
    
    

    






    活動列表

    

    

        

        

            
標題��
            
   
                
                    添加活動
                
            
        
        

            

                  默認
            
        
        
    
    

    總數(shù)��{total_count}��

    

    

        
排序
        
顯示標題
        
圖片鏈接
        
標簽
        
截止時間
        
狀��(tài)
        
活動詳情
        
獎項��(shè)��
        
簡介
        
備注
        
操作
    
    
    

    
    

        
{order_num}
        
{title}[{active_id}]
        

        
{tag_name}
        
{expire_time}
        
 上架 下架
        
��(nèi)容編��
        
 ��(shè)置獎��
        
{summary}
        
{remark}
        

            編輯
              
        刪除
        

    

    


    

    {page_str}       

    

    

        

            

                

                    
                        ×
                    
                    

                        活動詳情
                    
                
                

                    

                        上傳封面圖片
                        

                            
                            
                        
                    
                    

                        

                            排名
                            

                                
                            
                        
                        

                            標題
                            

                                
                            
                        
                        

                            標簽
                            

                                
                            
                        
                        

                            封面圖鏈��
                            

                                 
                                
                                
                            
                        

                        

                            截止時間
                            

                                
                                
                                
                                不限��
                                    

                            
                        

                        

                            狀��(tài)
                            


                                
                                    上架
                                
                                
                                    下架
                                
                            
                        

                        

                            簡介
                            

                                
                                
                            
                        
                        

                            備注
                            

                                
                                
                            
                        
                   
                

                    ��(guān)��
                    
                    
                        提交
                     
                
                
            

        

    

動作處理頁面active_action.php

 0 ? 1 : 0;

  $("#b4").click(function(){
              //alert($("select option:selected").text());
            //必須 用這�� val()函數(shù)把每個值打��;
//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());
            })
            
            
      })
      

在一些網(wǎng)站上我們經(jīng)?？吹浇换バ院軓姷墓��?。一些用戶資料可以直接雙擊出��(xiàn)文本框，并在此輸入新的資料即可修��，無需再按確定按鈕等����
我在��(wǎng)上查了很多資料，但都有一個小bug，就是當(dāng)獲取焦點��，光標的位置在文本框��(nèi)容是開始��，這樣編輯時還需要用戶再重新選擇一下光標位��，這樣的交互感覺不��；后來查到新的資料解決了此問��，希望可以幫助到更多的人��

代碼部分��

注意：設(shè)置選擇文本的��(nèi)容或��(shè)置光標位��

    

        
你的用戶名:
        
三人行
        
你的個性檔
        
三人行，必有我?guī)熝桑?/dd>
    

雙擊事件：ondblclick
替換div中的內(nèi)容：

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

jQuery中沒有innerText、innerHtml

發(fā)現(xiàn)如果我在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即可。

相關(guān)文章：
JS實現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)