Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

jQuery in Action: Build 20 jQuery Projects

Name: jQuery in Action: Build 20 jQuery Projects
Rating: 4.6 (355 reviews)

jQuery Hands-On Practical Course! Learn jQuery from Basics & Create 20 amazing real-world jQuery Projects

Created byCrypters Infotech

Last updated 4/2021

English

What you'll learn

Learn jQuery from scratch
Write complicated JavaScript functions easily, quickly and effectively
Apply jQuery knowledge to build 16 real-world practical jQuery projects
Create cool visual effects and animations
Develop fun and engaging games easily
Build professional user interfaces
Add beautiful and unique features to websites
Build high performing jQuery applications
Accomplish amazing things by writing just a few lines of code

Course content

14 sections • 173 lectures • 23h 43m total length

What are You Going to Develop?5:31
This is an overview of different projects that you are going to develop as part of this jQuery course.
What Software You Need?0:22
Get the list of software you need to proceed with this jQuery course. You require only a text editor and browser to proceed.
What is jQuery?3:44
Understand what jQuery is and why you should use it.
Let's Compare: JavaScript Vs jQuery6:44
Compare JavaScript and jQuery to know how accurate the official tag line of jQuery "Write Less, Do More" is. You will find that you need just 5 or 6 lines of jQuery code where JavaScript required 25 to 30 lines of code to implement the same functionality.
Quiz: Introduction to jQuery

Setup jQuery Development Environment10:20
This lecture explains how to setup the jQuery development environment. You can either reference jQuery online or download the required files and reference it locally.
Understand the Basic Syntax of jQuery4:05
This lecture explains the basic syntax of jQuery. It helps you a lot as you start writing your jQuery code.
Importance of $(document).ready() Event2:48
This lecture explains the importance of $(document).ready() event. This jQuery method makes sure that the DOM is ready before you run the code.
Secret Tip to Write jQuery Code Easily and Quickly6:10
This lecture shares a very secret tip that will help you write your jQuery code easily and quickly.
Quiz: Basics of jQuery

All Selector4:13
This lectures explains the all selector. The symbol * is used to select all the elements on a webpage.
Tagname Selector2:01
You will learn how to select elements using the tag name. You just have to specify the tag name within double quotes.
Multiple Selectors0:52
You will learn how to combine different selectors at a time. Different selectors are to be separated by comma.
ID Selector2:04
You will learn how to select an element using its id. You need to specify the symbol # just before the id.
Class Selector0:52
You will learn how to select an element using its class name. You need to specify a . (dot) just before the class name.
Hands-On Practice: Class Selector3:23
This is a hands-on practice implemented using class selector.
this Selector2:00
You will learn how to select the currently active element using this selector. This selector should be specified without double quotes.
Hands-On Practice: this and Tagname Selectors6:13
This is a hands-on practice implemented using this and tag name selectors.
Attribute based Selectors - Part 1 (name, value equals and value not equal)5:30
You will learn how to select elements that have a specific attribute, elements that have a specific attribute value and elements that do not have a specific attribute value.
Attribute based Selectors - Part 2 (value starts with, ends with and contains)3:22
You will learn how to select elements that have an attribute value that starts with the specified value, that ends with the specified value and that contains the specified value.
Attribute based Selectors - Part 3 (value contains a word)5:22
You will learn how to select an element that has an attribute value with the specific word.
Position based Selectors - Part 1 (first, last, even indexed and odd indexed)7:52
You will learn how to select the first element, last element, even indexed element and odd indexed element.
Position based Selectors - Part 2 (index equals, less than and greater than)2:37
You will learn how to select elements with index equal to the specified value, index less than the specified value and index greater than the specified value.
Relationship based Selectors - Part 1 (first child and last child)7:15
You will learn to select element that is the first child and also the element that is the last child.
Relationship based Selectors - Part 2 (nth child and nth last child)2:28
You will learn how to select the nth child (where n is specified) and also the nth child from last.
Relationship Selectors - 3 (first and last of type, nth and nth last of type)3:36
You will learn how to select the first child of specific type, last child of specific type, nth child of specific type and nth child from the last of specific type.
Relationship based Selectors - Part 4 (only child and only of type)3:29
You will learn how to select an element that is the only child of its parent and also the element that is the only child of specific type.
Child and Sibling Selectors7:16
You will learn how to select a direct child, descendent, general sibling and adjacent sibling.
Form based Selectors7:05
You will learn how to select elements in a form.
State based Selectors12:11
You will learn how to select elements based on their state.
Content based Selectors6:32
You will learn how to select elements based on the content.
Quiz: Selectors
Exercises: Selectors1:07

