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

使用jquery與bootstrap實(shí)現(xiàn)了一個(gè)比較簡單但功能齊全的增刪改查功能的后臺(tái)管理頁面，雖然只是一個(gè)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");// 賦值

// 文本域顯示默認(rèn)值，這個(gè)和input不一樣，不能通過value賦默認(rèn)值
這里是文本域默認(rèn)的內(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、異步請(qǐng)求實(shí)例

// 1.簡單的異步請(qǐng)求 $.post
  $.post("./express_statement.php",{act:"import_data", year:year,month:month}, function (data){
      $("#tip").html("恭喜您，處理完成！");
      console.log(data);
   }, "json");
             
// 2. 復(fù)雜一點(diǎn)的請(qǐng)求 $.ajax (該請(qǐng)求可以設(shè)置更多的參數(shù)，如超時(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("查詢錯(cuò)誤，請(qǐng)稍后再試")
    }
  },
  error:function(){}
});

        
       

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

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

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

 }

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

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

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

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

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

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

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

9、$.extend用法
Jquery的擴(kuò)展方法extend是我們?cè)趯懖寮倪^程中常用的方法，該方法有一些重載原型，在此，我們一起去了解了解。

Jquery的擴(kuò)展方法原型是:　　　

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...進(jìn)行合并，然后將合并結(jié)果返回給newSrc了。如下例：

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

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

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

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

示例前端active_list.html代碼：

    
    
    
    
    

    






    活動(dòng)列表

    

    

        

        

            
標(biāo)題：
            
   
                
                    添加活動(dòng)
                
            
        
        

            

                  默認(rèn)
            
        
        
    
    

    總數(shù)（{total_count}）

    

    

        
排序
        
顯示標(biāo)題
        
圖片鏈接
        
標(biāo)簽
        
截止時(shí)間
        
狀態(tài)
        
活動(dòng)詳情
        
獎(jiǎng)項(xiàng)設(shè)置
        
簡介
        
備注
        
操作
    
    
    

    
    

        
{order_num}
        
{title}[{active_id}]
        

        
{tag_name}
        
{expire_time}
        
 上架 下架
        
內(nèi)容編輯
        
 設(shè)置獎(jiǎng)項(xiàng)
        
{summary}
        
{remark}
        

            編輯
              
        刪除
        

    

    


    

    {page_str}       

    

    

        

            

                

                    
                        ×
                    
                    

                        活動(dòng)詳情
                    
                
                

                    

                        上傳封面圖片
                        

                            
                            
                        
                    
                    

                        

                            排名
                            

                                
                            
                        
                        

                            標(biāo)題
                            

                                
                            
                        
                        

                            標(biāo)簽
                            

                                
                            
                        
                        

                            封面圖鏈接
                            

                                 
                                
                                
                            
                        

                        

                            截止時(shí)間
                            

                                
                                
                                
                                不限時(shí)
                                    

                            
                        

                        

                            狀態(tài)
                            


                                
                                    上架
                                
                                
                                    下架
                                
                            
                        

                        

                            簡介
                            

                                
                                
                            
                        
                        

                            備注
                            

                                
                                
                            
                        
                   
                

                    關(guān)閉
                    
                    
                        提交
                     
                
                
            

        

    

動(dòng)作處理頁面active_action.php

 0 ? 1 : 0;

  $("#b4").click(function(){
              //alert($("select option:selected").text());
            //必須 用這個(gè) val()函數(shù)把每個(gè)值打印;
//alert($("select option:selected").val());    //會(huì)彈出 選項(xiàng)1   ？？？
            // 選項(xiàng)1^^因?yàn)樗〉貌皇俏谋究蚶锏闹?選項(xiàng)1^^，而是value的值選項(xiàng)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)常看到交互性很強(qiáng)的功能。一些用戶資料可以直接雙擊出現(xiàn)文本框，并在此輸入新的資料即可修改，無需再按確定按鈕等。。
我在網(wǎng)上查了很多資料，但都有一個(gè)小bug，就是當(dāng)獲取焦點(diǎn)后，光標(biāo)的位置在文本框內(nèi)容是開始處，這樣編輯時(shí)還需要用戶再重新選擇一下光標(biāo)位置，這樣的交互感覺不好；后來查到新的資料解決了此問題，希望可以幫助到更多的人。

代碼部分：

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

    

        
你的用戶名:
        
三人行
        
你的個(gè)性檔
        
三人行，必有我?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或者其他非表單的標(biāo)簽中賦值，原本用普通的js就直接document.getElementById("id").innerHtml（或者其他幾個(gè)）就可以了。
但是在jQuery中不行
例如：

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

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

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