首頁 > web前端 > js教程 > jQuery中的常用資料處理用法實例匯總

jQuery中的常用資料處理用法實例匯總

伊谢尔伦
發布: 2017-06-19 11:06:37
原創
1331 人瀏覽過

這裡主要介紹了jQuery常用資料處理用法 , 實例總結了trim、param、isArray、isFunction、each等jQuery常用的資料處理方法。初學jQuery的朋友可以參考其用法。

1. $.trim():刪除字串前後的空白字元。

var str = ' 薯条 ';
var formatStr = $.trim(str);  //'薯条'
登入後複製

2. $.param():陣列或物件序列化

var obj = {
  name: 'dog',
  count: 10
};
var str = $.param(obj); //"name=dog&count=10"
登入後複製

3. $.isArray():偵測是否為陣列。
4. $.isFunction():偵測是否為函數型別。
5. $.each(obj, [callback]):遍歷陣列或集合物件。 obj是要遍歷的集合對象,callback表示回呼函數,該函數將在遍歷每個成員時出發。回呼函數包含兩個參數,第一個參數為物件成員或陣列的索引,第二個參數為對應的值。

var a = [x,y,z];
$.each(a, function(index, value) {
  console.log(index); //0,1,2
  console.log(value); //x,y,z
});
var b = {x:1, y:2, z:3};
$.each(b, function(key, value)) {
  console.log(key);  //x,y,z
  console.log(value); //1,2,3
}
登入後複製

說明:如果中途要退出each()循環,可以在回呼函數中傳回false,其他回傳值將被忽略。

$.each()和$(selector).each()函數相同,但$.each()可以遍歷任何物件或數組,而$(selector).each()只能遍歷目前選擇器選擇的jQuery物件。

6. $.makeArray():把類別陣列物件轉換為陣列物件。所謂類別數組對象,就是擁有length屬性,索引從0到length-1。但是這些物件不能夠呼叫數組方法。

var arr = $.makeArray($('li')); //类数组对象转换为数组
$('ul').html(arr.reverse()); //可以调用数组的reverse()方法了
登入後複製

7. $.grep():根據篩選函數過濾掉數組中不符合條件的元素。

$.grep(array, callback, [invert]);

說明:參數array表示要過濾的數組,callback表示過濾函數。如果過濾函數回傳true,則保留元素,如果過濾函數回傳false,則刪除元素。參數invert,可選,如果為false或沒有設置,則返回數組中由過濾函數返回true的元素;如果該參數為true,則返回過濾函數中返回false的元素。

var a = [1,2,3,4,5];
a = $.grep(a, function(value, index)) {
  return value > 3; //a现在为[4,5]
});
var b = [1,2,3,4,5];
b = $.grep(b, function(value, index)) {
  return value > 3; //b现在为[1,2,3]
}, true);
登入後複製

8. $.map():映射陣列。
$.map(array, callback);

var a = [1,2,3,4];
a = $.map(a, function(elem)) {
  return elem * 2; //a现在为[2,4,6,8]
});
登入後複製

9. $.merge():合併陣列。
說明:接受兩個陣列參數。

var a = [1,2,3];
var b = [4,5];
var c = $.merge(a,b); //c为[1,2,3,4,5];
登入後複製

10. $.unique():刪除DOM元素數組中的重複項。

...
<a id="1" class="link link1"></a>
<a id="2" class="link"></a>
<a id="3" class="link"></a>
...
var $link = $(&#39;.link&#39;); //包含#1,#2,#3
var $firstLink = $(&#39;.link1&#39;); //包含#1
var $links = $.merge($link, $firstLink); //包含#1,#2,#3,#1
var $linkList = $.unique($link); //包含#1,#2,#3
登入後複製

說明:只能處理DOM元素陣列,不能處理字串或JavaScript陣列

以上是jQuery中的常用資料處理用法實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板