JQuery Tips

另外一篇文章 JavaScript Tips

 

1. 獲取span標籤的值須要用text();

2. datepicker控件的‘setDate’屬性可用於設置默認值；

3. 使用parseFloat轉換時，若是字符串超出float的限制（無限的），將會返回Infinite或者-Infinite，此時能夠用isFinite來進行判斷，詳情請參考此文章；

4. 若是在dialog中有server控件，須要將此dialog加到頁面的form對象下，不然，server控件的事件不會被觸發；具體操做以下：

　　　　When you create the dialog, you need to move it a bit for ASP.Net, like this:

　　　　　　$(".class").dialog({//options}).parent().appendTo("form");

　　　　By default the .dialog() moves the content to just before </body> which most importantly is outsidethe <form></form>, so elements within it won't be included in the POST (or GET) to the server. If you manually move it like I have above, it'll resolve this issue.

5. 可以使用html()給HTML標籤添加內容，可以使用append()與prepend()爲當前元素添加子元素，append()是添加到最後一個子元素的位置(last child)，prepend()添加到第一個子元素的位置(first child)；

6. JavaScript中的字符串拼接，直接用+=，不要使用concat，由於使用concat須要建立另外一個變量去接收合併後的字符串；

7. JSON.stringify()用來將json對象轉爲string；

8. $.parseJSON()用來將json對象轉爲javascript對象（即全部的key都變爲屬性）；

9. jQuery.each(array/object, callback)與$(selector).each()不一樣，當對於array進行操做時，只能使用jQuery.each(array, callback)；

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. 

11. JS Array的操做方法pop()和shift()將會分別移除Array的最後一個和第一個元素（對Array自己進行操做，不須要存儲到其它元素中），返回值爲被移除的那個元素；

12. JS Array的操做方法slice(start index, end index)和splice(index, length, values)能夠對數組進行截取和拼接操做，slice()須要將操做結果保存到一個新的數組中，而splice是對自身的操做；

13. JS Array對象能夠直接alert出來，結果顯示爲以逗號分隔到字符串；

14. $.getScript(url, [callback])經過GET請求載入一個javascript文件，並可在js文件成功載入後調用一個函數；

15. jQuery選擇器有如下幾種模糊匹配（通配符）：

屬性值以某字符串開始：selector[attrName^="value"];
屬性值以某字符串結束：selector[attrName$="value"];
屬性值包含某字符串：selector[attrName*="value"];

16. $.("#")獲得的對象是jQuery對象，不能直接使用HTML DOM對象的方法，好比document.getElementbyId("").innerHTML="XXX"能夠工做，$("#").innerHTML就不能夠；好比File API是HTML 5 DOM對象的方法，因此 $("#").files 不能獲得任何數據；

17. $("#")[0] 就能夠將一個jQuery對象轉換成 DOM對象，$(element)就能夠將一個DOM對象轉換爲jQuery對象；

18. $.each(function(){});中的return true/return false操做只是用來跳出當前循環（至關於C#中的break），不能用於返回true或false值，$.each(function(){})是回調函數，返回的也是一個集合，因此在each內部不能直接return出一個值（此處與C#不一樣），所以想要拿到$.each()中的值時，只能按照如下寫法來作：

function test(){
　　var success = false;
　　$(..).each(function () { 
   　　if (..) { 
       　　success = true;
       　　return false; //跳出循環，至關於C#中的break
   　　} 
　　});
 　　return success ; 
} 

19. 從jQuery 1.7開始，應該使用.on()方法替代.live(), .bind(), .delegate()方法, .on()能夠爲現有的，以及將要動態添加的元素附加事件，可是有時候爲將要添加的源於附加事件時，即便使用.on()也可能不起做用，好比: $(".jstree-icon").on(「click」,function(){...}); 這時能夠更改一下寫法，使用如下方式：

//jstree is the id of parent element, all nodes including that which will be generated later have a class name jstree-icon
                $("#jstree").on("click",".jstree-icon",function(){
                    
                });

20. insertBefore(newChild,existingChild)，例：oParentNode.insertBefore(newNode,oParent.childNodes[0])；

21. children()方法只能查找當前元素的下一級子元素中的內容，但find()方法能夠查找當前元素的全部子元素中的內容；

22. jquery.data()方法是爲了HTML5 dataset屬性設置的，用於獲取或設置HTML5中自定義的屬性（data-*）值，能夠參考此文章，可是，jQuery是通用的，即在非HTML5頁面仍然能夠使用.data(*)來獲取對象的data-*屬性，此處有如下幾點須要注意：

(1) .data(key,value) 和 .data(key)中的 key值是 大小寫敏感的；

(2) 若是是用 .data(key, value) 動態生成的data-*屬性，則key值區分大小寫；

(3) 若是是直接寫在html結構中的，例如：<tr data-childNodes="A"></tr>，因爲html在生成頁面時會將全部標籤、屬性變爲小寫，則在獲取值時，應該使用全小寫的格式，例如：.data("childnodes")；

(4) 其實就是看生成後的HTML頁面中，data-*屬性是大寫仍是小寫，因爲動態添加的data-*屬性是在 html生成以後，因此保留了自己的大小寫，直接寫在HTML結構中的data-*屬性是在HTML生成以前寫的，因此都會自動轉爲小寫格式；

23. 與trigger()相比，triggerHandler()方法不會觸發事件的默認行爲（也就是說並不會真正地觸發這個事件），只會執行事件的內容；

24. jQuery中有三種判斷checkbox選中與否的方法：詳見此頁；

.attr(‘checked’):   //看版本1.6+返回:」checked」或」undefined」 ;1.5-返回:true或false
.prop(‘checked’): //16+:true/false
.is(‘:checked’):    //全部版本:true/false//別忘記冒號哦

25. jQuery中對於true/false類型的屬性，建議使用prop，而非attr;

26. jQuery的toggleClass()方法能夠添加多個class做爲參數，可是，這裏面是有一個隱藏的操做：若是element一開始就含有類A，那麼使用 $(element).toggleClass("A B") 時，第一次操做會移除類A，添加類B，第二次操做時就會添加類A，移除類B；

<div class="col-xs-12 article-wrapper"></div>

//-------------------JS--------------------------
$(".article-wrapper").toggleClass("bloc col-xs-12 col-xs-4"); //第一次操做，會移除col-xs-12，添加bloc 和 col-xs-4；第二次操做，會移除 bloc 和 col-xs-4，添加 col-xs-12；因爲 artible-wrapper類 用於綁定，因此不會被移除；

27. $.each(function(index, item){});中的index是從0開始；

28. 向ajax的回調函數中添加額外的參數時，能夠使用以下方法，這同時也是一個jQuery調用SharePoint Web Service的例子：

//call web service to get Person objects
    function callPersonWebService(userId, itemId){
        var soapEnv =  "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'><soap:Body><Person xmlns='http://XXX.ColXXXX'><username>"+userId+"</username></Person></soap:Body></soap:Envelope>";  
    
            $.ajax({  
                url: url_webService, 
                type: "POST",  
                dataType: "xml",  
                data: soapEnv,  
                complete: function(jqXHR, textStatus){processPersonResult(jqXHR, textStatus, itemId)},  
                contentType: "text/xml;charset=\"utf-8\""
            });    
    }
    
    //get Person object and pass it to updateFISContact function
    function processPersonResult(xData, status,itemId) { 
        var result = xData.responseXML;
            
        try {  
            if (status == "success" && result){  
                    var $responseXMLObj = $(result);
                    updatedItemArr.push($responseXMLObj); //push all Person object to an array
                    $("#objectsFromWebService").text("Objects from web service: "+updatedItemArr.length);
                    updateFISContact($responseXMLObj, itemId);
            }    
        }  
        catch(e) {  
            alert(e);  
        }  
    }  

29. ajax中，data指的是發送到服務器端的數據；dataType屬性指示了客戶端接收到的數據類型，contentType指示了發送到服務器端到數據類型；若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，並做爲回調函數參數傳遞，可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含 script 元素。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。
"json": 返回 JSON 數據 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

30. ajax的調用是異步的，若是想要在其它方法中使用ajax的返回值，則不能簡單地進行賦值或者return給其它方法，須要在success函數或者done函數中進行後續操做；

常見的錯誤寫法以下：

function checkUniqueRoleAssignment(restURI) {
    var result = false;
    $.ajax({
        url: restURI,
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {
            if (data.d) {
                result = data.d.HasUniqueRoleAssignments; //true or false
            }
        },
        error: function (xhr) {
            //do nothing
        }
    });
    return result;
}

此種寫法致使的結果是，每次都會返回false，由於在ajax還沒有返回 data 時，return result 已被執行了；

正確的寫法爲：

function checkUniqueRoleAssignment(restURI) {
    return $.ajax({
                url: restURI,
                type: "GET",
                headers: { "Accept": "application/json;odata=verbose" }
            });
}

//調用時
checkUniqueRoleAssignment(uniquepermissionURI).done(function(data){if (data.d) {
            var result = data.d.HasUniqueRoleAssignments; //true or false

            //to do next
        }
})；

31.