jQuery in Action
jQuery fundamentals
5
}
</script>
We place the script in the
onload
handler for the page to assign a function,
make-
ItRed()
, to the
onclick
attribute of the button element. We add this script in the
onload
handler (as opposed to inline) because we need to make sure that the but-
ton element exists before we attempt to manipulate it. (In section 1.3.3 we'll see
how jQuery provides a better place for us to put such code.)
how jQuery provides a better place for us to put such code.)
If any of the code in this example looks odd to you, fear not! Appendix A pro-
vides a look at the JavaScript concepts that you'll need to use jQuery effectively.
We'll also be examining, in the remainder of this chapter, how jQuery makes writ-
ing the previous code easier, shorter, and more versatile all at the same time.
We'll also be examining, in the remainder of this chapter, how jQuery makes writ-
ing the previous code easier, shorter, and more versatile all at the same time.
Unobtrusive JavaScript, though a powerful technique to further add to the
clear separation of responsibilities within a web application, doesn't come without
its price. You might already have noticed that it took a few more lines of script to
accomplish our goal than when we placed it into the button markup. Unobtrusive
JavaScript not only may increase the amount of script that needs to be written,
but also requires some discipline and the application of good coding patterns to
the client-side script.
its price. You might already have noticed that it took a few more lines of script to
accomplish our goal than when we placed it into the button markup. Unobtrusive
JavaScript not only may increase the amount of script that needs to be written,
but also requires some discipline and the application of good coding patterns to
the client-side script.
None of that is bad; anything that persuades us to write our client-side code
with the same level of care and respect usually allotted to server-side code is a
good thing! But it is extra work--without jQuery.
good thing! But it is extra work--without jQuery.
As mentioned earlier, the jQuery team has specifically focused jQuery on the
task of making it easy and delightful for us to code our pages using Unobtrusive
JavaScript techniques, without paying a hefty price in terms of effort or code bulk
in order to do so. We'll find that making effective use of jQuery will enable us to
accomplish much more on our pages by writing less code.
JavaScript techniques, without paying a hefty price in terms of effort or code bulk
in order to do so. We'll find that making effective use of jQuery will enable us to
accomplish much more on our pages by writing less code.
Without further ado, let's start taking a look at just how jQuery makes it so
easy for us to add rich functionality to our pages without the expected pain.
1.3 jQuery fundamentals
At its core, jQuery focuses on retrieving elements from our
HTML
pages and per-
forming operations upon them. If you're familiar with
CSS
, you're already well
aware of the power of selectors, which describe groups of elements by their
attributes or placement within the document. With jQuery, you'll be able to lever-
age your knowledge and that degree of power to vastly simplify your JavaScript.
attributes or placement within the document. With jQuery, you'll be able to lever-
age your knowledge and that degree of power to vastly simplify your JavaScript.
jQuery places a high priority on ensuring our code will work in a consistent
manner across all major browsers; many of the more difficult JavaScript problems,