- Do not make any assumptions
- Find your hooks and relationships
- Leave traversing to the experts
- Understand browsers and users
- Understand Events
- Play well with others
- Work for the next developer
A jQuery selector function, written jQuery(selector) or $(selector), returns an object containing an array of DOM elements that match the selector. So, for example, the selector function $("table tr:nth-child(even)") returns alternate table rows.
A jQuery command does something with a selector array. To continue the example, $("table tr:nth-child(even)").addClass("even") adds the CSS class "even" to alternate table rows. Elsewhere -- preferably in CSS -- we might define the "even" class within table row elements to have a light-green background.
If we put the jQuery selection and command above in the onload event handler for a page (or, even better, in a jQuery document ready function, which runs after the DOM is complete but before all the images load), we can color all the alternate rows in tables on the page green when the page loads, without mucking up the HTML. This has multiple advantages as far as readability and maintainability.
Suppose you want to change the page so that the alternate rows are gray instead of green? Just change one line of CSS.
What if the number of lines in the table increases, for example, because the table was generated by a database query, and the query has been updated dynamically? What do you have to do to extend the alternate line coloring to the new rows? Just run the same selector and addClass command again at the end of the button-press event code that did the update. At this point, you'd probably want to refactor your code a little, and hoist the selector and addClass command into a colorAlternateLines function called by both events, but I'm sure you get the idea.