Overview3:33
This is an introduction to events.
Mouse Events9:55
You will learn about different mouse events.
Keyboard Events3:27
You will learn about different keyboard events.
Form Events - Part 1 (focus, blur, focusin and focusout)6:54
You will learn how to use focus, blur, focusin and focusout events.
Form Events - Part 2 (change, select and submit)9:20
You will learn how to use change, select and submit events.
Browser Events5:30
You will learn about different browser events.
How to Attach Event Handlers?11:40
You will learn how to attach event handlers to different elements.
Difference between .click() and .on("click") (Event Delegation)8:54
Difference between one() and on() Methods10:07
Method Chaining4:10
jQuery allows you to attach more than one method to the same element. You will learn how to do that.
Quiz: Events
Exercises: Events0:17

Introduction to Effects5:54
This is an introduction to effects and you will learn what a callback function is.
Basic Effects4:03
You will learn how to use the basic effects such as hide, show and toggle.
Fading Effects4:18
You will learn how to use fadeIn, fadeOut and fadeToggle events.
Sliding Effects1:51
You will learn how to use slideUp, slideDown and slideToggle events
Reverse Slide Down and Slide Up Effects - Part 18:48
Reverse Slide Down and Slide Up Effects - Part 211:02
Custom Animations11:05
You will learn how to create animations and effects on your own.
Choose CSS Property Name Dynamically in animate() Method16:13
Learn how to use a dynamic CSS property name within animate() method.
Quiz: Effects

Get/Set HTML6:58
Learn how to get or set the HTML value of elements.
Get/Set Text3:43
Learn how to get or set the text value of elements.
Get/Set Values of Form Elements5:24
Learn how to get or set value for the value attribute of form elements.
Get/Set Attributes and Properties5:50
Learn how to set values for attributes and properties.
Add Content or Element6:18
Learn how to add content or event new element itself.
Move an Existing Element to a New Location7:02
Learn how to use append() method to move an existing element to a new location.
Remove Element2:41
Learn how to remove element from DOM.
Hands-On Practice: Remove Elements Based On Button Clicked12:36
Learn how to remove elements based on the button clicked using jQuery selectors and jQuery DOM manipulation methods.
Modify Content3:13
You will learn how to modify the content in a DOM.
Modify Style11:28
You will learn how to change the style (appearance).
Quiz: DOM Manipulation
Exercises: DOM Manipulation0:23

Ancestors Traversal Methods7:51
You will learn how to use different methods like parent, parents, parentsUntil etc.
Siblings Traversal Methods5:56
You will learn how to use next, nextAll, prev methods etc.
Children Traversal Methods3:16
You will learn how to use methods such as children and find.
Filtering Methods7:25
You will learn how to use different filtering methods such as first, last, eq, filter, not, slice and has.
Quiz: DOM Traversal Methods

$.inArray() to Look for an Item5:23
Use $.inArray() utility function to search for an item in an array.
$.grep() to Filter an Array6:51
Use $.grep() utility function to create an array from an existing array using a filter function.
$.map() to Translate All Items in an Array6:05
Use $.map() utility function to translate all items in an array to a new array of items.
.each() to Iterate over a jQuery Object11:21
Use $.each() utility function to loop through different objects

What is AJAX?11:22
What is AJAX? Learn XMLHttpRequest object and its properties and methods.
The $.ajax() Method11:10
Learn to use $.ajax() method to make an asynchronous request using AJAX
Different Options to Configure AJAX request14:47
Learn how to send text and JSON data from AJAX method using processData option and also see how to use method and contentType options.
Three Callback Options and Alternative Constructs8:45
Learn to use success, error and complete callback options or their alternative constructs .done(), .fail() and .always()
Different Shorthand jQuery AJAX Methods13:59
Learn to use different shorthand methods such as .get(), .post(), .getJSON() and .load()

Requirements

Basic knowledge of HTML, CSS and JavaScript would be helpful

Description

=> Watch the Promo Video To Know Details of 20 Projects You are Going to Develop

=> Over 23.5 hours of content & 170+ lectures

