Document Ready Function

$(function() {
    // Code executes when DOM is fully loaded
});
// Equivalent to native JavaScript's DOMContentLoaded event

Selector Operations

Basic Selectors

Hierarchical Selectors

Implicit Iteration (Key Concept)

The process of automatically traversing DOM elements stored in array-like structures is called implicit iteration. This applies identical operations to multiple matching elements.

Filter Selectors

Filter Methods (Important)

Exclusive Logic Pattern

Method Chaining

Style Manipulation

CSS Method (For Limited Styling)

Class Manipulation (For Extensive Styling)

Note: Native JavaScript's className property overwrites existing classes, while jQuery methods preserve original classes.

Effects

Common methods:

Syntax: show(duration, easing, callback) // All parameter optional

Parameters explained:

Fade out effects: fadeTo(duration, opacity, easing, callback)

Hover events: hover([enterFunction,] leaveFunction)

Animation Queue: When animations trigger multiple times, they queue up. Use: stop() // Halts current animation, allowing the latest trigger to execute

Custom animations: animate(properties, duration, easing, callback)

Attribute Manipulation

Native Attribute Operations

Native attributes like href in <a> tags, type in <input> elements:

prop("attribute") // Retrieve attribute value

prop("attribute", "value") // Set attribute value

Custom Attributes

Custom attributes like: data-index="1"

attr("attribute") // Get attribute, similar to getAttribute

attr("attribute", "value") // Set attribute, similar to setAttribute

Content Properties

HTML Content html() equivalent to innerHTML

html() // Retrieve element content

html("content") // Set content

Text Content text() equivalent to innerText

text() // Get text

text("content") // Set text

Form Values val() equivalent to value property

val() // Get value

val("content") // Set value

Element Operations

Traverse, create, append, remove

Traversal

While implicit iteration performs same operations on all elements, traversal allows different operations per element.

Creation

Syntax: $("<li></li>") // Creates a new list item

Appending

element.append("content") // Adds inside element at end, child relationship

element.prepend("content") // Adds in side element at beginning, child relationship

element.after("content") // Adds after element, sibling relationship

element.before("content") // Adds before element, sibling relationship

Removal

Dimension and Position Operations

Dimensions

Positions

offset(), position(), scrollTop()/scrollLeft()

Event Handling

click, mouseover, blur, focus, change, keydown, keyup, resize, scroll

Event Registration

Single registration:

$("div").on("click", function(){ }) // Recommended approach

Multiple registrations:

$("div").on({
    click: function(){ },
    focus: function(){ },
    customEvent: function(){ }
});

Handle different procedures:

$("div").on("mouseover mouseout", function(){
    $(this).toggleClass("active")
});

Handle same procedure:

$("ol").on("click", "li", function() {
    alert("clicked");
})

Event Removal off()

Automatic Event Triggering

Application: Implementing automatic carousel functionality through timer-triggered events.

Method 1: Method 2: trigger() Method 3:

Event Object e (Prevent Default Behavior, Stop Propagation)