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

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

Jun 19, 2017 am 11:06 AM
jquery 常用 資料處理 用法

這裡主要介紹了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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:&lt

MySQL ISNULL 函數詳解及用法介紹 MySQL ISNULL 函數詳解及用法介紹 Mar 01, 2024 pm 05:24 PM

MySQL中的ISNULL()函數是用來判斷指定表達式或列是否為NULL的函數。它傳回一個布林值,如果表達式為NULL則回傳1,否則回傳0。 ISNULL()函數可以在SELECT語句中使用,也可以在WHERE子句中進行條件判斷。 1.ISNULL()函數的基本語法:ISNULL(expression)其中,expression是要判斷是否為NULL的表達式或

Golang如何提升資料處理效率? Golang如何提升資料處理效率? May 08, 2024 pm 06:03 PM

Golang透過並發性、高效能記憶體管理、原生資料結構和豐富的第三方函式庫,提升資料處理效率。具體優勢包括:並行處理:協程支援同時執行多個任務。高效率記憶體管理:垃圾回收機制自動管理記憶體。高效資料結構:切片、映射和通道等資料結構快速存取和處理資料。第三方函式庫:涵蓋fasthttp和x/text等各種資料處理庫。

使用Redis提升Laravel應用的資料處理效率 使用Redis提升Laravel應用的資料處理效率 Mar 06, 2024 pm 03:45 PM

使用Redis提升Laravel應用的資料處理效率隨著網路應用的不斷發展,資料處理效率成為了開發者關注的重點之一。在開發基於Laravel框架的應用時,我們可以藉助Redis來提升資料處理效率,實現資料的快速存取和快取。本文將介紹如何使用Redis在Laravel應用中進行資料處理,並提供具體的程式碼範例。一、Redis簡介Redis是一種高效能的記憶體數據

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

Laravel 和 CodeIgniter 中資料處理能力的比較如何? Laravel 和 CodeIgniter 中資料處理能力的比較如何? Jun 01, 2024 pm 01:34 PM

比較Laravel和CodeIgniter的資料處理能力:ORM:Laravel使用EloquentORM,提供類別物件關係映射,而CodeIgniter使用ActiveRecord,將資料庫模型表示為PHP類別的子類別。查詢建構器:Laravel具有靈活的鍊式查詢API,而CodeIgniter的查詢建構器更簡單,基於陣列。資料驗證:Laravel提供了一個Validator類,支援自訂驗證規則,而CodeIgniter的驗證功能內建較少,需要手動編碼自訂規則。實戰案例:用戶註冊範例展示了Lar

如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬

See all articles