Chapter 3. Bringing pages to life with jQuery

 

This chapter covers:

  • Getting and setting element attributes
  • Manipulating element class names
  • Setting element content
  • Dealing with form element values
  • Modifying the DOM tree

Remember those days (not all that long ago) when fledgling page authors would try to add pizzazz to their pages with counterproductive abominations such as marquees; blinking text; loud background patterns that interfered with the readability of page text; annoying animated GIFs; and, perhaps worst of all, unsolicited background sounds that would play upon page load (and served to test how fast a user could close down the browser)?

We’ve come a long way since then.

Today’s savvy web developers and designers know better and use the power given to them by Dynamic HTML (DHTML) to enhance a user’s web experience, rather than showcase annoying tricks.

Whether it’s to incrementally reveal content, create input controls beyond the basic set provided by HTML, or give users the ability to tune pages to their own liking, DHMTL—or DOM manipulation—has allowed many a web developer to amaze (not annoy) their users.

On an almost daily basis, we come across web pages that do something that makes us say, “Wow! I didn’t know you could do that!” And being the commensurate professionals that we are (not to mention insatiably curious about such things), we immediately start looking at the source code to find out how they did it.

3.1. Manipulating element properties and attributes

3.2. Changing element styling

3.3. Setting element content

3.4. Dealing with form element values

3.5. Summary