Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Beginning jQuery

Create dynamic web pages and optimize your applications for the modern web

Created byPackt Publishing

Last updated 8/2018

English

English [Auto],

What you'll learn

Get up and running with jQuery on a simple web page
Understand the structure of the Document Object Model (DOM)
Explore event handling and advanced animations
Create optimized user interfaces
Hide and show elements with various built-in effects
Master events to bring your web pages to life
Work with different animation effects to enhance web pages of your applications

Course content

10 sections • 103 lectures • 7h 26m total length

Course Overview2:29
This video gives an overview of the entire course.
Installation and Setup1:03
Now, let us use the tools that we will use for this course.
Title Map0:26
This video gives an overview of the lessons covered in this course.
Lesson Overview2:35
This video gives an overview of the entire lesson.
Making Our First jQuery- Powered Web Page9:05
Let us now make our first jQuery- Powered Web Page. We will do the following:
Download and save jQuery
Set up jQuery in an HTML document
Adding our jQuery Code5:42
In this video, we will add our jQuery code and execute our file once it is ready.
Plain JavaScript Versus jQuery7:02
In this video, we will look at the differences between JavaScript and jQuery.
Using jQuery with Developer Tools8:42
In this video, we’ll get acquainted with all the high-quality developer tools in the modern browsers. We will also learn in detail about using the Console tab in Chrome Developer Tools.
Summary0:41
This video summarizes your learning.
Test Your Knowledge

Lesson Overview1:15
This video gives an overview of the entire lesson.
Understanding the DOM4:39
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. In this video, we will learn about the structure of the DOM.
Using the $() Function9:55
In this video, we will learn to use the $() function.
Selector Specificity9:34
In this video, we will explore the concept of Selector Specificity.
Custom Selectors6:07
In this video, we will learn about custom selectors.
Form Selectors
In this video, we will explore the different form selectors.
DOM Traversal Methods9:22
In this video, we will learn about the different DOM Traversal Methods.
Chaining6:47
In this video, we will explore the concept of chaining.
Accessing DOM Elements1:37
In this video, we will learn to access the DOM elements.
Summary0:36
This video summarizes your learning.
Test Your Knowledge

Lesson Overview1:15
This video gives an overview of the entire lesson.
Performing Tasks on Page Load3:55
We have already seen how to make jQuery react to the loading of a web page. In this video we will look a little more into the details.
Handling Simple Events5:27
There are other times, apart from the loading of the page, at which we might want to perform a task. In this video, we will learn to use a style switcher and enable other buttons.
Event Handler Context11:39
In this video, we will learn to use the event handler context and to consolidate code using event context.
Showing and Hiding Page Elements3:10
In this video, we will learn to show and hide page elements.
Event Propagation8:02
In this video we will learn about implementing jQuery’s .hover method. We will also learn about event capturing and event bubbling.
Altering the Journey – The Event Object6:48
In this video we will learn about Event targets. We will also learn to stop event propagation.
Preventing Default Actions1:26
In this video, we will learn to prevent default actions.
Delegating Events5:38
In this video, we will learn to delegate events and use the built-in event delegation capabilities.
Remove An Event Handler1:03
In this video, we will learn to remove an event handler.
Giving Namespaces to Event Handlers1:35
In this video, we will learn to give namespaces to event handlers.
Rebinding Events3:19
In this video, we will learn to rebind events.
Simulating User Interaction1:04
In this video, we will learn to simulate user interaction.
Keyboard Events3:22
In this video, we will learn about keyboard events.
Summary0:20
This video summarizes your learning.
Test Your Knowledge

Lesson Overview0:58
This video gives an overview of the entire lesson.
Modifying CSS with Inline Properties12:59
In the previous lessons, we have been modifying a document's appearance by defining styles for classes in a separate style sheet and then adding or removing those classes with jQuery using the .addClass() function. In this video we will look at .css() method.
Built-In Animation Effects8:20
In this video, we will learn about:
Hiding and Showing Elements
Speeding In
Fading In and Fading Out
Sliding Up and Sliding Down
Toggling Visibility
Creating Custom Animations6:27
In addition to the prebuilt effect methods, jQuery provides a powerful .animate() method that allows us to create our own custom animations with fine-grained Control. In this video, we will learn to:
Build Effects by Hand
Animate Multiple Properties at Once
Position with CSS
Simultaneous Versus Queued Effects8:45
The .animate() method, is very useful for creating simultaneous effects affecting a particular set of elements. In this video we will learn about working with a single set of elements
Working with Multiple Sets of Elements8:39
There may be times, however, when we want to queue our effects to have them occur one after the other. In this video we will learn about working with multiple Sets of Elements.
Summary0:21
This video summarizes your learning.
Test Your Knowledge