=> Only jQuery course with jQuery Quizzes, Exercises, Hands-On Practices and 20 Unique jQuery Projects

---------------------------------------------------------------------------------------------------------------------------

Do you want to accomplish amazing things by writing just a few lines of code? Do you want to write complicated JavaScript functions easily and quickly? Do you want to create cool visual effects and animations? Do you want to develop impressive games and professional user interfaces easily? Do you want to add nice and unique features to your websites and applications?

Then, join this 100% hands-on jQuery course and ease the pain of web development and increase your productivity as a web developer.

jQuery is a very popular JavaScript library which makes front-end web development easy. jQuery simplifies JavaScript programming. You can implement a complex functionality in just 5 or 6 lines of jQuery code where it might require 25 or more lines of JavaScript code to implement the same functionality.

---------------------------------------------------------------------------------------------------------------------------

Adrian Willsher says

"This is a great course for beginners learning jQuery. The instructor is clear and has an excellent grasp on everything presented. The practical applications presented in the second half are good. I have already purchased and am looking forward to the instructor's next jQuery course."

Mihai Enuica says

"A very good, useful course, well taught with a interesting jquery projects."

eniyenzima Emmanuel Niyenzima says

"Best jQuery class at udemy!"

Veeranjaneyulu k says

"I don't have any idea about jQuery . After Completing this course, i am able to do my own scripting using jQuery. Thank you for the one of the best course for JQuery. I am excepting more sessions on angular js ,java script."

---------------------------------------------------------------------------------------------------------------------------

jQuery in Action: Build 20 jQuery Projects course helps you learn jQuery from scratch and apply your jQuery knowledge to develop unique and nice jQuery projects that you can use in your websites, web applications and mobile applications. You are going to develop unique user interface designs, cool visual effects and animations, nice features for your website and even games in this course using jQuery.

The Course Structure is as follows:

First you will understand what jQuery is and why you should learn jQuery. We will also compare JavaScript and jQuery by implementing a functionality to understand why jQuery is a "Write Less, Do More" library. Then, you will learn how to set up the jQuery development environment and the basic syntax of jQuery. Shhh.....I am also going to share a secret with you which will help you write jQuery code easily.

Then come the jQuery Selectors. Selectors will help you select the elements upon which you need to perform an action. Next is the Events section. The events are the actual action that is performed. Later, you will learn how to use different Effects and Animations to energise your pages. DOM Manipulation and DOM Traversal are two important sections where we discuss how to handle the web page on the fly.

Then comes, the Let's Develop Section where you are going to develop a number of jQuery projects that too from SCRATCH. Trust me, this section is going to boost your confidence as a front-end web developer. Different jQuery Projects available in Let's Develop section are

Accordion
Slide Panel
New Ticker
Photo Zoom In/Zoom Out Effect
Memory Game
Image Slider
Animated Graph
Animated Tooltip
Filterable Portfolio
Classic Tic Tac Toe Game
Reading Progress Indicator
Flying Bird Game (Flappy Bird Clone)
5-Star Rating System
Multi Step Form with Progress Bar
Tree View
To-Do List
Word Search Game
Click Speed Test with Timer
Online Stopwatch
Count Down Timer with Alarm

So, what are you waiting for?? Join this wonderful jQuery course NOW and let's get started !!!

Who this course is for:

Anyone who wants to learn jQuery from scratch
Anyone who wants to improve JavaScript skills
Anyone who wants to improve jQuery skills from basics to advanced
Web developers and designers who want to improve their productivity

jQuery in Action: Build 20 jQuery Projects

What you'll learn

Explore related topics

Course content

Be Familiar with jQuery (Introduction to jQuery)4 lectures • 16min

Be Ready to Start (Basics of jQuery)4 lectures • 23min

Select the Elements upon which to Act (jQuery Selectors)22 lectures • 1hr 37min

Let the Actions Happen (jQuery Events)11 lectures • 1hr 14min

Energise Your Pages (jQuery Effects and Animations)8 lectures • 1hr 3min

Handle the DOM (DOM Manipulation)11 lectures • 1hr 6min

Move through the DOM (DOM Traversal)4 lectures • 24min

Make Use of Utilities (jQuery Utility Functions)4 lectures • 30min

jQuery and AJAX5 lectures • 1hr

jQuery Plugins7 lectures • 49min

Requirements

Description

Who this course is for: