jQuery Knowledge Summary
Introduction to jQuery
jQuery is a lightweight, fast, small, and feature-rich JavaScript library. It makes it much easier to write
JavaScript code for websites. We don't have to scratch our heads much for animations, DOM manipulation,
or HTML events.
JavaScript vs jQuery
JavaScript is a client-side language (it runs in the browser), whereas jQuery is a library built on top of
JavaScript. It allows us to write less code to achieve more functionality in browsers.
Features of jQuery
1. HTML / DOM Manipulation
2. CSS Manipulation
3. Animation and Effects
4. AJAX Support
5. Utility Functions
6. Event Handling
How to Use jQuery
You can use jQuery either by downloading it from the official website or linking it via CDN (Content Delivery
Network).
Example (CDN):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
Example Code with Explanation
jQuery Knowledge Summary
HTML:
<button id='btn'>Click Me</button>
jQuery:
$(document).ready(function() {
$('#btn').click(function() {
alert('Hello World');
});
});
Explanation:
- $ is a shorthand for jQuery
- $(document).ready() waits for DOM to load
- $('#btn') selects the button
- .click() adds click handler
- alert() shows popup
jQuery Selectors
- $('#id') selects by ID
- $('.class') selects by class
- $('tag') selects by tag name
All selectors start with $ and are wrapped in ().
Common jQuery Functions
1. html() - Get/set HTML: $('#demo').html('<b>Hi</b>');
jQuery Knowledge Summary
2. text() - Get/set text: $('#demo').text('Hello');
3. val() - Get/set input value: $('#input').val();
4. css() - Set CSS: $('p').css('color', 'red');
5. hide() - Hide elements: $('#img').hide();
6. toggle() - Toggle visibility: $('#box').toggle();
7. show() - Show hidden: $('#para').show();