jQuery Best Practices

Learning objectives#

• Write fast selections and DOM updates
• Organise code into modules without globals
• Handle events and AJAX robustly
• Decide between jQuery and native APIs

Explanation#

Cache and scope: const $list = $("#list"); then $list.find(".item") — fewer DOM searches, clearer code.

Batch DOM work: build elements (or an array of them) and append once, instead of appending inside a loop.

Delegate events from stable containers, and namespace them (click.cart) so you can remove only your own.

Avoid globals: wrap page code in a module (an IIFE or ES module) and expose one small object if needed.

Security: .text() for user data, anti-forgery tokens on POST, never eval server responses.

Know the native equivalents (querySelectorAll, classList, fetch, addEventListener). In new code, a few lines of plain JavaScript usually beat adding a 30 KB library.

Code example: Before and after: the same feature, done well#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<div id="app" style="font-family:sans-serif"><button class="load">Load products</button><ul class="list"></ul></div>
3<script>
4  // ✓ One module, no globals, cached and scoped selections, batched DOM updates
5  const ProductList = (function ($) {
6    const products = [{ name: 'Pen', price: 20 }, { name: 'Notebook', price: 60 }, { name: '<script>alert(1)<\/script>', price: 1 }];
7

8    function render($root) {
9      const $items = products.map(p => $('<li>').text(p.name + ' — ₹' + p.price));   // .text() = safe
10      $root.find('.list').empty().append($items);                                      // one DOM update
11    }
12

13    function init(selector) {
14      const $root = $(selector);                                                       // cached
15      $root.off('.products').on('click.products', '.load', () => {                    // namespaced + delegated
16        render($root);
17        console.log('Rendered', $root.find('.list li').length, 'items');
18      });
19    }
20

21    return { init };
22  })(jQuery);
23

24  $(function () { ProductList.init('#app'); });
25</script>

Clicking “Load products” renders three items in one DOM update and logs “Rendered 3 items”. The third product’s name containing a script tag is shown as plain text, not executed. No global variables except ProductList are created.

Step-by-step explanation#

1. The IIFE keeps products and helpers private; only ProductList.init is public.
2. $root is selected once and all other lookups are scoped to it.
3. All list items are built in an array and appended in a single call.
4. The click handler is namespaced (.products) and delegated, so init can be called again safely.
5. .text() neutralises the malicious product name.

Real-world use case#

Common mistakes#

Best practices#

• Cache and scope selections
• Append once per batch
• Delegate and namespace events
• Modules instead of globals; .text() for user data

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<ul id="list"></ul>
3<script>
4  $(function () {
5    const items = [];
6    for (let i = 0; i < 100; i++) items.push($('<li>').text(i));
7    $('#list').append(items);
8    console.log($('#list li').length);   // 100
9  });
10</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.