jQuery Day 01: Getting Started with DOM Manipulation

Starting a new project for Microsoft Colombia and the Health Department gave me the perfect opportunity to explore jQuery—Microsoft's newly supported JavaScript library for VS2008. Here's what I learned on day one about DOM traversal, manipulation, and events.

Project Context: Software + Services Migration

The project was both a proof-of-concept migration from VS2003 to VS2008 and an architectural refactoring toward a Software + Services model. The web interface requirements made jQuery an ideal choice for rich client-side interactions without the complexity of full Ajax frameworks.

Setting Up jQuery in Visual Studio 2008

Initial Setup Steps

1. Create a Web Application project in VS2008
2. Add a "scripts" folder to organize JavaScript files
3. Copy jquery-1.2.6.js (the library) into scripts folder
4. Copy jquery-1.2.6-vsdoc.js (IntelliSense documentation) into scripts folder
5. Reference both files in your page

Page References

<script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="scripts/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

Note: jQuery works without the vsdoc file, but including it enables IntelliSense in Visual Studio—a major productivity boost.

Traversing the DOM

jQuery's selector syntax makes DOM traversal elegant and cross-browser compatible. The $() function (shorthand for jQuery()) is the entry point for all DOM operations.

Selecting by ID

var help = $("#help");

Equivalent to document.getElementById("help") but works consistently across all browsers.

Selecting by Tag

var p = $("p");

Gets all <p> elements in the document. Returns an array-like collection.

Selecting by Attribute

var username = $("input[name='username']");

Finds input elements with specific attribute values—powerful for form validation.

jQuery Returns Arrays

All jQuery selectors return array-like objects—either empty (0 elements), single-element, or multi-element collections. This consistent return type simplifies code logic.

Best Practice: Prefix jQuery variables with $ to distinguish them from regular JavaScript variables:

var $username = $("input[name='username']");
var length = $username.length;  // Array methods available
var element = $username.get(0); // Access raw DOM element

Manipulating the DOM

Once elements are selected, jQuery provides rich manipulation methods. Key insights from early experimentation:

•
CSS classes don't need to exist: You can reference classes in jQuery selectors before defining them in stylesheets
•
Multiple classes per element: <table class="VisualTable PopulationTable"> separates designer styles from script hooks
•
addClass/removeClass: Dynamically change styling based on user interaction or state

Working with Events

jQuery's event system provides consistent cross-browser event handling. The most important event for page initialization:

Document Ready Event

$(document).ready(function() {
  // Code executes when DOM is fully loaded
  myCode();
});

This ensures your code runs only after the DOM is ready for manipulation—critical for reliable behavior.

Alternative syntax: If you prefer named functions over anonymous functions:

$(document).ready(onLoaded);

function onLoaded() {
  // Initialization code
}

Event Handlers with Multiple Functions

Many jQuery events accept multiple function parameters, enabling elegant state transitions:

Hover Event Example

$("#partList .row").hover(
  function() {
    $(this).addClass("rowOver");
  },
  function() {
    $(this).removeClass("rowOver");
  }
);

The first function executes on hover enter, the second on hover exit. $(this) refers to the element triggering the event—similar to $(document) but contextual to the event source.

Function Syntax: Anonymous vs. Named

jQuery heavily uses anonymous functions (similar to C# lambda expressions) and JSON-like notation. While elegant and concise, you can always use pre-defined named functions if you prefer or need to share event handlers across different scripts.

This flexibility proves useful when combining multiple scripts or building modular event-driven architectures.

Modern Context: jQuery in 2025

In 2008, jQuery revolutionized web development by abstracting browser inconsistencies. By 2025, the landscape has evolved dramatically:

• Native DOM APIs: Modern browsers support querySelector, classList, addEventListener consistently
• Framework shift: React, Vue, Angular provide reactive DOM updates instead of imperative manipulation
• Bundle size matters: Modern apps prefer smaller libraries or vanilla JS to reduce payload
• TypeScript dominance: Type safety reduces the errors jQuery's API design helped avoid
• jQuery still relevant: WordPress, legacy apps, and rapid prototyping still leverage jQuery effectively

Why jQuery Mattered

jQuery's elegant selector syntax, chainable methods, and cross-browser abstractions taught a generation of developers how to think about DOM manipulation. While modern frameworks have different approaches, jQuery's influence persists in API design patterns and developer expectations for concise, expressive code. The $() syntax became so iconic it inspired countless libraries and frameworks.

Key Takeaways

1. jQuery simplified cross-browser development - one API for all browsers
2. Selector syntax is powerful and intuitive - CSS selectors for DOM traversal
3. Event handling made easy - consistent API abstracts browser differences
4. IntelliSense support mattered - tooling integration improved productivity
5. Legacy lives on - jQuery principles influenced modern framework design