Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Complete jQuery Course Modern for Beginners to Advanced
Rating: 4.0 out of 5(578 ratings)
10,177 students

Complete jQuery Course Modern for Beginners to Advanced

Modern jQuery coding for interactive and dynamic web pages animations event handling AJAX page element updates and more
Created byLaurence Svekis
Last updated 1/2023
English

What you'll learn

  • Create amazing web content with jQuery
  • Use jQuery to create interactive content
  • Use jQuery to load dynamic content to your web page
  • Learn about using jQuery within your web development process
  • Learn about the DOM and how to connect to page elements
  • Create animations with jQuery
  • Add effects like fading and sliding to page elements
  • Insert and create new elements
  • Update existing page elements
  • Change styling of page elements
  • Create lists and real world coding projects
  • Traverse the page elements navigate related page elements
  • Mouse and keyboard events create interactive content
  • Use of AJAX and Get and Post to connect to web API data JSON
  • Manipulate content of elements on the page

Course content

6 sections76 lectures10h 7m total length
  • Introduction to jQuery course what to expect step by step learning2:43
  • Source Code and Resources28:04
  • Getting started with jQuery adding it to your HTML9:47

    Getting started with jQuery adding it to your HTML

    How to add jQuery to your HTML and create a simple element selection, event and manipulation of element content with jQuery.


    Exercise : Create a file add jQuery and write some jQuery Code


    1. Create an HTML file add a page element

    2. Add the script tag link to the jQuery library

    3. Add a second script tag link to a new js file named app1.js

    4. Open the HTML in the browser check if jQuery is on the page

    5. In the app1.js select the element, you can use the same syntax as you would with CSS. $()

    6. Add a jQuery method named .html()

    7. Add a string value within .html()

    8. Add the on(‘click’) to the element and nest the update of the html inside

    9. Add a second html() chained to the on click method with another string value

  • Selection of Page Elements and DOM Element selection jQuery10:43

    Selection of Page Elements and DOM Element selection jQuery

    1. Create an HTML file to interact with, including elements with ids and classes.

    2. Make a selection of the element using the tag, class and id. Output the jQuery element object into the console.

    3. Create variables and assign the jQuery element objects and output them to the page.

  • Element hide and Show Methods and Animation effects11:21

    Element hide and Show Methods and Animation effects

    Click elements, hide the clicked elements. Add a button that will show the elements.


    1. Select all the div’s from the page

    2. Select the first one using first() and the last one using last()

    3. Add a click event to the div’s. When clicked it should select the element from the click event that was clicked. Be careful as this will select the nested elements. Update the html ro say clicked. Update the element with text or ready. Then apply the hide() function to the element

    4. Add an event to the button which shows all the divs, and the H1

  • Fading Effects with jQuery Elements14:35

    Fading Effects with jQuery Elements

    1. Make all the page divs clickable

    2. Create variables to track the number of times the elements were clicked, and the number of elements that are currently hidden.

    3. Update the text or html of the element after its clicked

    4. Add a click event to the button, once clicked shows, toggles and applies different fading effects to the elements.

    5. Create a variable that will toggle the opacity of the button element, every time its clicked it should change the opacity from 0.5 to 1 and back.

  • Sliding Effects on Page Elements create Slide5:28

    Sliding Effects on Page Elements create Slide

    Exercise : Slide effect with jQuery

    1. Hide the show button

    2. Add a click event on the hide button which will hide all the page divs using the slideUp() and invoke a function that will toggle both buttons

    3. The second show button should now be visible, add a click event on the button to show all the divs using the slideDown() function.

    4. Add a click event to each div that does slideToggle() which should hide the div when clicked.

  • How to create Custom Animations with jQuery10:19

    How to create Custom Animations with jQuery

    Exercise : select and move page elements and apply custom animation effects to selected elements.

    1. Add position relative or absolute to the page elements you want to move

    2. Select all the elements, with button one click apply various animations with styling values

    3. With button two click add different custom animations to the page elements

  • How to Insert Elements and Contents into and outside elements14:38

    How to Insert Elements and Contents into and outside elements

    Exercise : adding new content and elements to the page, both inside and outside the selected element. Getting input values and using them in code. Insert before and after.

    1. Create new page elements, both adding it to a variable and also as a jQuery object directly. Create a loop to add clickable buttons that output the button text content into the console. Try adding before and after page elements.

    2. On click of the first button, get the text value of the input element. Try append and prepend of page elements. Try remove method on selected element.

    3. On the second button create an element that can be added inside the element try both append and appendTo. Note the difference in the statement.

  • How to Element DOM manipulation and Selection with jQuery8:31

    Element DOM manipulation and Selection

    Exercise : Clone and update with replace page elements

    1. For click of button one, using replaceAll and replaceWith update selected elements with new content.

    2. Clicking button two using clone() copy a selected element and add the new copied element to an existing element with prependTo()

  • Classes DOM manipulation adding and removing element class with jQuery5:57

    Classes DOM manipulation adding and removing element class

    Exercise : Adding, removing and toggling element classes

    1. Add a click event to all the divs. When clicked, check if the element hasClass() and set the text to a value from the result.

    2. Add the class of red and remove the class of blue

    3. For the first button add a click event that adds the blue class to all the divs

    4. For the second button add a click event that toggles both red and blue classes on all the divs.

  • jQuery Dynamic List Project Interactive elements with jQuery13:03

    jQuery Dynamic List Project Interactive elements with jQuery

    jQuery Dynamic List Project Interactive elements with jQuery


    Exercise : Create an interactive list that can add new items, the items in the list can be crossed out and also removed with the push of the button.

    1. Create the stylign for the list elements, add an UL list and input and button to the HTML page

    2. Add an event to the button when clicked will create the list item

