- Set up your files and folders just like we did in the previous exercise. Inside the
<body>of the HTML document, add a heading and a paragraph:<body> <h1>My First jQuery</h1> <p>Thanks to jQuery doing fancy JavaScript stuff is easy.</p> </body> - Feel free to create some CSS in the
styles.cssin the styles folder — style this however you would like. - Next, open up that empty
scripts.jsfile we created earlier and add this bit of script to the file:$(document).ready();
What just happened?
Let's take this statement one at a time — first a dollar sign? Really? What's that doing in JavaScript?
The $ here is just a variable — that's all. It's a container for the jQuery function. Remember how I said we might use a variable to save ourselves a few keystrokes? The clever writers of jQuery have provided the $ variable to save us from having to write out jQuery every time we want to use it. This code does the same thing:
jQuery(document).ready();
Except it takes longer to type. jQuery uses the $ as its short name because it's unlikely that you'd call a variable $ on your own since it's an uncommon character. Using an uncommon character reduces the chance that there would be some sort of conflict between some other JavaScript being used on a page and the jQuery library.
So, in this case, we're passing document to the jQuery or $ method, because we want to select our HTML document as the target of our code. When we call the jQuery function, we get a jQuery object. In JavaScript speak, we would say that the jQuery function returns a jQuery object. The jQuery object is what gives the jQuery library its power. The entire jQuery library exists to give the jQuery object lots of properties and methods that make our lives easier. We don't have to deal with lots of different sorts of objects — we just have to deal with the jQuery object.
The jQuery object has a method called ready(). In this case, the ready method will be called when the document is loaded into the browser, and is ready for us to work with. So $(document).ready() just means, "when the document is ready".
Adding a paragraph
So now we're all set to do something when the document is ready, but what is it that we'll do? Let's add a new paragraph to our page.