Introduction to jQuery
jQuery is a fast, lightweight, and feature-rich JavaScript library.
It simplifies HTML document traversal, event handling, and animation.
Compatible with multiple browsers.
Uses the $(selector).action() syntax.
1. Selectors & Mouse Events
Selectors
jQuery selectors allow you to select and manipulate HTML elements.
Common types of selectors:
Selector Type Syntax Example
Universal $("*") Selects all elements
Element $("p") Selects all <p> elements
ID $("#id") Selects an element with the given ID
Class $(".class") Selects elements with the given class
Attribute $('[name="email"]') Selects elements with the specified attribute
Mouse Events
jQuery provides event handlers for mouse interactions.
Event Description
click() Triggers when an element is clicked
dblclick() Triggers when an element is double-clicked
mouseenter() Triggers when the mouse enters an element
mouseleave() Triggers when the mouse leaves an element
hover() A combination of mouseenter() and mouseleave()
Example:
$("#btn").click(function() {
alert("Button clicked!");
});
2. Form Events
Form events help capture user inputs and actions within forms.
Event Description
focus() Triggers when an element gains focus
blur() Triggers when an element loses focus
change() Triggers when the value of an input changes
submit() Triggers when a form is submitted
keydown() Triggers when a key is pressed
keyup() Triggers when a key is released
Example:
$("#email").focus(function() {
$(this).css("background-color", "yellow");
});
$("#email").blur(function() {
$(this).css("background-color", "white");
});
3. DOM Manipulation
jQuery provides methods to dynamically modify HTML content.
Method Description
html() Sets or gets the HTML content of an element
text() Sets or gets the text content of an element
val() Gets or sets the value of form fields
append() Inserts content at the end of an element
prepend() Inserts content at the beginning of an element
remove() Removes an element from the DOM
Example:
$("#addText").click(function() {
$("#content").append("<p>New paragraph added</p>");
});
4. Effects & Animation
jQuery provides built-in effects and animations.
Effect Description
show() Displays a hidden element
hide() Hides an element
toggle() Toggles between show and hide
Effect Description
fadeIn() Fades in an element
fadeOut() Fades out an element
slideDown() Slides an element down
slideUp() Slides an element up
Example:
$("#toggleBtn").click(function() {
$("#box").fadeToggle();
});
5. Traversing & Filtering
Traversing methods allow navigation through the DOM.
Method Description
parent() Selects the direct parent element
children() Selects direct children of an element
siblings() Selects all siblings of an element
next() Selects the next sibling
prev() Selects the previous sibling
filter() Filters elements based on a condition
Example:
$("#child").parent().css("border", "2px solid red");
Conclusion
jQuery simplifies JavaScript programming.
Provides powerful selectors, event handling, and animations.
Enhances the user experience with smooth interactions.
Compatible with most browsers and easy to integrate into projects.
