Introduction to jQuery
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Introduction to jQuery
I have actually gone ahead and downloaded both versions to the current folder that I am working with, but I only need the minified one. I have no intention of changing or even reading the other code. And then if I want to use it in my HTML page, I'm simply going to go in and add a link to it. In this case, I'm linking to the minified version. Now you could certainly make an argument here that it's possible to load jQuery, or any other library, with the script tag up in the head of your document. And if I thought I needed it as soon as possible, I might do that, but I'm pretty confident that I can load it down here just fine, though I am making sure that I am loading the jQuery file before any of my own code that might use it.
So what do we then do with it? Now let's start with something simple. Without jQuery, we'd often write lines of code like this: document.getElementById, give it the name of an ID from the HTML, and then work with methods, or in this case a property. I am setting the className= "highlight." With jQuery, I might write this instead: The word jQuery with a lowercase J and an uppercase Q. In the parentheses here, I'm using the number sign or pound sign or hash sign, depending on which country you're from, and then myDiv to indicate that this is an ID.
This is the same way we do this in CSS, and then a dot and then addClass (" highlight"). So you might think well, so what? A little less code, big deal. But here's where it gets interesting. There are two reasons why the jQuery version is preferable. First, with getElementById we need this element to have an ID of myDiv in our HTML, and if it doesn't have an ID in the HTML, we can't get to it, but jQuery is much more flexible that that.
We can give jQuery an ID to find by using the hash or the pound sign, but we can also find other parts of the page that we can't get with getElementById. For example, we can get all the elements with a particular class just by using the dot, the same way we would in CSS. We can get all the elements of a particular tag, like all the paragraphs or all the anchors or all list items. Now this piece in parentheses is known as the selector.
We are telling jQuery what we want it to find, and the selectors are really borrowed from CSS, which is why we use a pound or hash for an ID and a period for a className. And unlike getElementById, which will only work on one individual piece, anything we do with jQuery will automatically work on all of the elements that match the selector that match what we are looking for. Now we can even refine it more than this. We could combine a couple of these. For example, in this case, p.description, give me all the paragraphs that have a class of description already on them. And there are also certain words we can add to further refine this like :first, :last, :contains, :visible.
We are going to get more into why this is better in just a minute anyway. But we can get more flexible than that. I can simply say JQuery.tourdescription to find all elements with a particular class. Jump back over to the web page and refresh it, and I can actually see that that class is being applied to several different elements on the page. Similarly, I could apply that class to all the elements that were list items just by doing this. This doesn't use the pound sign or the dot; it just says li or p or a for a list item or a paragraph or an anchor tag.
Refresh that page, and we can see that both here where I got list items and down at the bottom it's looking rather ugly, but it proves the point here that it is actually being applied to multiple elements at the same time. We can take that a little further, commenting that one out and then adding the :last to it we will first find all the list items in the entire DOM and then we'll add the class to the very last one. If I refresh this, now we can see that that works as well.
And I can go even better than that. Using the :contains word in jQuery, we can tell that our selector will find all paragraphs and then filter them down to say only the ones that contain the word 'packages' and then add the class of highlight. So saving that, refreshing the page and scanning back up, I can see that it's applying that class to several of them, as long as the paragraph contains the word packages. So with jQuery, there are many ways to get immediately to very specific parts of the page without needing an ID on them.
So with the selector, we are telling jQuery what to look for. Then we have a dot, and then we tell it what we want to do, some action, some change that we are doing. In this case, jQuery find the ID of myDiv and then add the class of highlight. Now the second reason why this is better is that addClass is much more flexible than just using className with our document.getElementById. See, when we use className it's a property. We're just setting it; it will overwrite any classes that were there before.
But when we use addClass with jQuery it adds our new CSS class and keeps any that were there before, so we can start stacking our CSS classes up on our elements. And not only do we have an addClass, we also have a removeClass method in jQuery and a toggleClass method in jQuery, which means if the class is not there, add it; if it is there, remove it. And this is a great little microcosm of what jQuery is all about. It's more accurate. It's more flexible. There are more choices.
Saving that, I am going to jump over to the browser and then just refresh this page. Okay, I might not always want to do that, but what hide is doing, as you can probably tell, is taking 4000 milliseconds, or 4 seconds, to hide all paragraphs. And the great thing is jQuery is taking care of animating all this without us worrying about set interval calls or set timeout calls. So we have got hide. We have got show. We have got slide down, slide up, fade in, fade out, all just as easy to use.
And then there are events. Working with events in jQuery is very simple indeed. If I just uncomment these pieces of code here, we can use the same selectors the dollar sign, in this case an ID of pageID.click, and in this case, passing it an anonymous function. Now what's this one going to do? Well, it's easier to show. Jumping back over and refreshing this page, when I click on word TOURS, it just changes to You clicked me! We are using the #pageID to add the click event and using that same selector and using the text method here to set its text value, rather than having to drill down into the individual text node.
Again, very easy to add an event and very easy to start manipulating that DOM element. Not only that, but jQuery is also very conscious of the word 'this.' So if we use jQuery to add, for example, a click event to all the h2 elements, we can then be smart enough to know which ever particular h2 is clicked will be considered this every time that this function is called, meaning what? Jumping back over to the browser, as we scanned down, I know that these are h2s and when I click each individual one, it knows exactly what caused that event to be raised, so it's smart enough to know which one gets changed.
And very simply, we could combine both jQuery adding events and combine jQuery's animation, so that very easily, refreshing this page, every time we click on the paragraph, it's smart enough to just disappear and fade out. And one last thing here, we are familiar with using window.onload to call some script when we know that the DOM is fully loaded.
One of the problems with window.onload is if you accidentally write it multiple times, only the last one will be paid attention to, whereas in jQuery, we have the $(document).ready function. This does a very similar thing, meaning that the code we put inside here will be executed when the DOM is fully loaded, but if we needed to, we could actually call that same thing multiple times, and we wouldn't have to worry about the last one overriding the first one. In this case, I am calling it twice.
Once I will change the content of this page ID to "The DOM is fully loaded," and then in the next one, I am going to set colors of h1 to red. We refresh that page, and we can see that both of those are being applied. Now this is just a taste, a quick intro. jQuery gets a lot deeper than this, of course. So check out the documentation on jquery.com or take a look at one of several jQuery courses we have here at lynda.com.