JQuery 1.3 Cheat Sheet

By /

 

Quick reference guide for jQuery 1.3.x methods and selectors

Quick Start

// Document Ready
$(document).ready(function() {
  // Your code here
});

// Shorthand
$(function() {
  // Your code here
});

// Select and manipulate
$("p").css("color", "red");
$("#myDiv").hide();
$(".myClass").fadeIn();

Selectors

Basic

  • $("*") – All elements
  • $("#id") – Element by ID
  • $(".class") – Elements by class
  • $("element") – Elements by tag
  • $("div, p, span") – Multiple selectors

Hierarchy

  • $("div p") – All descendants
  • $("div > p") – Direct children
  • $("h1 + p") – Next adjacent sibling
  • $("h1 ~ p") – All following siblings

Filters

  • $("p:first") – First element
  • $("p:last") – Last element
  • $("tr:even") – Even elements (0, 2, 4…)
  • $("tr:odd") – Odd elements (1, 3, 5…)
  • $("li:eq(2)") – Element at index 2
  • $("li:gt(2)") – Elements after index 2
  • $("li:lt(2)") – Elements before index 2
  • $("p:not(.intro)") – Not matching selector
  • $(":header") – All headers (h1-h6)
  • $(":animated") – Currently animating
  • $("div:hidden") – Hidden elements
  • $("div:visible") – Visible elements

Attributes

  • $("[href]") – Has attribute
  • $("[type='text']") – Attribute equals
  • $("[type!='text']") – Attribute not equals
  • $("[href^='http']") – Starts with
  • $("[href$='.pdf']") – Ends with
  • $("[href*='jquery']") – Contains

Forms

  • $(":input") – All inputs
  • $(":text") – Text inputs
  • $(":password") – Password inputs
  • $(":radio") – Radio buttons
  • $(":checkbox") – Checkboxes
  • $(":submit") – Submit buttons
  • $(":enabled") – Enabled elements
  • $(":disabled") – Disabled elements
  • $(":checked") – Checked checkboxes/radios
  • $(":selected") – Selected options

Attributes & Content

Attributes

  • $("img").attr("src") – Get attribute
  • $("img").attr("src", "new.jpg") – Set attribute
  • $("img").attr({src: "img.jpg", alt: "Photo"}) – Set multiple
  • $("img").removeAttr("title") – Remove attribute

CSS Classes

  • $("p").addClass("selected") – Add class
  • $("p").removeClass("selected") – Remove class
  • $("p").toggleClass("highlight") – Toggle class
  • $("p").hasClass("intro") – Check if has class

HTML/Text/Value

  • $("div").html() – Get HTML content
  • $("div").html("<p>New</p>") – Set HTML
  • $("p").text() – Get text content
  • $("p").text("Hello") – Set text
  • $("input").val() – Get form value
  • $("input").val("New Value") – Set form value

Traversing

Filtering

  • $("li").eq(2) – Element at index
  • $("p").first() – First element
  • $("p").last() – Last element
  • $("p").filter(".intro") – Filter by selector
  • $("p").not(".intro") – Remove matches
  • $("p").is(".intro") – Check if matches
  • $("div").has("p") – Contains selector
  • $("li").slice(2, 5) – Slice range

Finding

  • $("div").find("p") – Find descendants
  • $("div").children() – Direct children
  • $("p").parent() – Immediate parent
  • $("span").parents() – All ancestors
  • $("span").closest("div") – Closest ancestor
  • $("h2").next() – Next sibling
  • $("h2").nextAll() – All following siblings
  • $("h2").prev() – Previous sibling
  • $("h2").prevAll() – All preceding siblings
  • $("h2").siblings() – All siblings

Chaining

  • $("p").add("div") – Add to set
  • $("div").find("p").andSelf() – Add previous set
  • $("div").find("p").end() – Return to previous set

DOM Manipulation

Inserting

  • $("div").append("<p>Text</p>") – Insert at end
  • $("<p>Text</p>").appendTo("div") – Append to target
  • $("div").prepend("<p>Text</p>") – Insert at start
  • $("<p>Text</p>").prependTo("div") – Prepend to target
  • $("p").after("<hr>") – Insert after
  • $("<hr>").insertAfter("p") – Insert after target
  • $("p").before("<hr>") – Insert before
  • $("<hr>").insertBefore("p") – Insert before target

Replacing & Removing

  • $("p").replaceWith("<div>New</div>") – Replace element
  • $("<div>New</div>").replaceAll("p") – Replace target
  • $("p").remove() – Remove from DOM
  • $("div").empty() – Remove children

Wrapping

  • $("p").wrap("<div></div>") – Wrap each
  • $("p").wrapAll("<div></div>") – Wrap all together
  • $("p").wrapInner("<b></b>") – Wrap inner content
  • $("p").unwrap() – Remove parent wrapper

Cloning

  • $("p").clone() – Clone element
  • $("p").clone(true) – Clone with events

CSS

Styling

  • $("p").css("color") – Get CSS property
  • $("p").css("color", "red") – Set CSS property
  • $("p").css({color: "red", fontSize: "14px"}) – Set multiple

Dimensions

  • $("div").height() – Get height
  • $("div").height(100) – Set height
  • $("div").width() – Get width
  • $("div").width(200) – Set width
  • $("div").innerHeight() – Height + padding
  • $("div").innerWidth() – Width + padding
  • $("div").outerHeight() – Height + padding + border
  • $("div").outerWidth() – Width + padding + border

Position

  • $("div").position() – Position relative to parent
  • $("div").offset() – Position relative to document
  • $("div").scrollTop() – Vertical scroll position
  • $("div").scrollTop(100) – Set vertical scroll
  • $("div").scrollLeft() – Horizontal scroll position
  • $("div").scrollLeft(100) – Set horizontal scroll

Events

Event Binding

  • $("p").bind("click", function(){}) – Attach handler
  • $("p").unbind("click") – Remove handler
  • $("p").live("click", function(){}) – For current/future
  • $("p").die("click") – Remove live handler
  • $("p").one("click", function(){}) – Execute once
  • $("p").trigger("click") – Trigger event

Mouse Events

  • $("button").click(function(){}) – Click
  • $("div").dblclick(function(){}) – Double click
  • $("div").mousedown(function(){}) – Mouse button pressed
  • $("div").mouseup(function(){}) – Mouse button released
  • $("div").mousemove(function(){}) – Mouse moved
  • $("div").mouseover(function(){}) – Mouse enters (bubbles)
  • $("div").mouseout(function(){}) – Mouse leaves (bubbles)
  • $("div").mouseenter(function(){}) – Mouse enters (no bubble)
  • $("div").mouseleave(function(){}) – Mouse leaves (no bubble)
  • $("div").hover(fnIn, fnOut) – Mouse enter/leave

Form Events

  • $("form").submit(function(){}) – Form submit
  • $("input").change(function(){}) – Value changed
  • $("input").focus(function(){}) – Gains focus
  • $("input").blur(function(){}) – Loses focus
  • $("input").select(function(){}) – Text selected

Keyboard Events

  • $(document).keydown(function(){}) – Key pressed down
  • $(document).keyup(function(){}) – Key released
  • $(document).keypress(function(){}) – Key pressed

Browser Events

  • $(document).ready(function(){}) – DOM ready
  • $(window).load(function(){}) – Page loaded
  • $(window).unload(function(){}) – Page unload
  • $(window).resize(function(){}) – Window resized
  • $(window).scroll(function(){}) – Element scrolled
  • $("img").error(function(){}) – Element error

Event Object Properties

$("p").click(function(event) {
  event.type         // Event type (e.g. "click")
  event.target       // Element that triggered event
  event.pageX        // Mouse X position
  event.pageY        // Mouse Y position
  event.which        // Mouse button or key code
  event.preventDefault()   // Prevent default action
  event.stopPropagation() // Stop event bubbling
});

Effects & Animation

Basic

  • $("div").show() – Show element
  • $("div").show("slow") – Show with animation
  • $("div").hide() – Hide element
  • $("div").hide(1000) – Hide with duration (ms)
  • $("div").toggle() – Toggle visibility
  • $("div").toggle("fast") – Toggle with animation

Sliding

  • $("div").slideDown() – Slide down
  • $("div").slideUp() – Slide up
  • $("div").slideToggle() – Toggle slide

Fading

  • $("div").fadeIn() – Fade in
  • $("div").fadeOut() – Fade out
  • $("div").fadeTo("slow", 0.5) – Fade to opacity

Custom Animation

  • $("div").animate({left: '250px'}) – Animate properties
  • $("div").animate({left: '250px'}, 1000) – With duration
  • $("div").stop() – Stop animation
  • $("div").delay(1000).fadeIn() – Delay execution

Speed Values

  • "slow" – 600ms
  • "fast" – 200ms
  • Numeric value in milliseconds (e.g., 1000)

Animation Example

$("#box").animate({
  left: '250px',
  opacity: '0.5',
  height: '150px',
  width: '150px'
}, 1000, function() {
  // Animation complete callback
  alert("Done!");
});

Ajax

Core Methods

  • $.ajax(options) – Full Ajax control
  • $.get(url, data, callback) – GET request
  • $.post(url, data, callback) – POST request
  • $.getJSON(url, data, callback) – Get JSON data
  • $.getScript(url, callback) – Load JavaScript
  • $("div").load(url, data, callback) – Load into element

Ajax Examples

// Simple GET
$.get("data.php", function(data) {
  alert("Data: " + data);
});

// POST with data
$.post("save.php", {name: "John", age: 30}, function(response) {
  alert("Server response: " + response);
});

// Full Ajax control
$.ajax({
  url: "api.php",
  type: "POST",
  data: {id: 123},
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error("Error: " + error);
  }
});

// Load content into element
$("#result").load("content.html #section");

Ajax Events

  • ajaxStart(handler) – Ajax request starts
  • ajaxStop(handler) – All Ajax requests complete
  • ajaxComplete(handler) – Request completes
  • ajaxError(handler) – Request fails
  • ajaxSuccess(handler) – Request succeeds
  • ajaxSend(handler) – Before sending request

Utilities

Array & Object

  • $.each(array, function(index, value){}) – Iterate array
  • $.map(array, function(value, index){}) – Map array
  • $.grep(array, function(value, index){}) – Filter array
  • $.inArray(value, array) – Find in array
  • $.merge(array1, array2) – Merge arrays
  • $.unique(array) – Remove duplicates
  • $.makeArray(obj) – Convert to array
  • $.extend(target, object1, object2) – Merge objects

String & Type

  • $.trim(string) – Remove whitespace
  • $.isArray(obj) – Check if array
  • $.isFunction(obj) – Check if function
  • $.type(obj) – Get type

Browser & Feature Detection

  • $.browser.msie – Is Internet Explorer
  • $.browser.mozilla – Is Mozilla
  • $.browser.webkit – Is WebKit (Safari, Chrome)
  • $.browser.version – Browser version
  • $.support.boxModel – CSS box model support

Utility Examples

// Each iteration
$.each(["apple", "banana", "cherry"], function(i, val) {
  console.log(i + ": " + val);
});

// Map transformation
var numbers = [1, 2, 3, 4, 5];
var doubled = $.map(numbers, function(n) {
  return n * 2;
});

// Filter array
var evens = $.grep([1,2,3,4,5,6], function(n, i) {
  return n % 2 == 0;
});

// Extend object
var defaults = {color: "red", size: 10};
var options = {size: 20, shape: "circle"};
var settings = $.extend({}, defaults, options);
// Result: {color: "red", size: 20, shape: "circle"}

Method Chaining

jQuery methods return jQuery objects, allowing you to chain multiple operations:

// Chain multiple methods
$("#myDiv")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000)
  .addClass("highlighted")
  .fadeOut()
  .fadeIn();

// Traversing with chaining
$("div")
  .find("p")
    .css("color", "blue")
  .end()
  .find("span")
    .css("color", "red");

// Event chaining
$("button")
  .click(function() {
    $(this).addClass("clicked");
  })
  .hover(
    function() { $(this).addClass("hover"); },
    function() { $(this).removeClass("hover"); }
  );

Common Patterns

Toggle Content

$(".toggle-button").click(function() {
  $(".content").slideToggle();
});

Accordion

$(".accordion-header").click(function() {
  $(".accordion-content").slideUp();
  $(this).next(".accordion-content").slideDown();
});

Tabs

$(".tab").click(function() {
  var tabId = $(this).attr("data-tab");
  $(".tab").removeClass("active");
  $(this).addClass("active");
  $(".tab-content").hide();
  $("#" + tabId).show();
});

Form Validation

$("form").submit(function(e) {
  var email = $("#email").val();
  if (email == "" || email.indexOf("@") == -1) {
    alert("Please enter a valid email");
    e.preventDefault();
    return false;
  }
});

Image Preloader

var images = ["img1.jpg", "img2.jpg", "img3.jpg"];
$.each(images, function(i, src) {
  $("<img>").attr("src", src);
});

Smooth Scroll

$("a[href^='#']").click(function(e) {
  e.preventDefault();
  var target = $(this).attr("href");
  $("html, body").animate({
    scrollTop: $(target).offset().top
  }, 1000);
});

Best Practices

✓ Do

  • Cache jQuery objects: var $div = $("#myDiv");
  • Use chaining for multiple operations
  • Use specific selectors for better performance
  • Bind events with delegation for dynamic content
  • Use $(document).ready() for DOM manipulation
  • Return false or use preventDefault() in event handlers

✗ Don’t

  • Don’t repeat jQuery lookups: cache instead
  • Don’t use $("*") universal selector unnecessarily
  • Don’t modify the DOM in loops (build HTML string first)
  • Don’t forget to unbind events when removing elements
  • Don’t use inline event handlers with jQuery

Performance Tips

  • Use ID selectors when possible (#id is fastest)
  • Be specific with selectors: $("div.class") better than $(".class")
  • Minimize DOM manipulation
  • Use event delegation with .live() for dynamic content
  • Detach elements before complex manipulations, then re-attach

Quick Reference

Select → Traverse → Manipulate → Animate

jQuery 1.3.x Documentation • jquery.com

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top