← Back to Curriculum

jQuery Introduction and Setup

📚 Lesson 1 of 15 ⏱️ 25 min

jQuery Introduction and Setup

25 min

jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation. Created by John Resig in 2006, jQuery revolutionized JavaScript development by providing a simple, consistent API that worked across all browsers. While modern JavaScript (ES6+) and frameworks have reduced jQuery's necessity, understanding jQuery is still valuable for maintaining legacy code and understanding JavaScript evolution.

It provides an easy-to-use API that works across a multitude of browsers. jQuery abstracts away browser differences, providing a unified API for DOM manipulation, event handling, and AJAX. This was crucial when browser compatibility was a major issue. Modern browsers are more consistent, but jQuery's simplicity still appeals to many developers. Understanding jQuery helps you work with existing codebases and understand JavaScript library patterns.

jQuery can be included via CDN or downloaded locally for offline use. CDN inclusion is convenient and often faster due to caching. Local installation provides offline access and version control. jQuery's syntax uses `$` as an alias for the jQuery function, making code concise. Understanding jQuery setup and syntax is the foundation for using jQuery effectively.

jQuery's core concept is 'write less, do more'—simple syntax for complex operations. jQuery selectors find elements, and methods manipulate them. The chaining pattern allows multiple operations in one statement. Understanding jQuery's philosophy and patterns helps you write efficient jQuery code. While modern JavaScript provides similar capabilities natively, jQuery's API is still simpler for many tasks.

jQuery handles events, animations, and AJAX with simple, consistent APIs. Event handling is simplified with methods like `.on()`, `.click()`, `.hover()`. Animations are easy with `.fadeIn()`, `.slideDown()`, etc. AJAX requests are straightforward with `.ajax()`, `.get()`, `.post()`. Understanding these capabilities helps you build interactive websites efficiently.

Modern development often uses vanilla JavaScript or frameworks instead of jQuery, but jQuery remains useful for quick prototypes, legacy code maintenance, and when you need cross-browser compatibility without modern tooling. Understanding when to use jQuery vs modern alternatives helps you make informed technology choices. jQuery's plugin ecosystem also provides many ready-made solutions.

Key Concepts

  • jQuery is a JavaScript library simplifying DOM manipulation.
  • jQuery uses $ as an alias for the jQuery function.
  • jQuery provides cross-browser compatible APIs.
  • jQuery supports chaining for concise code.
  • jQuery simplifies events, animations, and AJAX.

Learning Objectives

Master

  • Including jQuery in HTML projects
  • Understanding jQuery syntax and selectors
  • Using jQuery for DOM manipulation
  • Understanding jQuery's role in modern development

Develop

  • Understanding JavaScript library patterns
  • Appreciating jQuery's historical significance
  • Knowing when to use jQuery vs modern alternatives

Tips

  • Include jQuery before your custom scripts that use it.
  • Use $(document).ready() to ensure DOM is loaded: $(function() { ... }).
  • Use jQuery's CDN for better caching: https://code.jquery.com/.
  • Consider modern alternatives (vanilla JS, frameworks) for new projects.

Common Pitfalls

  • Not waiting for DOM ready, causing errors when selecting elements.
  • Mixing jQuery and vanilla JavaScript incorrectly.
  • Using outdated jQuery version with security vulnerabilities.
  • Overusing jQuery when simple vanilla JavaScript would suffice.

Summary

  • jQuery simplifies JavaScript DOM manipulation and cross-browser compatibility.
  • jQuery's simple API makes common tasks easier.
  • Modern JavaScript provides similar capabilities natively.
  • Understanding jQuery helps with legacy code and JavaScript evolution.

Exercise

Include jQuery in your HTML and write a simple script to hide a paragraph.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="demo">This paragraph will be hidden</p>
  <button onclick="$('#demo').hide()">Hide Paragraph</button>
</body>
</html>

Exercise Tips

  • Wait for DOM ready: $(document).ready(function() { $('#demo').hide(); });
  • Use modern syntax: $(function() { ... }); (shorthand for ready).
  • Chain methods: $('#demo').hide().fadeIn(1000);
  • Use event handlers: $('#button').click(function() { $('#demo').hide(); });

Code Editor

Output