Repeating code violates the DRY principle. jQuery provides multiple extension points: object methods, global functions, custom selectors, and easing effects.

Object Methods

Add a new method to every jQuery object:

jQuery.fn.myMethod = function() {
  return this.each(function() {
    // 'this' refers to a DOM element
    doSomethingWith(this);
  });
};

Always return this to enable chaining. Use .each() to handle multiple elements.

Global Functions

Attach functions to the jQuery namespace to avoid collisions:

// Single function
jQuery.myPlugin = function() { ... };

// Multiple functions under a namespace
jQuery.myPlugin = {
  foo: function() { ... },
  bar: function(param) { ... }
};

Custom Selectors

Extend jQuery’s expression parser with pseudo-classes:

jQuery.extend(jQuery.expr[':'], {
  'hasChildren': 'a.childNodes.length > 0'
});
// Usage: $('div:hasChildren')

The a variable is the current DOM element; m holds the regex match groups.

Easing Styles

Define custom acceleration curves for animations:

jQuery.extend(jQuery.easing, {
  easeInOut: function(fraction, elapsed, start, delta, duration) {
    return (fraction < 0.5)
      ? Math.pow(fraction * 2, 2) * delta / 2 + start
      : (1 - Math.pow((1 - fraction) * 2, 2)) * delta / 2 + start;
  }
});
// Usage: .animate({left: 500}, 'slow', 'easeInOut')

Example: Event Logger Plugin

A reusable logger that finds the nearest .log container:

jQuery.fn.log = function(message) {
  var str = message;
  if (typeof message === 'object') {
    str = '{';
    jQuery.each(message, function(k, v) { str += k + ': ' + v + ', '; });
    str += '}';
  }
  return this.each(function() {
    var $ctx = jQuery(this);
    while ($ctx.length) {
      var $log = $ctx.find('.log');
      if ($log.length) {
        jQuery('<div class="log-message"></div>')
          .text(str).hide().appendTo($log).fadeIn();
        break;
      }
      $ctx = $ctx.parent();
    }
  });
};

Dimensions Plugin

This plugin (by Paul Bakaus & Brandon Aaron) adds accurate measurement methods beyond the core jQuery dimension API.

Height & Width Extensions

• $(window).height() / $(document).height()
• $(window).width() / $(document).width()

Inner & Outer Dimensions

.innerHeight() // height + padding
.innerWidth()
.outerHeight() // height + padding + border
.outerWidth()

Margins are excluded.

Position Methods

.scrollTop()              // get vertical scroll
.scrollTop(value)         // set
.scrollLeft()             // get horizontal scroll
.scrollLeft(value)        // set

.offset([options])        // get top/left relative to document (or an ancestor)
.position([returnObj])    // shorthand for offset relative to offset parent

Options: { margin: true, border: false, padding: false, scroll: true, lite: false, relativeTo: element }.

Form Plugin

Simplifies AJAX form submission, value serialization, and form manipulation.

AJAX Submission

// Immediate AJAX submit
$('form').ajaxSubmit(options);

// Prepare form for future submits via standard events
$('form').ajaxForm(options);

Options include url, type, beforeSubmit, dataType, target, resetForm, clearForm, semantic. The beforeSubmit callback can return false to cancel.

Use .ajaxFormUnbind() to revert to standard form behavior.

Retrieving Form Values

• .formToArray([semantic]) – array of {name, value} objects
• .formSerialize([semantic]) – URL-encoded query string
• .fieldSerialize([successful]) – only selected fields
• .fieldValue([successful]) – array of values

Unchecked checkboxes and unsuccessful fields are omitted by default.

Form Manipulation

.clearForm()    // clear all inputs inside a form/container
.clearFields()  // clear only matched input elements
.resetForm()    // restore to initial HTML values

Online Resources & Development Tools

Key resources for deeper jQuery learning:

• jQuery Wiki: docs.jquery.com
• Visual jQuery: www.visualjquery.com
• Firebug (Firefox extension): getfirebug.com
• Firebug Lite (cross-browser console): getfirebug.com/lite.html
• Charles Proxy: inspect HTTP traffic
• Microsoft IE Developer Toolbar

These tools help debug, profile, and optimize jQuery code across browsers.