Lesson Overview1:00
This video gives an overview of the entire lesson.
Manipulating Attributes5:12
In this video, we will learn about attribute values.
Computed Attribute Values5:05
In this video, we will learn about computed attribute values.
Data Attributes8:06
In this video, we will learn about data attributes, DOM element properties and form control values.
DOM Tree Manipulation4:37
In this video, we will learn about the $() function and to create a new element.
Inserting New Elements0:32
In this video, we will learn about inserting new elements.
Moving Elements1:34
In this video, we will learn about moving elements.
Wrapping Elements9:23
In this video, we will learn about wrapping elements and using inverted insertion methods.
Copying Elements1:55
In this video, we will learn to copy elements.
Content Getter and Setter Methods8:24
In this video, we will learn about pull quotes, content getter and setter methods.
DOM Manipulation Methods in a Nutshell1:18
In this video, we will have a quick glance through the different DOM manipulations methods
Summary0:19
This video summarizes your learning.
Test Your Knowledge

Lesson Overview4:24
This video will give you an overview of the lesson.
Loading Data on Demand6:16
In this video, we will learn about appending HTML and working with JavaScript Objects.
Retrieving JSON3:14
In this video, we will learn about JSON.
Choosing a Data Format11:00
In this video, we will look at the differences between different data formats and how to choose the best for us.
Passing Data to the Server9:13
In this video, we will learn about performing a GET request and serializing a form.
The .ajax() Function3:27
In this video, we will learn about the the .ajax() function and keeping an eye on the request.
Deferreds and Promises2:24
In this video, we will learn about Performing Ajax Calls on Page Load
Error Handling2:08
In this video, we will learn about error handling.
Summary0:25
This video summarizes your learning.

Lesson Overview1:15
This video will give you an overview of the lesson.
Using a Plugin4:39
Using a jQuery plugin is very straightforward. We need to simply obtain the plugin code, reference the plugin from our HTML, and invoke the new capabilities from our own scripts. In this video, we will learn about each of it in detail.
Specifying Plugin Options2:15
In this video, we will learn to specify plugin options.
Modifying Defaults2:43
In this video, we will learn to modify default plugin options.
Interacting with Plugins3:16
In this video, we will learn to interact with plugins.
jQuery UI6:04
While most plugins, such as Cycle, focus on a single task, jQuery UI tackles a wide variety of challenges. In fact, while the jQuery UI code may often be packaged as a single file, it is actually a comprehensive suite of related plugins. In this video, we will learn to installing a jQuery UI plugin and different jQuery UI Effects.
CSS Class Animations2:48
In this video, we will look at CSS Class Animations.
jQuery UI Interaction Components5:07
In this video, we will look at additional effects as well as jQuery UI Interaction Components.
Widgets and jQuery UI ThemeRoller7:07
In this video, we will learn about widgets and jQuery UI ThemeRoller.
jQuery Mobile11:16
We have seen how jQuery UI can assist us in assembling the user interface features needed for a complex web application. The challenges it overcomes are varied and complex. A different set of hurdles exists, however, when preparing our pages for elegant presentation and interaction on mobile devices. To create a website or application for modern smartphones and tablets, we can turn to the jQuery Mobile Project. In this video, we will learn about simulating a mobile browser, HTML5 custom data attributes and delivering multiple pages in one document.
Interactive Elements and Advanced Features5:36
In this video, we will learn about interactive elements and advanced features of jQuery mobile.
Summary0:31
This video summarizes your learning.

Lesson Overview1:58
Sizzle is the component within jQuery that is responsible for parsing the CSS selector expressions we put into the $() function. It determines which native DOM methods to use as it builds a collection of elements that we can then act on with other jQuery methods. The combination of Sizzle and jQuery's set of traversal methods makes jQuery an extremely powerful tool for finding elements on the page. Let’s look at it in more detail.
Selecting and Traversing Revisited1:11
In this video, we will learn to specify plugin options.
Dynamic Table Filtering7:30
In this video, we will learn about dynamic table filtering.
Striping Table Rows2:58
In this video, we will learn to stripe table rows.
Combining Filtering and Striping3:39
In this video, we will learn to combine filtering and striping.
Writing a Custom Selector Plugin4:14
We explored jQuery plugins such as Cycle2, jQuery UI, and jQuery Mobile in the previous lesson. Plugins can also provide additional selector expressions that we can use to select elements. These selector expressions normally make use of a CSS Pseudo-class. Let’s look at it in more detail.
Using HTML5 Data Attributes3:20
HTML5 data attributes can be used to store extra data alongside regular HTML content. We can then use this extra information for our own purposes. In this video, we will use the data attributes to help sort a table of books.
Revisiting Attribute Manipulation5:07
We often create new elements in our jQuery code by providing an HTML string to the $() function or the other DOM insertion functions. This technique is fast and concise. There are circumstances when it is not ideal though. We might, for instance, want to escape special characters from text before it is used, or apply style rules that are browser-dependent. In these cases, we can create the element and then chain on additional jQuery methods to alter it, as we have done many times already. In addition to this standard technique, the $() function itself provides an alternative syntax to achieve the same result. Let’s look at this in more detail.
Summary0:36
This video summarizes your learning.

