jQuery Tutorial
Master jQuery with our comprehensive tutorial - learn through practical examples and interactive demos to simplify your JavaScript development.
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
- Simplifies complex JavaScript tasks with concise syntax
- Cross-browser compatibility built-in
- Rich ecosystem of plugins and extensions
- Excellent for DOM manipulation and event handling
- Still widely used in legacy systems and modern web apps
With jQuery, you can write less code to achieve more functionality. A task that might take 20 lines of vanilla JavaScript can often be accomplished in just 1-2 lines of jQuery.
Core jQuery Features
DOM Selection
Powerful selectors to find and manipulate HTML elements
$('#elementId') // Select by ID $('.className') // Select by class $('div p') // Select all paragraphs in divs
Event Handling
Simplified event binding and delegation
$('#btn').click(function() { // Handle click event }); $('form').submit(function(e) { e.preventDefault(); // Handle form submit });
Animations
Built-in animation methods for UI effects
$('.box').fadeIn(500); $('.panel').slideDown(); $('.element').animate({ left: '250px', opacity: '0.5' }, 1000);
Getting Started with jQuery
To use jQuery in your project, you can include it from a CDN (Content Delivery Network). This is the easiest way to get started:
<!-- Include jQuery from CDN --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- Your custom JavaScript --> <script> // jQuery code goes here $(document).ready(function() { // Code runs when document is ready $('button').click(function() { alert('Button clicked!'); }); }); </script>
Interactive jQuery Examples
Element Show/Hide
Toggle visibility of elements with jQuery's show(), hide(), and toggle() methods.
Demo Element
This element can be shown, hidden, or toggled using jQuery methods.
$('#showBtn').click(function() { $('#demoElement').show(500); }); $('#hideBtn').click(function() { $('#demoElement').hide(500); }); $('#toggleBtn').click(function() { $('#demoElement').toggle(500); });
DOM Manipulation
Modify content and styles of elements dynamically.
DOM Manipulation Demo
This element will be modified by jQuery.
$('#changeText').click(function() { $('#manipulationElement p').text('Text changed with jQuery!'); }); $('#addClass').click(function() { $('#manipulationElement').addClass('highlight'); }); $('#removeClass').click(function() { $('#manipulationElement').removeClass('highlight'); });
Why Use jQuery Today?
With modern JavaScript frameworks like React, Vue, and Angular gaining popularity, some developers wonder if jQuery is still relevant. The answer is yes, for several reasons:
- Legacy Projects: Many existing websites and applications still use jQuery
- Simple DOM Manipulation: For small projects, jQuery can be more efficient
- Browser Compatibility: Handles cross-browser issues automatically
- Learning Curve: Easier for beginners than modern frameworks
- Plugin Ecosystem: Thousands of plugins available for common tasks
While it's true that modern frameworks have their advantages, jQuery remains a valuable tool in a web developer's toolkit, especially for certain types of projects.
Learning Path
Follow our structured learning path to master jQuery step-by-step: