www.webdeveloper.com
Results 1 to 5 of 5

Thread: Jquery .data() method

  1. #1
    Join Date
    May 2011
    Posts
    6

    Jquery .data() method

    Hello. I want to ask about the .data() method. As you know data() method allows store arbitrary data associated with Dom elements. But how does it work? Is there any documentation about this feature. And how many browsers support this technology?

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    the new version (1.4+) uses HTML5's data-attribs to store text data.

    the old version used a proprietary property on on the element object that held a key that identified a slot on the jQuery object (don't remember where) that held the actual data the property was something like jquery54353453 and was set to null i think...


    jquery works on all browsers, but the .data feature is not really that impressive; there's certainly other ways to store data on element objects, named javascript properties are the simplest and most compatible. the new versio is a nice way to pull in all the data-attribs in new and old browsers.

  3. #3
    Join Date
    May 2011
    Posts
    6
    Thank you rnd_me but what's about performance?
    If I'll use $.data() very often will I get low site performance?

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    using any dom methods will lower performance compared to jsObject access.

    however, given that many and increasing browsers natively support the data- attribs using the dataset api, it should be fast.

    jQuery should use the native api if available, so it should be fast, and even the attrib-based api is fast as of 1.5...


    aside from that, you can get the fastest performance by using IDs to reference a lookup table of values.

    here's a basic example, not that there is no dom methods being used, not even getElementById... The one dom property (id) is also a native dom0 binding, so it should be pre-populated when the element is created, thus elm.id should be as about as fast as a native jsObject property access. In sum, it's the fastes way to do this type of thing.

    Code:
    <div id='d1' onclick="alert(myData[this.id].name)">d1 name</div>	
    <div id='d2' onclick="alert(myData[this.id].isDirty)">d2 isDirty</div>	
    <div id='bob' onclick="alert(myData[this.id].name)">bob name</div>	
    <div id='sally' onclick="alert(myData[this.id].age)">sally age</div>	
    
    <script>
    	myData={
    		d1: {name: "Cell One", isDirty: false },
    		d2: {name: "Cell Two", isDirty: true },
    		bob: {name: "Robert McNamara", age: 25 },
    		sally: {name: "Sally Hemmings", age: 42  }
    	};
    </script>

  5. #5
    Join Date
    May 2011
    Posts
    6
    Thank's for the reply!
    Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles