data()

תוכן:

data( key, value )
- .data( key, value )
- .data( obj )
data ( value )
- .data( key )
- .data()

.data( key, value )

מחזירה: jQuery

תיאור: מאחסן נתונים חופשיים הקשורים לאלמנט בהתאמה.

.data( key, value )

הוספה בגרסה: 1.2.3

key

מחרוזת

מחרוזת, שקוראת חלק מהנתונים עבור הגדרה.

value

כל דבר

ערך חדש של נתונים.

.data( obj )

הוספה בגרסה: 1.4.3

obj

אובייקט

אובייקט זוגות מפתח-ערך של הנתונים עבור עדכון.

שיטה .data() מאפשרת לנו לצרף נתונים מסוג כלשהוא לאלמנטים DOM ללא הסיכון של תלות מחזורית, כמו גם דליפות בזיכרון.

אנחנו יכולים להגדיר ערכים ברורים עבור אלמנט יחיד ולקבל אותם מאוחר יותר:

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}

ב- jQuery 1.4.3 הגדרת הנתונים של אובייקט האלמנט עם .data(obj) מרחיבה את הנתונים, המאוחסנים בעבר עם האלמנט. jQuery בעצמה משתמשת בשיטה .data() עבור שמירת מידע תחת שמות "אירועים" ו- "מטפלים", וגם שומרת כל השמות הנתונים, המתחילים מסימן קו תחתון ('_') עבור שימוש פנימי.

לפני jQuery 1.4.3 (החל מ- jQuery 1,4) שיטה .data() מחליפה כל הנתונים לחלוטין, ולא רק הרחבות של אובייקט נתונים. אם אתם משתמשים בתוספים צד שלישי זה עשוי להיות לא רצוי, כדי להחליף לחלוטין אובייקט נתונים של האלמנט, מכיוון שתוספים יכולים להכיל גם סט הנתונים.

בשל דרך האינטראקציה של דפדפנים עם תוספים ועם קוד חיצוני, בשיטה .data() לא ניתן להשתמש על אלמנטים <object> (אם זה לא תוסף Flash), ש <applet> או <embed>.

נתוני תכונות HTML 5

החל מ- jQuery 1.4.3 נתוני תכונות HTML 5 יכנסו אוטומטית בתוך אובייקט הנתונים של jQuery.

לדוגמה, HTML הבא:

<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>

כל קוד הבא של jQuery יעבוד.

$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

שימו לב, שמחרוזות נשארות ללא שינוי, בזמן שערכים של JavaScript משתנים לערכים קשורים אליהם ( כולל ערכים בולאנים, מספרים, אובייקטים, מערכים, וריק). תכונות-נתונים מושכות לראשונה נתוני תכונות עם גישה, אחרי זה לא נגישות או עם מוטציה ( כל הנתונים מאוחסנים אחרי זה ב- jQuery).

הערות נוספות:

שימו לב, ששיטה הזו כרגע אינה מספקת תמיכה בפלטפורמות שונות עבור הגדרת נתונים במסמכי XML, כך Internet Explorer אינו מאפשר לנתונים לצרף דרך הרחבת מאפיינים.

דוגמה

מאחסן ואחרי זה מקבל ערך מאלמנט div.

    $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">

  $(document).ready(function(){
    $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

  });
  </script>

  <style>
  div { color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>
    The values stored were 
    <span></span>

    and
    <span></span>
  </div>
</body>
</html>

נסה זאת בעצמך

.data( key )

מחזירה: אובייקט

תיאור: מחזיר נתונים שמאוחסנים באלמנט בשם מסוים שהוגדרו לפני זה באמצעות data(name, value).

.data( key )

הוספה בגרסה: 1.2.3

key

מחרוזת

שם של הנתונים שנשמרו.

.data( )

הוספה בגרסה: 1.4

שיטה .data() מאפשרת לנו לצרף נתונים מסוג כלשהוא לאלמנטים DOM ללא הסיכון של תלות מחזורית, כמו גם דליפות בזיכרון. אנחנו יכולים לקבל מספר ערכים שונים עבור אלמנט אחד בו זמנית, או בצורה של אוסף:

alert($('body').data('foo'));
alert($('body').data());

הודעות אזהרה עם ערכי הנתונים, שהוצגו למעלה, מוגדרים על אלמנט body. אם שום דבר לא הוגדר על אלמנט הזה, יוחזר מחרוזת רייקה:

הפעלת .data() ללא ארגומנטים מחזירה כל הערכים כי אובייקט JavaScript. אובייקט הזה ניתן לשמור בתשתנה עד שאובייקט חדש לא מוגדר עם .data(obj). שימווש באובייקט ישירות עבור קבלת או הגדרת ערך הוא מהיר יותר, מאשר לבצע קריאות נפרדות של .data(), כדי לקבל או להגדיר כל ערך:

var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

הערות נוספות:

שימו לב, ששיטה הזו כרגע אינה מספקת תמיכה בפלטפורמות שונות עבור הגדרת נתונים במסמכי XML, כך Internet Explorer אינו מאפשר לנתונים לצרף דרך הרחבת מאפיינים.

דוגמה

מקבל נתונים מאלמנט בשם «blah».

    $("button").click(function(e) {
      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);
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("button").click(function(e) {
      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>

  <style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
</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>

</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

data()

.data( key, value )

.data( key, value )

.data( obj )

נתוני תכונות HTML 5

הערות נוספות:

דוגמה

.data( key )

.data( key )

.data( )

הערות נוספות:

דוגמה

תגובות