JQuery: Selectors

There are a few important JQuery concepts in this example:

  1. The $() function is a special JQuery function that in some ways is like the regular Javascript document.getElementById() function (which, if you remember, returns an element that matches the given id.)
  2. Whereas document.getElementById takes the "id" attribute of a given element as its only argument, $() can take a CSS selector, like "li#item2", or even a selector that matches multiple elements, such as "li".
  3. Javascript's document.getElementById() function returns an XHTML element with certain properties, like the "value" property of text input elements, or the "src" property of image elements, etc. Elements returned by JQuery's $() also have these properties, but also include "extended" properties and methods that are not there by default in plain Javascript, such as the ability to change the HTML nested inside of any element using the html() function of that extended element.

Now on to this example.... This page has a JQuery script that waits until the page has loaded before executing. Once the page has loaded, it changes the text inside any <li> tag with id="special" to be "hello!".

If you look at the source code, you will see that none of the <li> elements below has the word "hello!" inside of them in the XHTML. It has been put there by the Javascript.