Lesson Overview2:40
Modern web applications make use of sophisticated events and effects to provide users with a rich and interactive experience. In this lesson, we will look at the advanced event handling and effects management functionality that jQuery provides to make it easier to build interactive experiences.
Event Delegation5:30
In this video, we will learn to load additional pages of data.
Displaying Data on Hover and Choosing a Delegation Scope7:01
In this video, we will learn to display data on hover, jQuery's event delegation and choosing a delegation scope.
Defining Custom Events11:43
The standard events that get triggered by the DOM implementations of browsers are crucial to any interactive web application. However, we aren't limited to this set of standard events in our jQuery code. We can also add our own custom events. In this video, we will learn about infinite scrolling and using custom event parameters.
Event Throttling3:20
In this video, we will learn about event throttling.
Interrupting Animations5:58
In this video, we will learn about implementing a basic animation, halting a running animation and disabling all effects.
Defining Effect Durations8:17
In this video, we will learn to define effect durations.
Chaining Calls1:27
In this video, we will learn to chain calls.
Multi-Property Easing and Deferred Objects3:18
In this video we will look at multi-property easing and deferred objects.
Animation Promises3:46
In this video, we will look at animation promises and how to use them.
Summary0:42
This video summarizes your learning.

Lesson Overview1:33
We have already seen in previous lessons how jQuery can help us build Ajax-powered web applications. In this lesson, we will look at some of the more advanced Ajax features that jQuery offers us.
Same-Origin Policy and JSONP3:34
In this video, we will learn about Same-Origin Policy and JSONP.
CORS8:12
In this video, we will learn about CORS, it's usage and its advantages and disadvantages.
Error Handling2:33
In this video, we will learn about error handling.
Using the jqXHR Objectg2:37
In this video, we will learn about AJAX promises.
Caching Responses2:32
In this video, we will learn about caching responses.
Extending Ajax Capabilities4:18
As you've seen, the Ajax functionality that jQuery offers out of the box is very comprehensive and is normally suitable for most purposes. However, there are mechanisms to extend the regular functionality if you need to do something a little more out of the ordinary. In this topic, we will explore how we can extend the Ajax functionality to support different data types before they are submitted.
AJAX Pre Filters0:58
In this video, we will learn to modify our requests using AJAX pre filters before they are submitted.
Summary0:49
This video summarizes your learning.

Requirements

You do not need previous experience with jQuery. With some basic knowledge of JavaScript, HTML5, and CSS3, you can benefit more from this course.

Description

Simple syntax and open coding standards enable developers to deploy applications in a short time. With this course, you will be able to effectively leverage all new features of jQuery 3.0 in your applications. The course begins with teaching the difference between JavaScript and jQuery. You’ll learn how to use jQuery with developer tools that are available in all modern browsers. You’ll then learn all about selecting elements, handling events, manipulating the document object model, jQuery plugins, advanced Ajax, and several advanced concepts. By the end of the course, you will successfully create a fully featured and efficient single page web application.

About the Authors

Adam Boduch has been involved with large-scale JavaScript development for nearly 10 years. Before moving to the frontend, he worked on several large-scale cloud computing products using Python and Linux. No stranger to complexity, Adam has practical experience with real-world software systems and the scaling challenges they pose. He is the author of several JavaScript books, including React and React Native, and is passionate about innovative user experiences and high performance.

Jonathan Chaffer is a member of Rapid Development Group, a web development firm located in Grand Rapids, Michigan. His work there includes overseeing and implementing projects in a wide variety of technologies, with an emphasis on PHP, MySQL, and JavaScript. In the open source community, he has been very active in the Drupal CMS project, which has adopted jQuery as its JavaScript framework of choice.Jonathan is the creator of the Content Construction Kit, now a part of the Drupal core, used for managing structured content. He is also responsible for major overhauls of Drupal's menu system and developer API reference. In his spare time, he designs board and card games for the hobby market. He lives in Grand Rapids with his wife, Jennifer.

Karl Swedberg is a web developer at Fusionary Media in Grand Rapids, Michigan, where he spends much of his time writing both client-side and server-side JavaScript. When he isn't coding, he likes to hang out with his family, roast coffee in his garage, and exercise at the local gym.

Greg Roodt is a web and mobile developer with experience in a wide variety of industries and technologies. He has shipped backend and frontend code for scrappy start-ups, internet legends, large corporations, and small "mom-and-pops." He is a start-up cofounder and Y Combinator alum who knows how to get things done. He is excited by this opportunity to share his jQuery experience with both new and seasoned developers.

Frahaan Hussain is the CEO and the founder of Sonar Systems. He has created over 1,500 video tutorials and tutored over 135,000 students on Udemy. He is the author of two Packt books and over 10 video courses for Packt Publishing. He is also the founder of BRIDGE ICO.

Who this course is for:

This course is ideal for client-side JavaScript developers.

Beginning jQuery

What you'll learn

Explore related topics

Course content

Beginning with jQuery9 lectures • 38min

Selecting Elements10 lectures • 50min

Handling Events15 lectures • 58min

Styling and Animating7 lectures • 46min

Manipulating the DOM12 lectures • 47min

Working with Ajax9 lectures • 43min

jQuery Plugins12 lectures • 53min

Advanced Selectors, Traversing, and DOM Manipulation9 lectures • 31min

Advanced Events and Effects11 lectures • 54min

Advanced Ajax9 lectures • 27min

Requirements

Description

Who this course is for: