jQuery_jqueryでのdata()メソッドの使用例

この記事の例では、jQuery での data() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、一致する要素にデータを追加したり、一致する要素からデータを取得したりできます。

文法構造 1:

コードをコピー コードは次のとおりです:

$(selector).data(name,value)

パラメータリスト:

参数	描述
name	存储的数据名称。
value	将要存储的任意数据。

コード例:

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("div").data("mydata","スクリプト ホームへようこそ");
})
$("#show").click(function(){
$("div").text($("div").data("mydata"));
})
})

要素にデータを追加
追加されたデータを表示

上記のコードは、一致する div 要素に名前 mydata を追加し、値は「Script Home Welcomes You」データで、データ名を使用して返します。

文法構造 2:

一致する要素から指定されたデータ名を持つ追加データを返します。

コードをコピー コードは次のとおりです:

$(selector).data(name)

パラメータリスト:

コード例:

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("div").data("mydata","スクリプト ホームへようこそ");
})
$("#show").click(function(){
$("div").text($("div").data("mydata"));
})
})

要素にデータを追加
追加されたデータを表示

上記のコードは、一致する div 要素に名前 mydata を追加し、値は「Script Home Welcomes You」データで、データ名を使用して返します。

文法構造 3:

キー/値ペア オブジェクトを使用して、一致する要素にデータを追加します。

コードをコピー コードは次のとおりです:

$(selector).data(properties)

パラメータリスト:

コード例:

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("div").data("mydata",{username:"daoliang"});
})
$("#show").click(function(){
alert($("div").data("mydata").username);
})
})

要素にデータを追加します
要素に追加されたデータを取得します

上記のコードは、mydata という名前のデータをキーと値のペアの形式で div に追加し、データ名とキーを通じて添付されたデータ値を取得できます。

文法構造 4:

オブジェクトメソッドを使用して、指定された要素にデータを追加します。

コードをコピー コードは次のとおりです:

$(selector).data(object)

パラメータリスト:

コード例:

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
$(document).ready(function(){
var mytest=new Object();
mytest.first="スクリプト ハウスへようこそ";
mytest.second="JQuery ゾーン";
$("#add").click(function(){
$("div").data(mytest);
})
$("#show").click(function(){
アラート($("div").data("秒"));
})
});

要素にデータを追加します
要素に追加されたデータを取得します

上記のコードは、オブジェクトの形式でデータを追加し、添付されたデータ値を取得します。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。