Introduction to jQuery
What is jQuery?
jQuery is a fast, lightweight, and easy-to-use JavaScript library that helps developers create interactive and dynamic websites.
It simplifies common JavaScript tasks like:
✅ Selecting and modifying HTML elements
✅ Handling user interactions (clicks, keypresses, etc.)
✅ Creating animations and effects
✅ Making AJAX requests (fetching data without reloading the page)
What You Should Already Know
Before starting with jQuery, you should have basic knowledge of:
📌 HTML – The structure of a webpage
📌 CSS – How to style a webpage
📌 JavaScript – Basic concepts like variables, functions, and events
If you are new to JavaScript, don’t worry! You can still learn jQuery easily as it simplifies many JavaScript tasks.
Why Use jQuery?
Before jQuery, developers had to write long and complicated JavaScript code. jQuery provides pre-built functions that make coding easier and faster.
✔ Write Less, Do More – Simple and short syntax
✔ Cross-Browser Support – Works on all major web browsers
✔ Easy to Learn – Beginner-friendly and readable
✔ Lots of Plugins – Many pre-made extensions to add features quickly
A Quick JavaScript vs. jQuery Comparison
Let’s compare JavaScript and jQuery with an example:
Example: Hiding a Button on Click
👉 Using JavaScript:
document.getElementById(“myButton”).addEventListener(“click”, function() {
this.style.display = “none”;
});
👉 Using jQuery:
$(“#myButton”).click(function() {
$(this).hide();
});
As you can see, jQuery makes it shorter and easier to read!
A Brief History of jQuery
jQuery was created to solve a big problem: JavaScript was too complex! Developers had to write long and confusing code just to perform simple tasks like animations or handling user clicks.
How It All Started
📌 2006 – The Birth of jQuery
A JavaScript developer named John Resig introduced jQuery at a tech event called BarCamp NYC. His goal was to make JavaScript easier to use by providing a simple and powerful library.
📌 2008 – Rapid Growth
Developers quickly adopted jQuery because it saved time and worked across all browsers. Big companies like Google and Microsoft started using it in their projects.
📌 2010 – jQuery Becomes the #1 JavaScript Library
By 2010, jQuery was everywhere! It became the most popular JavaScript library and was included in platforms like WordPress, Drupal, and Joomla.
📌 2013 – jQuery Mobile & UI
To make web development even easier, new versions like jQuery Mobile (for mobile-friendly websites) and jQuery UI (for advanced animations and widgets) were introduced.
📌 2015–2020 – The Rise of Modern JavaScript Frameworks
New frameworks like React, Angular, and Vue.js started gaining popularity. Many developers moved away from jQuery, but it was still widely used in legacy projects.
📌 Today – jQuery is Still Relevant!
Even though modern frameworks are popular, millions of websites still use jQuery for quick and simple tasks. It remains an important tool for web development.
How to Use jQuery in Your Webpage?
To start using jQuery, you need to add the jQuery library to your HTML file. The easiest way is to use a CDN (Content Delivery Network).
Step 1: Add jQuery to Your HTML File
Copy and paste this script inside the <head> section or before the closing </body> tag:
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
This will load jQuery from an online source.
Step 2: Write Your First jQuery Code
Let’s create a simple webpage where clicking a button shows an alert message.
Explanation:
✔ $(document).ready(function() {…}); – Ensures jQuery runs only after the page is fully loaded.
✔ $(“#myButton”).click(function() {…}); – Runs code when the button is clicked.
✔ alert(“Hello! You clicked the button.”); – Shows a popup message.
Now, when you open this page in a browser and click the button, an alert box will appear!
Conclusion
jQuery is a powerful, simple, and time-saving JavaScript library. It helps developers create interactive websites without writing long and complex code.
What’s Next?
📌 jQuery Selectors – How to find and modify HTML elements.
📌 jQuery Events – How to handle user interactions.
📌 jQuery Effects – How to create animations.
