data Method

data Method: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 20 of 100

data Method

Setup & DOM → Events Effects AJAX → Perf & Integrate → Ship & Projects

Setup & DOM · 1 — Select · ~6 min · DOM Updates

What is this?

data(key) reads values from data-* attributes (with camelCase keys) and from jQuery’s data cache. data(key, value) writes to the cache (and may not update the attribute string).

Why should you care?

QueryVerse rows often carry ids and statuses in data-* for delegated handlers — data() is how you read them cleanly.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="emps" class="box">
    <li data-emp-id="E101" data-status="active">Anita — HR</li>
    <li data-emp-id="E204" data-status="leave">Ravi — Finance</li>
  </ul>
  <p id="out" class="muted">Click a row</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#emps').on('click', 'li', function () {
    var $li = $(this);
    var id = $li.data('empId');
    var status = $li.data('status');
    $li.data('lastClick', Date.now());
    $('#out').text('id=' + id + ' status=' + status + ' cachedClick=' + $li.data('lastClick'));
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="emps" class="box">
    <li data-emp-id="E101" data-status="active">Anita — HR</li>
    <li data-emp-id="E204" data-status="leave">Ravi — Finance</li>
  </ul>
  <p id="out" class="muted">Click a row</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#emps').on('click', 'li', function () {
    var $li = $(this);
    var id = $li.data('empId');
    var status = $li.data('status');
    $li.data('lastClick', Date.now());
    $('#out').text('id=' + id + ' status=' + status + ' cachedClick=' + $li.data('lastClick'));
  });
});
</script>
</body>
</html>

Result

What happened?

HTML data-emp-id becomes data("empId").
Values are coerced (numbers/JSON) when possible.
For the raw attribute string, use attr("data-emp-id").
Remember data() cache can diverge from the attribute after writes.

Practice next

Click each row and read ids.
Write another data key and read it back.
Compare .data("empId") with .attr("data-emp-id").
Clear with .removeData("lastClick").
Drive a delete button via data-emp-id on the row.

Remember

data-* maps to camelCase keys. data() has an in-memory cache. attr for raw strings when needed.

HR row actions

An Infosys internal QueryVerse directory lists employees with data-emp-id for quick profile fetch.

Outcome: Delegated clicks read ids via data() without parsing markup by hand.

Interview prep for this lesson

Practice these questions aloud after reading—each links to a full structured answer.

Junior Detailed

Explain JavaScript in the context of jQuery.

Short answer: JavaScript runs single-threaded with an event loop. Closures capture lexical scope; promises/async handle I/O without blocking the UI thread. Real-world example (ShopNest) On the ShopNest storefront UI, thi…

Mid Detailed

What are common mistakes teams make with Components when using jQuery?

Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. Explain a bit more How to structure your answer (60–90 seconds) Define Component…

Senior Detailed

How would you debug a production issue related to State in a jQuery application?

Junior Detailed

Describe a real-world scenario where Performance mattered in a jQuery project.

All course Q&A Practice exams

Questions on this lesson 0

No questions yet — be the first to ask!