Launch offer
Business website $150 USD Custom plugin $200 USD Ready in 5 days
Get a quote
malekimtiyajmca@gmail.com
jQuery

jQuery Complete Tutorial (101 Topics with AJAX, WordPress & Final Project)

Complete jQuery tutorial covering selectors, events, effects, DOM, forms, AJAX, WordPress, plugins, jQuery UI, and a final AJAX-based web application.

August 21, 2026 By malekimtiyajmca@gmail.com 17 min read

This complete jQuery tutorial covers 101 topics — from selectors and events to DOM, AJAX, WordPress, plugins, jQuery UI, and a final AJAX-based web application.

Course roadmap

1. Introduction to jQuery

jQuery is a fast, small JavaScript library that simplifies DOM selection, events, effects, and AJAX. This series covers CDN/local setup, selectors, events, effects, DOM/traversing, forms, AJAX/REST, WordPress usage, plugins/UI, and a complete AJAX-based final project.

  1. Include jQuery and write a ready handler.
  2. Practice selectors, events, and AJAX.
  3. Build the final AJAX application.

Learning path

Setup + syntax + ready()
Selectors + events + effects
DOM + traversing + forms
AJAX + JSON + PHP/WP
Plugins + UI + performance
Final AJAX web application

2. What is jQuery?

jQuery wraps common browser APIs behind a concise, chainable API.

jQuery at a glance

Write less, do more
DOM selection & traversal
Events & effects
AJAX helpers
Huge plugin ecosystem

3. Features of jQuery

Modern browsers reduced the need for jQuery, but it remains widely used in existing sites and WordPress admin.

Feature highlights

CSS3-style selectors
Chaining
Event normalization
Animations
$.ajax family
Plugins

4. jQuery vs JavaScript

jQuery is JavaScript — learn when vanilla querySelector/fetch is enough.

Compare tip

jQuery → concise DOM/AJAX helpers
Vanilla JS → native, no dependency
Use jQuery when already in stack (e.g. WP)
Prefer vanilla for new greenfield SPAs

5. Installing jQuery

Load jQuery before your scripts that call $().

Install options

CDN script tag
Local js/jquery.min.js
npm install jquery (bundlers)
WordPress: wp_enqueue_script('jquery')

6. Using jQuery CDN

Pin a version; consider SRI integrity attributes for security.

CDN example

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-..." crossorigin="anonymous"></script>

7. Downloading jQuery Locally

Keep the file versioned with your project; update intentionally.

Local script

<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/app.js"></script>

8. First jQuery Program

Confirm the console has no $ is not defined errors.

  1. Include jQuery.
  2. Wait for ready.
  3. Select and update an element.

Hello jQuery

<p id="msg">Hello</p>
<script src="jquery.min.js"></script>
<script>
$(function () {
  $('#msg').text('Hello jQuery');
});
</script>

9. jQuery Syntax

$ is an alias for jQuery; use jQuery() if $ conflicts with other libraries.

Syntax

$('p').addClass('note').fadeIn();
// noConflict example:
jQuery(function ($) {
  $('body').addClass('ready');
});

10. Document Ready Function in jQuery

Prefer DOM ready over window load unless you need images fully loaded.

Ready

$(document).ready(function () {
  // DOM ready
});

// Shorthand:
$(function () {
  // DOM ready
});

11. jQuery Selectors

Cache selections you reuse; avoid overly broad queries in hot paths.

Selector idea

$('div')
$('#app')
$('.item')
$('input[type="email"]')

12. Element Selectors in jQuery

Combine with context or find() for scoped queries.

Element selector

$('p').css('line-height', '1.6');
$('ul li').addClass('list-item');

13. ID Selectors in jQuery

IDs should be unique in the document — prefer classes for repeated UI.

ID selector

$('#submitBtn').prop('disabled', true);

14. Class Selectors in jQuery

Chain filters when you need a subset of a class.

Class selector

$('.card').addClass('is-visible');
$('.card.active').removeClass('active');

