Start learning with our library of video tutorials taught by experts. Get started

JavaScript Essential Training
Illustration by

Introduction to jQuery


From:

JavaScript Essential Training

with Simon Allardice

Video: Introduction to jQuery

jQuery is the most popular JavaScript library by far, and it really does make JavaScript easier: easier to navigate and manipulate the DOM, easier to add events, easier to work with animation, and really to do the same things we have been doing all along but with less code. So how do you use it? Well, very simply, what you need to do is go out to jquery.com and just download the JavaScript. You will find that even from the homepage you have a choice of either the development version, which is just the fully readable JavaScript, or a production version, which is 31k after its been minified and gzipped, so it really doesn't add much weight to your web site.
Expand all | Collapse all
  1. 3m 28s
    1. Welcome
      1m 1s
    2. What you should know
      1m 44s
    3. Using the exercise files
      43s
  2. 15m 41s
    1. Introduction to JavaScript
      8m 6s
    2. Creating your first JavaScript
      2m 13s
    3. Getting to know the tools and applications
      5m 22s
  3. 56m 8s
    1. Understanding the structure of JavaScript code
      7m 9s
    2. Where to write your JavaScript
      3m 56s
    3. Creating variables
      6m 21s
    4. Working with conditional code
      5m 44s
    5. Working with operators
      13m 28s
    6. Sending messages to the console
      2m 59s
    7. Working with loops
      8m 1s
    8. Creating functions
      8m 30s
  4. 36m 13s
    1. Working with arrays
      7m 57s
    2. Working with numbers
      6m 13s
    3. Working with strings
      8m 27s
    4. Working with dates
      5m 38s
    5. Working with objects
      7m 58s
  5. 9m 6s
    1. What is the DOM?
      5m 49s
    2. Working with nodes and elements
      3m 17s
  6. 25m 17s
    1. Accessing DOM elements
      11m 3s
    2. Changing DOM elements
      5m 42s
    3. Creating DOM elements
      8m 32s
  7. 24m 45s
    1. Introduction to JavaScript event handling
      8m 16s
    2. Working with onClick and onLoad events
      7m 36s
    3. Working with onBlur and onFocus events
      2m 36s
    4. Working with timers
      6m 17s
  8. 21m 41s
    1. Common JavaScript errors
      7m 14s
    2. Using Firebug
      4m 7s
    3. Going through a debugging session
      10m 20s
  9. 10m 13s
    1. Accessing form elements
      4m 20s
    2. Preventing a form from being submitted
      2m 36s
    3. Hiding and showing form sections
      3m 17s
  10. 9m 49s
    1. CSS and JavaScript
      3m 46s
    2. Removing and applying CSS classes
      2m 16s
    3. Changing inline styles
      3m 47s
  11. 19m 44s
    1. Understanding JavaScript style
      7m 39s
    2. Minifying your code
      4m 28s
    3. Using JavaScript code checkers
      7m 37s
  12. 22m 24s
    1. Introduction to JavaScript libraries
      3m 17s
    2. Linking to multiple JavaScript files
      2m 11s
    3. Introduction to jQuery
      12m 7s
    4. Using a content distribution network to deliver JavaScript files
      4m 49s
  13. 17m 35s
    1. JavaScript in HTML5
      9m 37s
    2. Using Modernizr
      3m 2s
    3. Using Strict Mode
      4m 56s
  14. 33m 3s
    1. Knowing the JavaScript to avoid
      6m 35s
    2. Introduction to regular expressions
      6m 56s
    3. Working with AJAX
      10m 44s
    4. Working with objects and prototypes
      8m 48s
  15. 21m 10s
    1. Example: Countdown
      8m 3s
    2. Example: Resize
      5m 47s
    3. Example: Accordion
      7m 20s
  16. 4m 58s
    1. Where to go from here
      4m 0s
    2. Goodbye
      58s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
JavaScript Essential Training
5h 31m Beginner Jul 22, 2011

Viewers: in countries Watching now:

Use JavaScript to add new features and a richer, more compelling user interface on web pages. This course keeps current best practices and practical uses for JavaScript in mind, while covering syntax, working with the DOM, and developing and debugging across multiple platforms, devices, and browsers. Author Simon Allardice also shows how to progressively enhance and gracefully degrade web pages, and take advantage of the world of JavaScript libraries now available.

Topics include:
  • Understanding the structure of JavaScript code
  • 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
  • Debugging JavaScript
  • Building smarter forms
  • Working with CSS, HTML5, and JavaScript
  • Using regular expressions
Subjects:
Developer Web Web Design Programming Languages Web Development
Software:
JavaScript
Author:
Simon Allardice

Introduction to jQuery

jQuery is the most popular JavaScript library by far, and it really does make JavaScript easier: easier to navigate and manipulate the DOM, easier to add events, easier to work with animation, and really to do the same things we have been doing all along but with less code. So how do you use it? Well, very simply, what you need to do is go out to jquery.com and just download the JavaScript. You will find that even from the homepage you have a choice of either the development version, which is just the fully readable JavaScript, or a production version, which is 31k after its been minified and gzipped, so it really doesn't add much weight to your web site.

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.

The way these would be used, again, is combining them with other parts of the selector. So let's take a look at how. So I have switched over to a file of some JavaScript, which I have mostly commented out here, so I can go through this. Right now, we are using the standard DOM way of getElementById, which is going to apply a CSS highlight to this main section here, main article. It looks kind of ugly, but it's proving the point that this actually works. Comment that one out. The JQuery version here would just be finding the div and adding the class of highlight.

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.

It's kind of what you wish JavaScript did in the first place. Now we can make our code even shorter. If you think that typing out jQuery might get a little tedious because it's easy to get the casing of this mixed up, there's a shortcut so we don't have to. We simply replace the word jQuery with the dollar sign. So the general format we are going to use with JQuery is the dollar sign and then in parentheses the selector, or what to find, then a dot, and then some action in any parameters we have to pass about what to do, what do we want to do? So what does the dollar sign mean? Well, the dollar sign is just an alias, a shortcut for jQuery itself.

Unlike languages like PHP, there is nothing magical about the dollar sign in JavaScript; it's just one of the accepted characters in the variable name. Dollar sign here is just a really short variable name that points to jQuery. So what else do we have? Well, we have some great ways of working with effects. So I am going to just uncomment this line of code here at Line 22, which is going to use the dollar sign for jQuery, tell it to find all paragraphs, and then call hide with the parameter of 4000.

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.

There are currently no FAQs about JavaScript Essential Training.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.