.data (مفتاح ، قيمة). إرجاع: jQuery
الوصف: تخزين بيانات عشوائية مرتبطة بالعناصر المتطابقة.
الإصدار: 1.2.3 .data (مفتاح ، قيمة)
الإصدار المضاف: 1.4.3 .data (obj)
- الكائناتالنوع: Objectكائن من أزواج البيانات ذات القيمة الرئيسية لتحديثها.
تسمح لنا طريقة .data()
بإرفاق بيانات من أي نوع بعناصر DOM بطريقة آمنة من المراجع الدائرية وبالتالي من تسرب الذاكرة.
يمكننا تعيين عدة قيم مميزة لعنصر واحد واستردادها لاحقًا:
$( "body" ).data( "foo", 52 ); $( "body" ).data( "bar", { myType: "test", count: 40 } ); $( "body" ).data( { baz: [ 1, 2, 3 ] } ); $( "body" ).data( "foo" ); // 52 $( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
في jQuery 1.4.3 .data(obj)
كائن بيانات عنصر مع .data(obj)
البيانات المخزنة مسبقاً مع هذا العنصر.
قبل jQuery 1.4.3 (بدءًا من jQuery 1.4) ، .data()
طريقة .data()
بالكامل جميع البيانات ، بدلاً من مجرد توسيع كائن البيانات. إذا كنت تستخدم مكونات إضافية تابعة لجهة خارجية ، فقد لا يكون من المستحسن استبدال كائن بيانات العنصر بالكامل ، نظرًا لأن المكوّنات الإضافية قد تكون قد عينت البيانات أيضًا.
يغير jQuery 3 سلوك هذه الطريقة لمحاذاة مواصفات API لواجهة Dataset . على وجه التحديد ، يقوم jQuery 3 بتحويل كل تسلسل من حرفين من "-" (U + 002D) متبوعًا بحرف ASCII صغير حسب النسخة الكبيرة من الحرف وفقًا لتعريف خوارزمية واجهة برمجة تطبيقات Dataset . كتابة عبارة مثل $( "body" ).data( { "my-name": "aValue" } ).data();
سيعود { myName: "aValue" }
.
نظرًا للطريقة التي تتفاعل بها المتصفحات مع المكونات الإضافية والرمز الخارجي ، لا يمكن استخدام طريقة .data()
على <object>
(ما لم يكن .data()
Flash plugin) أو <applet>
أو <embed>
.
ملاحظات إضافية:
- لاحظ أن هذه الطريقة لا توفر حاليًا دعمًا عبر النظام الأساسي لإعداد البيانات على مستندات XML ، نظرًا لأن Internet Explorer لا يسمح بإرفاق البيانات عبر خصائص expando.
-
undefined
يتم التعرف علىundefined
كقيمة للبيانات..data( "name", undefined )
المكالمات مثل.data( "name", undefined )
إلى إرجاع كائن jQuery الذي تم الاتصال به ، مما يسمح بالتسلسل.
مثال:
تخزين ثم استرجاع قيمة من عنصر div.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>data demo</title> <style> div { color: blue; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> The values stored were <span></span> and <span></span> </div> <script> $( "div" ).data( "test", { first: 16, last: "pizza!" } ); $( "span:first" ).text( $( "div" ).data( "test" ).first ); $( "span:last" ).text( $( "div" ).data( "test" ).last ); </script> </body> </html>
عرض:
.data (مفتاح) إرجاع: Object
الوصف: قم بإرجاع القيمة الموجودة في مخزن البيانات المحدد للعنصر الأول في مجموعة jQuery ، كما هو محدد بواسطة البيانات (الاسم ، القيمة) أو سمة HTML5 data- *.
الإصدار المضافة: 1.2.3 .data (مفتاح)
- مفتاحاكتب: Stringاسم البيانات المخزنة.
الإصدار المضاف: 1.4 .data()
- هذا التوقيع لا يقبل أي حجج.
تسمح لنا طريقة .data()
بإرفاق بيانات من أي نوع بعناصر DOM بطريقة آمنة من المراجع الدائرية وبالتالي من تسرب الذاكرة. يمكننا استرداد عدة قيم مميزة لعنصر واحد واحد في كل مرة ، أو كمجموعة:
alert( $( "body" ).data( "foo" ) ); alert( $( "body" ).data() );
تنبه السطور المذكورة أعلاه قيم البيانات التي تم تعيينها على عنصر النص الأساسي. إذا لم يتم تعيين أي بيانات على هذا العنصر ، undefined
إرجاع غير undefined
.
alert( $( "body" ).data( "foo" ) ); // undefined $( "body" ).data( "bar", "foobar" ); alert( $( "body" ).data( "bar" ) ); // foobar
يغير jQuery 3 سلوك هذه الطريقة لمحاذاة مواصفات API لواجهة Dataset . على وجه التحديد ، يقوم jQuery 3 بتحويل كل تسلسل من حرفين من "-" (U + 002D) متبوعًا بحرف ASCII صغير حسب النسخة الكبيرة من الحرف وفقًا لتعريف خوارزمية واجهة برمجة تطبيقات Dataset . كتابة عبارة مثل $( "body" ).data( { "my-name": "aValue" } ).data();
سيعود { myName: "aValue" }
.
HTML5 data- * السمات
بدءًا من jQuery 1.4.3 ، سيتم سحب سمات بيانات HTML 5 تلقائيًا إلى كائن بيانات jQuery. تم تغيير معاملة السمات ذات الشرطات المدمجة في jQuery 1.6 لتتوافق مع مواصفات W3C HTML5 .
على سبيل المثال ، في ضوء HTML التالي:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
سيعمل كل رمز jQuery التالي.
$( "div" ).data( "role" ) === "page"; $( "div" ).data( "lastValue" ) === 43; $( "div" ).data( "hidden" ) === true; $( "div" ).data( "options" ).name === "John";
يشير العبارة الثانية من التعليمة البرمجية أعلاه بشكل صحيح إلى سمة data-last-value
للعنصر. في حالة عدم تخزين أي بيانات باستخدام المفتاح الذي تم تمريره ، يبحث jQuery بين سمات العنصر ، وتحويل سلسلة من الجمل إلى سلسلة متقطعة ثم بيانات prepending إلى النتيجة. لذلك ، يتم تحويل lastValue
string إلى data-last-value
.
يتم إجراء كل محاولة لتحويل السلسلة إلى قيمة JavaScript (يتضمن ذلك booleans ، والأرقام ، والكائنات ، والصفائف ، والقيمة الخالية). يتم تحويل القيمة فقط إلى رقم إذا كان ذلك لا يؤدي إلى تغيير تمثيل القيمة. على سبيل المثال ، تعادل "1E02" و "100.000" كأرقام (قيمة رقمية 100) ولكن تحويلها سيغير تمثيلها بحيث يتم تركها كسلسلة. يتم تحويل قيمة السلسلة "100" إلى الرقم 100.
عندما تكون سمة البيانات عبارة عن كائن (يبدأ بـ '' ') أو صفيف (يبدأ بـ' [') ، jQuery.parseJSON
استخدام jQuery.parseJSON
لتحليل السلسلة ؛ يجب أن يتبع بناء جملة JSON صالحًا بما في ذلك أسماء الخصائص المقتبسة . إذا لم تكن القيمة قابلة للتجويد كقيمة جافا سكريبت ، فسيتم تركها كسلسلة.
لاسترداد سمة القيمة كسلسلة بدون أي محاولة لتحويلها ، استخدم أسلوب attr()
.
يتم سحب سمات البيانات في المرة الأولى التي يتم فيها الوصول إلى خاصية البيانات ثم لا يتم الوصول إليها أو تحورها (يتم تخزين جميع قيم البيانات داخليا في jQuery).
.data()
استدعاء .data()
مع أية معلمات كافة القيم ككائن JavaScript. يمكن تخزين هذا الكائن بأمان مؤقتًا في متغير طالما لم يتم تعيين كائن جديد بـ .data(obj)
. يعد استخدام الكائن مباشرة للحصول على القيم أو تعيينها أسرع من إجراء مكالمات فردية إلى .data()
للحصول على كل قيمة أو تعيينها:
var mydata = $( "#mydiv" ).data(); if ( mydata.count < 9 ) { mydata.count = 43; mydata.status = "embiggened"; }
ملاحظات إضافية:
- لاحظ أن هذه الطريقة لا توفر حاليًا دعمًا عبر النظام الأساسي لإعداد البيانات على مستندات XML ، نظرًا لأن Internet Explorer لا يسمح بإرفاق البيانات عبر خصائص expando.
مثال:
الحصول على البيانات المسماة "بلاه" المخزنة في عنصر.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>data demo</title> <style> div { margin: 5px; background: yellow; } button { margin: 5px; font-size: 14px; } p { margin: 5px; color: blue; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div>A div</div> <button>Get "blah" from the div</button> <button>Set "blah" to "hello"</button> <button>Set "blah" to 86</button> <button>Remove "blah" from the div</button> <p>The "blah" value of this div is <span>?</span></p> <script> $( "button" ).click(function() { var value; switch ( $( "button" ).index( this ) ) { case 0 : value = $( "div" ).data( "blah" ); break; case 1 : $( "div" ).data( "blah", "hello" ); value = "Stored!"; break; case 2 : $( "div" ).data( "blah", 86 ); value = "Stored!"; break; case 3 : $( "div" ).removeData( "blah" ); value = "Removed!"; break; } $( "span" ).text( "" + value ); }); </script> </body> </html>