Understanding JavaScript Libraries

jQuery represents a JavaScript library that encapsulates commonly used functions and methods.

Popular JavaScript libraries include:

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• Zepto for mobile development

Core jQuery Functionality

The jQuery library provides capabilities for:

• Selecting and manipulating HTML elements
• Handling HTML events
• CSS manipulation
• JavaScript effects and animations
• DOM traversal and modification
• AJAX functionality
• Utility functions

jQuery Versions

• Version 1.x: Maintains compatibility with older browsers like IE 6/7/8, no longer actively maintained
• Version 2.x: Drops support for older IE versions, no longer actively maintained
• Version 3.x: Current version without IE 6/7/8 support, actively maintained

Document Ready Functions

To ensure code executes after the DOM is fully loaded:

$(function(){
    // DOM ready callback
});

// Alternative syntax
$(document).ready(function(){
    // DOM ready callback
});

// Using jQuery directly
jQuery(function(){
    // DOM ready callback
});

Basic Syntax Structure

jQuery follows this pattern: $(selector).action()

• $ symbol initializes jQuery
• Selector identifies HTML elements
• Action performs operations on selected elements

Common selectors mirror CSS syntax:

$('.className');
$('#elementId');
$('tagName');
$('div span');
$("ul li:first-child");

Object Conversion

Converting between jQuery and DOM objects:

// DOM to jQuery
$(domElement);

// jQuery to DOM
jqueryObject[index];
jqueryObject.get(index);

Essential jQuery APIs

CSS Manipulation

// Single property
$(selector).css('property', 'value');
$(selector).css('property'); // Get value

// Multiple properties
$(selector).css({
    width: 400,
    height: 400
});

// Class manipulation
element.addClass("className");
element.removeClass("className");
element.toggleClass("className");

Filter Selectors

• :first - First element
• :last - Last element
• :eq(index) - Element at specific index
• :odd - Odd-indexed elements
• :even - Even-indexed elements

Traversal Methods

• parent() - Find parent element
• children(selector) - Find child elements
• find(selector) - Find descendant elements
• siblings(selector) - Find sibling elements
• nextAll([expr]) - Elements after current
• prevAll([expr]) - Elements before current
• hasClass(className) - Check for specific class
• eq(index) - Element at index

Implicit Iteration and Chaining

$("button").css("color", "red").siblings().css("color", "blue");

Visual Effects

Show/Hide Effects

element.show([speed,[easing], [fn]]);
element.hide([speed,[easing], [fn]]);
element.toggle([speed,[easing], [fn]]);

Sliding Animations

element.slideDown([speed,[easing], [fn]]);
element.slideUp([speed,[easing], [fn]]);
element.slideToggle([speed,[easing], [fn]]);

Hover Events

element.hover([over,] out);

Fade Transitions

element.fadeIn([speed,[easing], [fn]]);
element.fadeOut([speed,[easing], [fn]]);
element.fadeToggle([speed,[easing], [fn]]);
element.fadeTo([speed, opacity, [easing], [fn]]);

Custom Animations

element.animate(params, [speed, [easing], [fn]]);

Element Attribute Management

Built-in Attributes

element.prop("attribute");          // Get
element.prop("attribute", "value"); // Set

Custom Atributes

element.attr("attribute");          // Get
element.attr("attribute", "value"); // Set

Data Storage

element.data("name");          // Retrieve
element.data("name", "value"); // Store

Content Manipulation

element.html();  // Inner HTML equivalent
element.text();  // Inner text equivalent
element.val();   // Form value equivalent

Element Operations

Element Traversal

element.each(function(index, domElement){
    // Process each element
});

$.each(object, function(index, value){
    // Process any object
});

Element Creation

let newElement = $("<tag>content</tag>");

Adding Elements

• append(element) - Add inside at end
• prepend(element) - Add in side at begining
• before(element) - Add outside before
• after(element) - Add outside after

Removing Elements

• remove() - Delete element entirely
• empty() - Clear all child elements
• html("") - Empty element content

Dimension and Position Methods

Sizing

• width()/height() - Basic dimensions
• innerWidth()/innerHeight() - Includes padding
• outerWidth()/outerHeight() - Includes padding and border
• outerWidth(true)/outerHeight(true) - Includes margin

Positioning

• offset() - Document-relative position
• position() - Parent-relative position
• scrollTop()/scrollLeft() - Scroll position values

Event Handling

Event Registration

element.eventType(function(){});

Advanced Event Binding

element.on(events, [selector], handler);

// Multiple events
$(selector).on({
    mouseover: function(){},
    click: function(){}
});

// Event delegation
$("ul").on("click", "li", function(){
    // Handle click on li elements
});

Event Unbinding

element.off();              // Remove all events
element.off("eventType");   // Remove specific event
element.off("click", "li"); // Remove delegated event

One-time Events

element.one("eventType", handler);

Manual Event Triggering

element.click();                 // Shorthand
element.trigger("eventType");    // With default behavior
element.triggerHandler("eventType"); // Without default behavior

Event Objects

element.on("eventType", function(event){
    event.preventDefault();   // Prevent default action
    event.stopPropagation();  // Stop event bubbling
});

Additional jQuery Features

Object Cloning

$.extend([deep], target, object1, [objectN]);

// Examples
$.extend(target, source);        // Shallow copy
$.extend(true, target, source);  // Deep copy

Library Coexistence

// Method 1: Use jQuery instead of $
jQuery(selector);

// Method 2: Rename jQuery
var customName = $.noConflict();

Popular Plugins

Plugin repositories:

• http://www.jq22.com/
• http://www.htmleaf.com/

Common use cases include lazy image loading and full-page scrolling implementations.