jQuery
jQuery is the Lightweight JavaScript Library.
Drawbacks of javascript
● Long selector
● Complex animations
● Lengthy DOM manipulation
● Lengthy Ajax coding
Why use jQuery
● Short selectors
● Variety of animation functions
● Easy DOM manipulation
● Easy CSS styling
● Easy DOM Traversing
● Simple Ajax Code
Short selectors
Task JavaScript jQuery Explanation
Select by [Link]("myId") $("#myId") Selects element with
ID a specific id.
Select by [Link]("myClass" $(".myClass") Selects all elements
Class ) with a given class.
Select by [Link]("p") $("p") Selects all elements
Tag with the given tag
name.
Variety of animation functions
Animation jQuery Function Explanation (jQuery) Equivalent in JavaScript
Type
Show / Hide .show() / .hide() Displays [Link]("box").[Link] =
(display:block) or hides "block";[Link]("box").[Link] =
(display:none) the "none";
element with optional
speed.
Toggle .toggle() Automatically switches let el=[Link]("box"); [Link]
Visibility between .show() and = ([Link]==="none")?"block":"none";
.hide() depending on
current state.
Fade In / Fade .fadeIn(speed) / Gradually changes No built-in function → must write custom JS with
Out .fadeOut(speed) opacity from 0 → 1 setInterval or requestAnimationFrame to adjust
(fade in) or 1 → 0 (fade [Link].
out) over given time.
Fade Toggle / .fadeToggle(speed) / .fadeToggle() alternates Requires manual function to
FadeTo .fadeTo(speed, opacity) between fade increment/decrement opacity until target
in/out..fadeTo() fades value.
element to a specific
opacity level.
Slide Up / Slide .slideUp(speed) / Animates element’s No built-in slide → must set CSS height and
Down .slideDown(speed) height to hide (up) or update gradually using JS or CSS transition.
show (down).
Slide Toggle .slideToggle(speed) Switches between Requires custom function adjusting height
.slideUp() and up/down.
.slideDown()
automatically.
Custom .animate({properties}, Animates multiple Use CSS transitions OR write JS loop that
Animation speed, callback) CSS properties updates [Link], [Link], etc.
(e.g., size, position,
opacity) together
over time.
Stop .stop() Stops current Must call clearInterval() or
Animation animation cancelAnimationFrame() manually in JS.
immediately (useful
to prevent queue
buildup).
Chaining $("box").slideUp().fad Allows multiple Must nest callbacks or use Promises to chain
eIn(); animations in animations in JS.
sequence on the
same element, in
one line.
Easy DOM manipulation
Function Purpose Example Use
.html() Get or set HTML content $("#box").html("<b>Hello</b Replaces content of #box with
>"); bold “Hello”.
.text() Get or set text content $("#box").text("Hello World"); Replaces content of #box with
plain text.
.val() Get or set form values $("#name").val("abc"); Sets input field value to "abc".
.attr() Get or set attribute values $("img").attr("src","[Link]"); Changes the src of all images.
.removeAttr() Remove an attribute $("img").removeAttr("alt"); Removes alt attribute from all
images.
.addClass() Add a CSS class $("#box").addClass("highligh Adds the class .highlight to
t"); #box.
.removeClass() Remove a CSS class $("#box").removeClass("high Removes the class .highlight.
light");
.toggleClass() Add/remove class $("#box").toggleClass("highli Adds class if not present,
dynamically ght"); removes if present.
.css() Get or set CSS $("#box").css("color","red"); Changes text color of #box to
properties red.
.append() Insert content inside $("#list").append("<li>Item</li Adds <li> at end of #list.
element (at end) >");
.prepend() Insert content inside $("#list").prepend("<li>Item</ Adds <li> at beginning of #list.
element (at beginning) li>");
.after() Insert content after $("#box").after("<p>New Adds <p> after #box.
element para</p>");
.before() Insert content before $("#box").before("<p>New Adds <p> before #box.
element para</p>");
.remove() Remove element from $("#box").remove(); Deletes #box element entirely.
DOM
.empty() Remove inner content only $("#box").empty(); Clears all child elements inside
#box.
.clone() Make a copy of element $("#box").clone().appendTo Copies #box and appends to
("body"); body.
Easy CSS Styling Functions in jQuery
Function Purpose Example Use
.css() Get or set single/multiple $("#box").css("color", "red"); Changes text color
CSS properties of #box to red.
$("#box").css({"color":"blue","font-s Applies multiple
ize":"20px"}); styles at once.
.addClass() Add a CSS class to an $("#box").addClass("highlight"); Adds predefined
element class highlight.
.removeClass() Remove a CSS class $("#box").removeClass("highlight") Removes class
; highlight.
.toggleClass() Add/remove class $("#box").toggleClass("highlight"); If class exists →
dynamically remove, else →
add.
.hasClass() Check if an element has a if($("#box").hasClass("highlight")){ Returns true/false
class alert("Yes!"); } depending on class
presence.
.width() / Get or set element $("#box").width(300); Sets width to 300px.
.height() width/height (excluding
padding, border, margin)
.innerWidth() / Includes padding but not $("#box").innerWidth(); Gets inner width.
.innerHeight() border/margin
.outerWidth() / Includes padding + border $("#box").outerWidth(true); Gets full width
.outerHeight() (and optionally margin) including margin.
.offset() Get/set element’s position $("#box").offset().top; Gets top position of
relative to document element.
.position() Get element’s position relative $("#box").position().left; Gets left offset
to its parent inside parent.