Using the Event Object

from: Getting Started with jQuery

Buy now

About this lesson

Most web languages support events and event objects. jQuery is no different, with one exception: It makes handling events much easier, hiding the complexity of event handlers, while also handling browser differences for us. In this exercise you will learn how use the event object.

From: Getting Started with jQuery

jQuery is rapidly becoming the language of choice for creating web applications and websites capable of running on multiple devices and screen sizes (think cell phone, tablet, desktop). It can dramatically reduce the amount of time spent coding both basic and complex functionality within a website or web application. In the workshop author and trainer Kevin Ruse teaches you the fundamentals of jQuery, which is essentially a code library designed to reduce your development time. You’ll learn how to work with the jQuery wrapper, selectors, elements, attributes, events, effects, and more. In no time, you’ll be up and running and ready to explore the more complex areas of jQuery development.

$34.99

2 hrs 32 min

Buy now

Similar Courses

This chapter lays the foundation for the workshop by giving you an overview of the topics that will be covered and telling what you will need to complete the course.

About This Workshop
- This lesson gives a brief overview of the topics that will be covered in this course, including how to acquire jQuery, how it works, and what is it used for. We will start with the basic concepts so you will feel more comfortable exploring these subjects in detail later in the course.
  
  What You Will Learn in This Workshop
  
  02:47
- This video describes what you need to complete the course. If you have access to the internet, a text editor, and at least one browser, then you are ready to begin.
  
  What You Need to Complete This Workshop
  
  01:28
This chapter explores what jQuery is, why you might want to use it, and the role that it plays in modern web development.

What Is jQuery?
- With all of the new languages and technologies available today (HTML5, CSS3, jQuery, jQueryMobile, etc.), what exactly is jQuery and why should you want to learn it? This brief video defines exactly what jQuery is and what role it plays in modern web development.
  
  What Is jQuery?
  
  01:46
- Why should you write jQuery? Why not standard JavaScript? In this video we'll explore these questions and look at a web page with some simple functionality written in both standard JavaScript and jQuery so you can compare the two for yourself.
  
  Why Use jQuery?
  
  05:23
In this chapter you'll learn some of the fundamentals of working with jQuery, including how to set it up, how to use the jQuery library, and how to make sure your code executes correctly. You'll also learn about selectors, which will make up a large part of your jQuery code.

Getting Started with jQuery
- Getting started with jQuery is as easy as locating and downloading the library and adding it to your web pages. In this video you will learn where to find the jQuery library and how to link to it from your web pages (or download it and link to the local file from your web pages).
  
  Setting Up jQuery
  
  05:15
- The jQuery wrapper forms the basis of everything you do in jQuery. In this video you will learn how to invoke the jQuery library and unleash this powerful framework. You will also be introduced to the syntax that we will use throughout this course.
  
  The jQuery Wrapper
  
  06:24
- It is important to make sure that your jQuery code executes correctly and responds properly. In this lesson you'll learn two techniques to ensure that you are following best practices for invoking jQuery.
  
  The document.ready() Function
  
  04:40
- Selectors make up a large portion of your code, and in this exercise you'll have the opportunity to practice your use of selectors and reinforce the syntax you've learned thus far.
  
  Practicing with Selectors
  
  09:58
In this chapter you will learn the very important skill of working with wrapped sets in jQuery. After completing these exercises you will know how to determine the size of a wrapped set, add elements, and loop through a wrapped set. You will also learn how to work with elements and attributes.

Working with Wrapped Sets
- Web applications are typically very dynamic and the developer often can't predict what the web page will contain - for example, how many items will be on a dynamically generated list. In this exercise you will learn how to determine the quantity of any given element.
  
  Determining the Size of a Wrapped Set
  
  08:01
- Very often you will need to gather a set of elements in order to execute some sort of action on those elements. In addition, when you're done gathering the list, you may need to add more elements to that list and perform some other action. This exercise shows you how to perform these very common tasks.
  
  Adding Elements to a Wrapped Set
  
  04:07
- Once you've acquired a set of elements, you will typically need to loop through that set to perform an action. In this exercise you learn how to loop though jQuery's wrapped sets.
  
  Looping Through a Wrapped Set
  
  03:56
- Arguably the most common task in jQuery is to work with the elements and attributes on your web page. This lesson explains how to do just that.
  
  Working with Elements and Attributes
  
  12:39
This chapter looks at the various aspects of using selectors, including working with both basic and advanced selectors and making selections based on an element's attributes or position.

jQuery Basics: Using Selectors
- If you already have CSS skills, this is a good place to put them to use! This exercise explores how to use CSS selectors to select elements on your web page with jQuery.
  
  Using CSS Basic Selectors
  
  04:45
- jQuery methods are invoked after selecting elements on the web page in order to perform some action on them. In this exercise you will continue to use CSS by writing advanced and compound selectors for jQuery.
  
  Using CSS Compound Selectors
  
  04:17
- Sometimes you need to select an element based on the existence of an attribute on the element. You can even select an element based on the value of one or more of its attributes. In this exercise you will select an elements based on the element's attributes and values.
  
  Making Selections Using Attributes
  
  11:10
- Due to the dynamic nature of your web pages, you'll frequently have to select an element based on its position in the web page. You can even select an element based on its context within surrounding elements. In this lesson you'll learn how to select an element by its position in the DOM.
  
  Making Selections by an Element's Position
  
  10:36
The ability to dynamically generate HTML is a very powerful feature of jQuery. In this chapter you'll learn how to use this capability to generate HTML elements and attributes.

jQuery Basics: Generating HTML
- Another great feature of jQuery is the ability to create a new HTML client on the fly. User interaction can drive the creation of any new HTML including images, divs, lists, and more. You'll learn how to dynamically generate HTML content in this exercise.
  
  Generating HTML Elements
  
  10:30
- If the elements you need to create require attributes, follow the instructions in this exercise. You will learn how to dynamically create elements and attributes and set their values.
  
  Generating HTML Elements with Attributes
  
  05:10
Events occur when a user interacts with your website or web application. In this chapter you'll learn how to respond to events, use the event object to handle events, and use the live() method to add interactivity to dynamically created components.

jQuery Basics: Events
- In this lesson you'll learn how to add event handler functions that respond to user interaction.
  
  Responding to a Simple Event
  
  07:12
- Most web languages support events and event objects. jQuery is no different, with one exception: It makes handling events much easier, hiding the complexity of event handlers, while also handling browser differences for us. In this exercise you will learn how use the event object.
  
  Using the Event Object
  
  09:06
- In this lesson you'll learn how to add functionality to objects on your web page that don't exist! Remember that you can dynamically generate content with jQuery - and now you can add interactivity to these dynamically created components.
  
  Using the live() Method
  
  05:46
In this chapter you'll learn some techniques for working with effects: dynamically hiding and showing elements, animating effects with the toggle() method, and calling a function after an animated effect has taken place.

jQuery Basics: Effects
- In this lesson you'll learn how to use simple jQuery methods to dynamically hide and show the various elements on your web page.
  
  Hiding and Showing Elements with toggle()
  
  05:39
- Much of the hype surrounding jQuery is centered on its ability to easily add effects and animations to web pages. This exercise shows you how to use this ability to animate the effect you created earlier with the toggle() method.
  
  Animating the toggle() Method
  
  06:58
- It's sometimes necessary to perform an action after an animated effect takes place. In this exercise you will learn a simple technique that allows you to call a function after an animated effect has occurred.
  
  Adding a Function to the toggle() Method
  
  04:43