15. Attribute Selectors in jQuery

Useful for data-* hooks and input types.

Attribute selectors

$('a[target="_blank"]')
$('input[name^="user_"]')
$('[data-role="tab"]')

16. Multiple Selectors in jQuery

Keep lists readable; extract named selections when complex.

Multiple selectors

$('h1, h2, .title').addClass('heading');

17. jQuery Events

Prefer .on() for consistency and easier delegation.

Events idea

$('#btn').on('click', handler);
$('form').on('submit', onSubmit);

18. Click Event in jQuery

Prevent default when needed for SPA-like behavior.

Click

$('#save').on('click', function (e) {
  e.preventDefault();
  $(this).text('Saved');
});

19. Double Click Event in jQuery

Avoid conflicting single-click handlers on the same control when possible.

dblclick

$('.item').on('dblclick', function () {
  $(this).toggleClass('selected');
});

20. Mouse Events in jQuery

mouseenter/leave do not bubble like mouseover/out — often clearer for UI.

Mouse events

$('.card').on('mouseenter', function () {
  $(this).addClass('hover');
}).on('mouseleave', function () {
  $(this).removeClass('hover');
});

21. Keyboard Events in jQuery

Prefer keydown/keyup; check event.key for modern code.

Keyboard

$('#search').on('keyup', function (e) {
  if (e.key === 'Enter') {
    runSearch($(this).val());
  }
});

22. Form Events in jQuery

Validate on submit; optionally give live feedback on input/change.

Form events tip

submit → validate & AJAX
change → selects/checkboxes
input → live typing
focus/blur → field UX

23. Change Event in jQuery

For per-keystroke updates, use input instead of change.

change

$('#country').on('change', function () {
  loadCities($(this).val());
});

24. Submit Event in jQuery

Always preventDefault when handling submit yourself.

submit

$('#contact').on('submit', function (e) {
  e.preventDefault();
  // validate + $.post...
});

25. Focus and Blur Events in jQuery

focusin/focusout bubble; focus/blur do not.

focus blur

$('input').on('focus', function () {
  $(this).addClass('is-focused');
}).on('blur', function () {
  $(this).removeClass('is-focused');
});

26. Event Handling in jQuery

Namespaces help remove only your handlers: click.myPlugin.

on/off

$('#list').on('click.myApp', '.item', handler);
$('#list').off('click.myApp');

27. Event Object in jQuery

event.target vs this (delegated handlers) is a common interview point.

Event object

$('#menu').on('click', 'a', function (e) {
  e.preventDefault();
  console.log(e.target, this);
});

28. Event Delegation in jQuery

Essential for lists rendered after AJAX loads.

Delegation

$('#todo-list').on('click', '.delete', function () {
  $(this).closest('li').remove();
});

29. jQuery Effects

Prefer CSS transitions for complex UI motion in modern apps.

Effects overview

hide/show/toggle
fadeIn/fadeOut/fadeToggle
slideDown/slideUp/slideToggle
animate(custom)

30. Hide and Show in jQuery

toggle() switches based on current visibility.

hide show

$('#panel').hide();
$('#panel').show(300);
$('#panel').toggle();

31. Fade Effects in jQuery

fadeTo(speed, opacity) is useful for soft disabled states.

Fade

$('#alert').fadeIn(200);
$('#alert').fadeOut(400);
$('#dim').fadeTo(300, 0.4);

32. Slide Effects in jQuery

Common for accordions and mobile menus (CSS often preferred today).

Slide

$('#menu').slideToggle(250);

33. Toggle Effects in jQuery

Pass boolean to force show/hide state when needed.

Toggle

$('#box').toggle(true);  // show
$('#box').fadeToggle();
$('#box').slideToggle();

34. Custom Animations in jQuery

Cannot animate colors without plugins; use CSS or a color plugin.

animate

$('#box').animate({ width: '300px', opacity: 0.8 }, 400);

35. jQuery DOM Manipulation

Batch DOM changes when updating many nodes for better performance.

