In this episode, we have a very brief introduction to the main object through which all jQuery-ing will be done: The $ object. The main point of this part is for you to get accustomed to looking at jQuery code and its syntax, styles, and idioms. Don't worry about understanding or memorizing the code. The $ object is the global object through which all jQuery core (and plugin) functionality is accessed. Just like any other object in object-oriented programming, it has properties (akin to the length of an array) and it has methods (akin to calling document.write() or Array.length()). Having an object named $ may seem a little weird, but don't get distracted by it. It is a legal variable name. As a developer just starting to learn jQuery, you will use it to get access to the DOM. Here are some quick examples of this:
  • // access the DOM object with the id "message"
    $("#message")
  • // access all paragraphs in the DOM
    $("p")
  • // access all DOM elements with class "warning"
    $(".warning")
  • // access all <input> elements named "ingredient"
    $("input [name='ingredient']")
You can already see how your understanding of CSS selectors will be critical. As I said, these are just function calls, and so they have return values of all of the above. The return value in each case is a jQuery "wrapped set."

The Wrapped Set is Composed of Wrapped Objects

A wrapped set represents a list of objects that matched the CSS rule you specified. For example, $("p") would represent all the paragraphs on your page. You can iterate over this set, and you can perform mass operations on each object in the set. It is important to realize that the wrapped set is more than a Javascript array, however. With a normal array, the only common functions you might use are push(), and join(), and the only commonly used property is length. On the other hand, with the jQuery wrapped set, you will have your entire arsenal of jQuery DOM manipulation functions available. Moreover, each element in the wrapped set represents more than just a DOM object. It is a jQuery wrapped object. With a DOM object, such as the one returned by document.getElementById(), you have certain properties and methods. The properties and methods are not consistent across different browsers. On the other hand, each wrapped object provides jQuery properties and methods that are much more -- though not perfectly -- cross-browser. You can even turn DOM objects into wrapped objects. In fact, you will do this often. For example, if you have a <div> with an id of "message" in your HTML document, the following code snippets do the same thing:
// get a jQuery object that represents the DOM object with the id "message"
var jqObject = $("#message");
// get the DOM object first, and the wrap it into a jQuery object
var domObject = document.getElementById("message");
var jqObject = $(domObject);
In both cases, jqObject contains a wrapped object that represents the <div>.

Doing Stuff with Wrapped Sets and Wrapped Objects

Now that you used your CSS selectors to find one or more DOM objects you want, what is typically done with them? The things you do most often are 1) Apply an effect, 2) Change a CSS property, 3) Access / change an attribute of the tag, 4) Assign an event handler. There's more, but these are the most common. Here is an example of each. Again, don't worry about understanding or memorizing the code. Just get used to the syntax:
  • Applying an effect - fadeOut
    // the message slowly fades from view
    $("#message").fadeOut("slow");
  • Change a CSS property
    // highlight the message with obnoxious yellow
    $("#message").css("background-color","#ffff00");
  • Access an attribute
    // set the title attribute of the tag 
    $("#message").attr("title", "Read this carefully!");
  • Assign an event handler
    // assign an onClick handler for the DIV!
    $("#message").click(function() {
    	alert('You clicked on the message.  Why?');
    });
Examine that last one carefully! It is an idiom that you will be using very very often with jQuery: Passing an anonymous function as an argument. It's probably not something you've done before. The anonymous function that is passed to the click function will be called when someone clicks on the <div>. You could have declared a function somewhere and then passed in the function by name, but it is much cleaner to do it this way, since you then know exactly where it is used. The only slightly tricking thing about using this syntax is when you have multiple nested functions. To keep parentheses and braces balanced, I recommend that you always type closing parentheses and braces right away:
// step 1 -- click to see next step
$("#message").click(); // step 2 -- start the function
$("#message").click(function());
// step 3 -- open and close the function body
$("#message").click(function() {});
// step 4 -- fill out body (click to start over)
$("#message").click(function() {
// give yourself space to start typing code
});
That's all for this part! Take some time to wrap your head around this. Next time we will do some hands-on examples of the above.