Requirements

  • JavaScript experience
  • CSS and HTML experience
  • Desire to learn jQuery

Description

Downloadable Guide Included

Source code and step by step lessons explaining how to write jQuery Code.

Start here with jQuery to create dynamic web page content, quickly and easily.

This is the Complete jQuery Course the only one you need to learn how to code with jQuery.

  • Get lifetime access

  • Taught by an instructor with over 20 years experience ready to help you learn

  • Bonus 100 page PDF source code and resource guide INCLUDED.

  • Easy to watch and learn videos

  • Exercises and challenges to help get you coding!

Fast Paced Introductory course to learning jQuery Quick and easy Guide to working with jQuery Learn to add jQuery to your webpages most popular JavaScript library website

This course is designed to demonstrate and help you learn the core concepts of working with jQuery.  jQuery can help you develop web projects quicker!

Learn the fundamentals of jQuery and find out why its so amazing to work with.  You can do so many great things with jQuery. 

JQUERY makes creating DYNAMIC and INTERACTIVE web content EASY!

jQuery Course includes :

  • Getting started with jQuery adding it to your HTML

  • Selection of Page Elements and DOM Element selection jQuery

  • Element hide and Show Methods and Animation effects

  • Fading Effects with jQuery Elements

  • Sliding Effects on Page Elements create Slide

  • How to create Custom Animations with jQuery

  • How to Insert Elements and Contents into and outside elements

  • Element DOM manipulation and Selection

  • Classes DOM manipulation adding and removing element class

  • jQuery Dynamic List Project Interactive elements with jQuery

  • How to get and set CSS properties with jQuery

  • Getting and setting Element Attributes with jQuery

  • Element Dimensions and properties values with jQuery Methods

  • Traversing Descendants of Page Elements jQuery Selection

  • Traversing Ancestors of Page Elements parent methods with jQuery

  • Traversing Siblings Page Elements and other selections with jQuery

  • Traversing Filtering Page Elements to select them using jQuery Methods

  • How to create a Dynamic List with jQuery project

  • jQuery Data Method save values into the element object

  • jQuery get Method to get the index value of a page element

  • jQuery index of page element index Method

  • jQuery toArray Method to get the jQuery elements as DOM elements

  • jQuery Mouse Move Events Listeners and hover Events

  • jQuery to listen for keyboard Events and get values from the event object

  • jQuery form Events on submit and more

  • Attach events with the on Method with more powerful events

  • jQuery scroll event on Browser Events and window events

  • How to create a jQuery Mole hit game

  • Load a file with jQuery load method

  • Get JSON data with jQuery get method

  • POST data with jQuery using post method

  • GET shorthand Methods jQuery getScript getJSON methods

  • jQuery AJAX method and callback options

This course is designed to help you learn jQuery quickly.  You should have a basic understand of JavaScript in addition to HTML and CSS to enhance your learning experience.

jQuery is easy to use and  just makes sense.  The methods and concepts are easy to pickup and start using.

This course covers everything you need to know about using jQuery.  By the end of the course you will better understand how jQuery works and how you can use it to create better quicker web pages.   

Web visitors are expecting interaction and dynamic content, jQuery help deliver!

See jQuery in action and I guarantee you will want to apply it to your own code.  It really is fun to use, and simplifies many of the popular JavaScript functionality.

Topics covered in the course include

  • How to add jQuery to your website

  • Basics of jQuery and JavaScript

  • Event listeners

  • Traversing elements to better select HTML content

  • Adding CSS to wow your visitors

  • jQuery Effects and Animations

  • jQuery and AJAX

jQuery is super powerful, lightweight and easy to add to your webpages.  Its JavaScript but only better.

I am here to help you learn jQuery and ready to answer any questions you may have.

 jQuery is an in demand skill, and learning jQuery will help to separate you from the crowd who don't know jQuery.

Want to know more, what are you waiting for take the first step.  Join now to start learning  jQuery today.

Introduction to jQuery

jQuery makes it easy to get started with building interactive and dynamic web content.  With basic knowledge of HTML and CSS you can start creating interaction.

jQuery is just a JavaScript library and knowledge of JavaScript is helpful for the understanding and debugging of code. 

jQuery provides an easy to use solution for web developers to add smooth animations, handle web page interactions and events, to navigate page elements for selection, update and manipulate element properties and contents, and make AJAX requests for data.

Designed for anyone who wants to learn jQuery.  Prior HTML and CSS experience is recommended.  Learn by example, each lesson has its own challenge to help you get more familiar with specific coding objectives.   Source code is included that will help guide you through the lesson content with helpful tips and resources.

jQuery is used because of its ease of use, making it simple to create amazing animations and web page experiences.  There is a large community for documentation and tutorials.  It works across browsers and standardizes the experience so that all the browsers display the same way.  There are a vast number of plugins which can help create even more wonderful things with code.  The code is also easier to read as the functions used in jQuery are simple and have semantic meaning. 

There are many versions of jQuery suggested to use the latest 3.* version

jQuery is designed to simplify the HTML DOM tree traversal and manipulation of page elements.  It provides an excellent way to create CSS animations, handle events and AJAX requests.



Who this course is for:

  • Anyone who wants to learn jQuery
  • Web developers
  • Application developers
  • Anyone wanting to develop professional dynamic websites
  • Web developers and programmers wanting to improve their skills in web development