當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery Tips

發布時間：2024/7/5 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 objectsfunction 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 functionfunction 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函數中進行后續操作；

常見的錯誤寫法如下：

此種寫法導致的結果是，每次都會返回false，因為在ajax尚未返回 data 時，return result 已被執行了；

正確的寫法為：

31.?

轉載于:https://www.cnblogs.com/qijiage/p/3191767.html

總結

以上是生活随笔為你收集整理的JQuery Tips的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jquery
tips