DOM toolkit

text/html/val
attr/prop
addClass/removeClass/toggleClass
append/prepend/before/after
remove/empty/clone

36. Get and Set Text in jQuery

Prefer .text() over .html() when inserting untrusted strings.

text()

var t = $('#title').text();
$('#title').text('New title');

37. Get and Set HTML in jQuery

Never inject unsanitized user HTML — XSS risk.

html()

$('#content').html('<strong>Hello</strong>');

38. Get and Set Attributes in jQuery

checkbox checked → .prop("checked"); href → .attr("href").

attr / prop

$('a').attr('href', '/home');
$('#agree').prop('checked', true);

39. Add and Remove Classes in jQuery

Drive UI state with classes rather than inline styles when possible.

Classes

$('#btn').addClass('primary');
$('#btn').toggleClass('is-open');
if ($('#btn').hasClass('primary')) { /* ... */ }

40. CSS Manipulation in jQuery

Pass an object to set multiple properties at once.

css()

$('#box').css('color', '#0f766e');
$('#box').css({ padding: '12px', borderRadius: '8px' });

41. Add and Remove Elements in jQuery

$(htmlString) creates nodes; append them to a parent.

Create & remove

var $li = $('<li/>', { text: 'New item', class: 'item' });
$('#list').append($li);
$li.remove();

42. Append and Prepend in jQuery

appendTo/prependTo reverse the caller/target relationship.

append prepend

$('#list').append('<li>End</li>');
$('#list').prepend('<li>Start</li>');
$('<li>End</li>').appendTo('#list');

43. Before and After in jQuery

Useful for inserting notices next to fields.

before after

$('#email').after('<p class="hint">We never spam</p>');
$('#email').before('<label>Email</label>');

44. Clone Elements in jQuery

Update IDs after cloning to keep documents valid.

clone

var $copy = $('#row').clone(true);
$('#rows').append($copy);

45. Remove and Empty Elements in jQuery

detach() removes but keeps data/events for reinsertion.

remove empty detach

$('#note').remove();
$('#list').empty();
var $tmp = $('#widget').detach();

46. jQuery Traversing

Chain traversing methods; end() returns to the previous selection.

Traverse tip

parent/parents/closest
children/find
siblings/next/prev
first/last/eq
filter/not

47. Parent and Parents in jQuery

closest() is ideal for finding a component root from a child click.

Upward

$(this).parent();
$(this).parents('.card');
$(this).closest('form');

48. Children in jQuery

children(selector) filters direct children only.

children

$('#menu').children('li');
$('#menu').find('a'); // all descendant links

49. Siblings in jQuery

Useful for tab/accordion exclusive active states.

siblings

$(this).siblings().removeClass('active');
$(this).addClass('active');

50. Next and Previous in jQuery

nextUntil/prevUntil stop before a matching selector.

next prev

$('.step').next();
$('.step').prev('.done');

51. First and Last Elements in jQuery

eq() is zero-based like arrays.

first last eq

$('li').first();
$('li').last();
$('li').eq(2);

52. Filter and Not in jQuery

filter can take a selector or a function.

filter not

$('li').filter('.active');
$('li').not('.disabled');
$('li').filter(function () {
  return $(this).data('score') > 5;
});

53. Find Elements in jQuery

Scoped find is faster and clearer than global $() for widgets.

find

var $form = $('#checkout');
$form.find('input[required]');

54. Each Loop in jQuery

return false breaks .each early (like break).

each

$('li').each(function (i, el) {
  console.log(i, $(el).text());
});

$.each([1, 2, 3], function (i, n) {
  console.log(n);
});

55. jQuery Arrays

Modern JS array methods often replace these helpers.

Array helpers

var doubled = $.map([1, 2, 3], function (n) { return n * 2; });
var evens = $.grep([1, 2, 3, 4], function (n) { return n % 2 === 0; });

56. jQuery Objects

length, [0] for raw DOM node, .get() / .toArray() for arrays.

jQuery object tip

var $items = $('.item');
$items.length;
$items[0];           // DOM element
$items.toArray();    // array of DOM nodes

57. Form Handling in jQuery

.serialize() and .serializeArray() help AJAX posts.

serialize

var query = $('#contact').serialize();
var fields = $('#contact').serializeArray();

58. Form Value Handling in jQuery

Works for text, select, and checkbox value attributes (use prop for checked).

val()

var email = $('#email').val();
$('#email').val('user@example.com');
$('#role').val('editor');

59. Form Validation in jQuery

Libraries exist, but learn manual checks first; always validate on the server.

Validation sketch

$('#contact').on('submit', function (e) {
  var email = $('#email').val().trim();
  if (!email) {
    e.preventDefault();
    $('#email').addClass('error');
  }
});

60. Checkbox Handling in jQuery

Use .prop("checked") not .attr("checked") for current state.

Checkbox

$('#terms').prop('checked', true);
var skills = $('input[name="skills"]:checked').map(function () {
  return $(this).val();
}).get();

61. Radio Button Handling in jQuery

Change handlers update dependent UI when the choice changes.

Radio

var plan = $('input[name="plan"]:checked').val();
$('input[name="plan"]').on('change', function () {
  console.log($(this).val());
});

62. Select Dropdown Handling in jQuery

For multi-select, .val() returns an array.

Select

$('#city').val('nyc');
$('#city').on('change', function () {
  loadZones($(this).val());
});

63. File Input Handling in jQuery

File uploads usually need FormData + processData/contentType false in $.ajax.

File input tip

var file = $('#avatar')[0].files[0];
var data = new FormData();
data.append('avatar', file);

64. AJAX Introduction

jQuery historically popularized easy AJAX; fetch() is the modern native alternative.

AJAX idea

Client sends request
Server responds (HTML/JSON)
JS updates the page
Loading & error states matter

65. jQuery AJAX

Prefer explicit error handling and timeouts for production.

AJAX family

$.ajax (full control)
$.get / $.post
$.getJSON
.load(url) for HTML fragments

66. $.ajax() in jQuery

Central place for auth headers and global ajaxSetup (use carefully).

$.ajax

$.ajax({
  url: '/api/items',
  method: 'GET',
  dataType: 'json'
}).done(function (data) {
  console.log(data);
}).fail(function (xhr) {
  console.error(xhr.status);
});

67. $.get() in jQuery

Pass query data as an object; jQuery serializes it.

$.get

$.get('/api/search', { q: 'odoo' }, function (data) {
  renderResults(data);
}, 'json');

68. $.post() in jQuery

For JSON APIs, set contentType and JSON.stringify as needed.

$.post

$.post('/api/comments', { body: 'Nice post' }, function (res) {
  console.log(res);
}, 'json');

69. AJAX Success and Error Handling in jQuery

Show user-friendly messages; log status/response for debugging.

done fail always

$.ajax('/api/items')
  .done(render)
  .fail(function () { $('#err').text('Could not load'); })
  .always(function () { $('#spinner').hide(); });

70. AJAX Form Submission in jQuery

Disable the submit button while the request is in flight.

AJAX submit

$('#contact').on('submit', function (e) {
  e.preventDefault();
  var $form = $(this);
  $.post($form.attr('action'), $form.serialize())
    .done(function () { alert('Sent'); });
});

71. JSON with jQuery

$.getJSON is a shortcut for GET + JSON parsing.

JSON

$.getJSON('/api/user', function (user) {
  $('#name').text(user.name);
});

$.ajax({
  url: '/api/user',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Asha' })
});

72. REST API Integration with jQuery

Map GET/POST/PUT/PATCH/DELETE to your UI actions.

REST tip

$.ajax({ url: '/api/items/5', method: 'DELETE' });
$.ajax({
  url: '/api/items/5',
  method: 'PUT',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Updated' })
});

73. Loading Dynamic Content with jQuery

Re-bind events via delegation after content swaps.

load()

$('#main').load('/fragments/dashboard.html');

74. jQuery and PHP

Set Content-Type application/json; validate/sanitize all input server-side.

PHP JSON tip

header('Content-Type: application/json');
echo json_encode(['ok' => true, 'message' => 'Saved']);

75. jQuery and MySQL

Never expose DB credentials to the browser; use prepared statements server-side.

Architecture

Browser (jQuery AJAX)
  → PHP API
    → MySQL (prepared statements)
  ← JSON response
← Update DOM

76. jQuery with WordPress

WordPress loads jQuery in noConflict mode — wrap with jQuery(function($){…}).

WP tip

jQuery(function ($) {
  $('.site-header').addClass('ready');
});

77. Enqueueing jQuery in WordPress

Never hardcode core jQuery in themes — use the dependency system.

enqueue

wp_enqueue_script(
  'theme-app',
  get_template_directory_uri() . '/assets/js/app.js',
  array('jquery'),
  '1.0.0',
  true
);

78. WordPress AJAX

Use wp_create_nonce and check_ajax_referer for CSRF protection.

admin-ajax tip

action=my_action
wp_ajax_ / wp_ajax_nopriv_
admin-ajax.php URL via admin_url
nonce required

79. Custom WordPress AJAX

Prefer wp_send_json_success / wp_send_json_error helpers.

Custom AJAX sketch

$.post(ajaxurl, {
  action: 'save_note',
  note: $('#note').val(),
  _ajax_nonce: noteNonce
}).done(function (res) {
  if (res.success) { /* ... */ }
});

80. jQuery Plugins

Choose maintained plugins; many old ones are unmaintained.

Plugin idea

$.fn.myPlugin = function () { ... }
Options + defaults
Return this for chaining
Destroy/teardown method

81. Creating Custom jQuery Plugins

Keep one responsibility per plugin; document the public API.

Plugin sketch

(function ($) {
  $.fn.highlight = function (color) {
    return this.css('background-color', color || '#fff3cd');
  };
})(jQuery);

$('.note').highlight();

82. Using Third-Party jQuery Plugins

Check license, bundle size, and accessibility before adopting.

Usage tip

Load jQuery first
Then plugin file
Init in ready()
Read options docs
Test keyboard/a11y

83. jQuery UI

Load jQuery UI CSS + JS; theme roller optional for branding.

jQuery UI tip

Widgets: datepicker, dialog, tabs, accordion
Interactions: draggable, droppable, sortable
Requires jQuery + jquery-ui assets

84. jQuery UI Datepicker

Configure dateFormat, minDate, and localization as needed.

datepicker

$('#startDate').datepicker({ dateFormat: 'yy-mm-dd' });

85. jQuery UI Autocomplete

For remote, return JSON label/value pairs from your API.

autocomplete

$('#city').autocomplete({
  source: ['London', 'Leeds', 'Liverpool']
});

86. jQuery UI Dialog

Manage focus and Esc-to-close for accessibility.

dialog

$('#confirm').dialog({
  modal: true,
  buttons: {
    OK: function () { $(this).dialog('close'); }
  }
});

87. jQuery UI Tabs and Accordion

Ensure headings/buttons remain keyboard accessible.

tabs accordion

$('#tabs').tabs();
$('#faq').accordion({ heightStyle: 'content' });

88. Drag and Drop with jQuery UI

HTML5 DnD or modern libraries may fit new projects better.

draggable droppable

$('.item').draggable({ revert: 'invalid' });
$('#bin').droppable({
  drop: function (e, ui) { ui.draggable.remove(); }
});

89. Sortable Lists with jQuery UI

Persist the order array to your backend.

sortable

$('#tasks').sortable({
  update: function () {
    var order = $(this).sortable('toArray');
    $.post('/api/tasks/order', { order: order });
  }
});

90. jQuery Animation

stop(true, true) clears the queue and jumps to end — know the flags.

Animation control

$('#box').slideDown(300).delay(500).fadeOut();
$('#box').stop(true, true);

91. Custom UI Effects with jQuery

Respect prefers-reduced-motion when adding motion.

UI effect tip

$('#toast').addClass('show').delay(2000).queue(function (next) {
  $(this).removeClass('show');
  next();
});

92. Responsive Interactions with jQuery

Debounce resize handlers; prefer CSS when possible.

Responsive tip

function onViewport() {
  if (window.matchMedia('(max-width: 768px)').matches) {
    $('#nav').addClass('is-mobile');
  } else {
    $('#nav').removeClass('is-mobile');
  }
}
$(onViewport);
$(window).on('resize', onViewport);

93. jQuery Mobile Basics

For new mobile apps prefer responsive CSS, modern frameworks, or PWAs.

jQuery Mobile tip

Legacy touch framework
Page transitions / theming
Prefer modern responsive stacks for new work
Useful when maintaining older apps

94. Browser Compatibility with jQuery

Test critical flows in your real browser support matrix.

Compatibility tip

jQuery 3.x modern browsers
migrate plugin for upgrades
Feature-detect, don't UA-sniff
Test Safari/Firefox/Chrome/Edge

95. Debugging jQuery

If length is 0, your selector or ready timing is wrong.

Debug tip

console.log($('#btn').length);
console.log($('#btn').get(0));
// Breakpoint in DevTools Sources on your handler

96. jQuery Performance Optimization

Avoid $ inside tight loops; build HTML strings carefully or use DocumentFragment patterns.

Perf checklist

Cache $selections
Event delegation
Minimize reflows
Prefer classes over per-property css()
Debounce scroll/resize

97. Avoiding Common jQuery Mistakes

Don't load multiple jQuery copies on one page.

Mistakes list

Using $ before jQuery loads
Binding to elements not yet in DOM
Injecting unsanitized HTML
Multiple jQuery versions
Animating everything with JS

98. jQuery Security Best Practices

Treat all user content as untrusted on the client and server.

Security checklist

Prefer .text() over .html() for user data
Sanitize if HTML required
CSRF tokens on state-changing AJAX
HTTPS everywhere
Don't eval JSON/P responses carelessly

99. jQuery Interview Questions

Be ready for ready(), selectors, delegation, attr vs prop, and AJAX.

Sample Q&A

Q: $(fn) vs window.onload?
A: DOM ready vs full page (incl. images) load.

Q: attr vs prop?
A: attr = HTML attribute; prop = DOM property (e.g. checked).

Q: Why delegation?
A: Handle events for elements added later.

100. Real-World jQuery Projects

Each project should include clear loading/error UI states.

Project ideas

Todo list + localStorage
Live search with debounce
AJAX contact form
Tabs + dynamic panels
Admin table filters

101. Final Project – Complete AJAX-Based Web Application

Ship a production-shaped mini app (e.g., Notes or Task Manager): jQuery UI interactions optional, CRUD via AJAX/JSON API (PHP or mock), form validation, delegated events, loading/error/empty states, basic auth or simple gate optional, and a short README.

  1. Design screens and API endpoints.
  2. Implement list + form with validation.
  3. Wire AJAX CRUD and UI states.
  4. Polish, document, and test in major browsers.

Final project scope

1. HTML structure + jQuery include
2. List UI with delegated actions
3. Create/edit form validation
4. AJAX CRUD (GET/POST/PUT/DELETE)
5. JSON API (PHP or static mock)
6. Loading, error, empty states
7. Optional: datepicker / sortable
8. Security: text() + CSRF/nonce if WP/PHP
9. Responsive layout
10. README with run steps

Suggested files

index.html
css/app.css
js/app.js
api/ (PHP endpoints or mock)
README.md

Conclusion

You now have a full jQuery path: selection, events, DOM, forms, AJAX, WordPress integration, and UI plugins. Finish the final AJAX web application to turn the lessons into a portfolio-ready project.

Keep reading

Related guides

More setup guides and walkthroughs worth reading next.

Leave a reply

Your email address will not be published. Required fields are marked *