JavaScript - User Experience with jQuery

In this lesson you will learn about jQuery, a javascript framework, and use it to create a simple word game.

“What is the most efficient jQuery selector?”
sample interview question

By now you should have a pretty solid understanding of javascript but as you’ve probably noticed it can be a bit cumbersome, especially when it comes to finding elements. In previous lessons you’ve used things like the document.getElementById() method to grab the element with the ID target, right? Well there is a much easier way to do the same thing — the jQuery framework. Take a just couple minutes and look around the Official jQuery Website. If you continue on your path to becoming a web developer you’ll almost certainly become familiar with jQuery API Documentation. That is unless you work under a rock somwhere.

Scope out jQuery.com

Frameworks are libraries of pre-written code that allow you to do things quickly. Do you happen to recall the when we wrote document.getElementById('target') in the previous lesson? If we were using jQuery, we could have access the same element much more simply with this code: $('#target'). Much more concise! In addition to making it easy to find and manipulate elements in a document, jQuery is also especially handy when it comes to building visual effects into your interfaces. Let’s say the element with ID target is hidden and we have a link that we want to slowly slide the hidden element into view when clicked. All we would have to do is add a simple jQuery function that reacts to a click of the mouse on some element we specified. In that function we could write something as simple as $('#target').slideDown(). If not for jQuery, achieving the same effect with regular old javascript would take up lines and lines of code, not to mention cups and cups of coffee!

So let’s dive right in to jQuery so you can get on to designing and developing visually appealing interfaces! Here’s the material you need to look over, and Codecademy lessons you’ll need to complete before we continue. The last one is a special treat you’ll only find here — A video demonstration of how you jQuery can be used to enhance your user interface, from a Software Engineer at @twitter.

W3 Schools:jQuery Tutorial What is jQuery? Codecademy: Basic jQuery, Lessons 1 - 4 jQuery: Functions and Callbacks with Twitter
What's next? Do the challenge!

0 Comments — Be the first!