在使用jQuery處理數據過程中,我們經常會涉及到數據駝峰的轉換。所謂數據駝峰,就是將數據的命名方式由下劃線命名(如:user_name)轉換成駝峰命名(如:userName)。在jQuery中,可以使用data()方法來進行這種轉換。
首先我們先看一下如何在HTML中定義數據屬性:
<div id="user" data-user_name="Tom"></div>
這里我們定義了一個id為"user"的div,同時定義了一個名為"user_name"的數據屬性,其值為"Tom"。
接下來,我們可以使用data()方法獲取這個數據屬性的值:
var userName = $("#user").data("user_name"); console.log(userName); // 輸出:"Tom"
上面的代碼中,我們通過jQuery選取了id為"user"的div元素,并使用data()方法獲取其"data-user_name"屬性的值,賦值給變量userName。
我們也可以使用data()方法設置數據屬性:
$("#user").data("firstName", "Tom"); $("#user").data("lastName", "Smith");
上面的代碼中,我們分別使用data()方法設置了"id為user"的div元素的"firstName"和"lastName"兩個數據屬性。
在進行數據轉換時,我們可以使用jQuery提供的camelCase()方法,將下劃線命名的數據屬性名轉換為駝峰命名:
var userName = $("#user").data("user_name"); var camelName = $.camelCase("user_name"); $("#user").data(camelName, userName); console.log($("#user").data("userName")); // 輸出:"Tom"
上面的代碼中,我們分別獲取"id為user"的div元素的"user_name"屬性的值,并使用camelCase()方法將屬性名轉換為駝峰命名。然后將轉換后的屬性名和屬性值作為參數傳遞給data()方法進行設置。
總之,在jQuery中使用data()方法進行數據操作是非常方便和靈活的。
下一篇恭賀新禧對聯效果css