jQuery 3.3

.data()


jquery
قم بتخزين البيانات الاعتباطية المرتبطة بالعناصر المتطابقة أو قم بإرجاع القيمة في مخزن البيانات المحدد للعنصر الأول في مجموعة العناصر المتطابقة.

محتويات:

.data (مفتاح ، قيمة). إرجاع: jQuery

الوصف: تخزين بيانات عشوائية مرتبطة بالعناصر المتطابقة.

  • الإصدار: 1.2.3 .data (مفتاح ، قيمة)

    • مفتاح
      اكتب: String
      سلسلة تشير إلى جزء من البيانات لتعيينه.
    • القيمة
      النوع: Anything
      قيمة البيانات الجديدة يمكن أن يكون هذا أي نوع Javascript ماعدا undefined .

  • الإصدار المضاف: 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>

عرض: