
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
Create an HTML file add a page element
Add the script tag link to the jQuery library
Add a second script tag link to a new js file named app1.js
Open the HTML in the browser check if jQuery is on the page
In the app1.js select the element, you can use the same syntax as you would with CSS. $()
Add a jQuery method named .html()
Add a string value within .html()
Add the on(‘click’) to the element and nest the update of the html inside
Add a second html() chained to the on click method with another string value
Selection of Page Elements and DOM Element selection jQuery
Create an HTML file to interact with, including elements with ids and classes.
Make a selection of the element using the tag, class and id. Output the jQuery element object into the console.
Create variables and assign the jQuery element objects and output them to the page.
Element hide and Show Methods and Animation effects
Click elements, hide the clicked elements. Add a button that will show the elements.
Select all the div’s from the page
Select the first one using first() and the last one using last()
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
Add an event to the button which shows all the divs, and the H1
Fading Effects with jQuery Elements
Make all the page divs clickable
Create variables to track the number of times the elements were clicked, and the number of elements that are currently hidden.
Update the text or html of the element after its clicked
Add a click event to the button, once clicked shows, toggles and applies different fading effects to the elements.
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 Slide
Exercise : Slide effect with jQuery
Hide the show button
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
The second show button should now be visible, add a click event on the button to show all the divs using the slideDown() function.
Add a click event to each div that does slideToggle() which should hide the div when clicked.
How to create Custom Animations with jQuery
Exercise : select and move page elements and apply custom animation effects to selected elements.
Add position relative or absolute to the page elements you want to move
Select all the elements, with button one click apply various animations with styling values
With button two click add different custom animations to the page elements
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.
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.
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.
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.
Element DOM manipulation and Selection
Exercise : Clone and update with replace page elements
For click of button one, using replaceAll and replaceWith update selected elements with new content.
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
Exercise : Adding, removing and toggling element classes
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.
Add the class of red and remove the class of blue
For the first button add a click event that adds the blue class to all the divs
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 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.
Create the stylign for the list elements, add an UL list and input and button to the HTML page
Add an event to the button when clicked will create the list item
How to get and set CSS properties with jQuery
Exercise : Get the style properties of the element
Add events to both buttons that update the classes on the divs as well update the style attribute with the CSS method.
Add an event to all the page divs. When clicked it should generate a random color and background color for the element. You can use JavaScript code for a random HEX value '#'+Math.random().toString(16).substring(2,8);
Using the CSS method add the random colors to the page element style properties.
Using the CSS method get all the properties, use an array of properties to return an object of values. Output the results into the console and out one of the page elements.
Select one of the buttons to increment the width of all the divs by 50px when clicked.
Getting and setting Element Attributes with jQuery
Exercise : Create input checkboxes within the page elements add attributes and set properties of page elements
Using a for loop, create checkboxes with attributes. Add a click event on the element that will output the value of the element from the attri of checked, the prop of checked and using is for the checked state. Output the results to the page.
Using another loop to create some input checkbox elements, then using the prop() method then set the checked boolean value. Add a click event to track and output the checked results.
Add a click event to an element, Update the value counting the clicks on that element.
Using detach() remove an element and save it into a global variable. Then on a separate event append the stored detached element to the page again. The events and properties will still be contained within that element.
Element Dimensions and properties values with jQuery Methods
Exercise : Get the dimensions of page elements
Add a class to the page elements
Add a click to the divs on the page. When the element is clicked show within the element the heights and widths including inner and outer values.
Add a click to the button to display in the console the window and document height and width values.
Traversing Descendants of Page Elements jQuery Selection
Exercise : Make a selection of an element and then navigate down to the descendants of the selected element.
Select an element and output the children of the element into the console.
Add an event listener to the first but, when clicked, get the input value and search the main element for that selector element.
When the second button is clicked select all the descendants of an element using the wildcard * and find, then apply css styling to the elements.
Traversing Siblings Page Elements and other selections with jQuery
Exercise : Add click events to all the buttons, then apply various sibling methods to traverse to the same level as siblings of the selection element.
Apply a class to all siblings of selected element
Add to a button the option to remove all element with the class of box
On click of a button add a class of box to siblings of an element that have a tag name of div.
On a button click use next() nextAll() and nextUntil() methods on page elements apply classes to the elements
On a button click use prev() prevAll() and prevUntil() methods on page elements apply classes to the matching elements.
Traversing Filtering Page Elements to select them using jQuery Methods
Exercise : Use of filtering to make selection of specific elements and traverse to the result
Add click events to all 5 page buttons
On click of the first button select an element collection and then traverse to the first() last() and eq() for selecting a specific element using the position in the collection apply styling to the resulting elements.
On the click of the second button using filter() to select matching element results apply styling to the resulting elements.
On the third button click, select the elements from the collection that do not match the request and apply styling to the resulting elements.
On the fourth and fifth buttons, try out variations of filter() and not() to make element selections traversing from the selected element, apply styling to the matching results.
Exercise : Use of filtering to make selection of specific elements and traverse to the result
Add click events to all 5 page buttons
On click of the first button select an element collection and then traverse to the first() last() and eq() for selecting a specific element using the position in the collection apply styling to the resulting elements.
On the click of the second button using filter() to select matching element results apply styling to the resulting elements.
On the third button click, select the elements from the collection that do not match the request and apply styling to the resulting elements.
On the fourth and fifth buttons, try out variations of filter() and not() to make element selections traversing from the selected element, apply styling to the matching results.
How to create a Dynamic List with jQuery project
Exercise : Dynamic page elements with jQuery
Create an array of string values
Loop through the array items using $.each() In the callback function add the value as divs to the page, add a class of box.
Select all elements with a class of ‘box’. Using each loop through the items
Select the text() value of the div element, and store it as a variable value. Then use empty() to clear contents of the element.
Create a span with the text content from the original element, append the span into the element.
Add 2 buttons into the element, one that has text of Up and the other Down.
Add a click event to the first button, selec the prev() element to the main parent of the button.
add a condition if the length of the element is greater than zero, then insert the main element before the prev() with insertBefore()
Add a click event to the second button to move the main element down. Do the same except use the next() sibling to the parent, and use insertAfter() to add the selected parent.
Apply some animations and styling to the element for better visuals of the movement.
jQuery Data Method save values into the element object
Exercise : Store a value of the text() from the clicked element which can then be restored from the data() of the element
Add a click event to all the divs
When the div is clicked get the current text() value and store it to the data()
Update the text() of the element
Add events to the buttons to use the data value of the element and output the data() value as the new text() of the element
jQuery get Method to get the index value of a page element
Exercise : Use the get() method to return the DOM element object
Select a jQuery set of elements with the selector
Use the get() and an index value of the element you want to interact with. Then use JavaScript DOM method and properties to get values from the element
Create a click on the button that will get the length of items in the jQuery selection, then loop through the items and use get the iterator value as the index returns the element. Get the textContent value of the element and add it to the page with jQuery.
jQuery index of page element index Method
Exercise : Make a selection of page elements with jQuery , return the index() value of the selected element.
On the click of the button output the elements index value into the console.
Add click events to all the page divs within the main class. Get the index value and add it to the element text()
Create an UL adding LI items to the UL. Add Click events to the LI and output their index() value into the console.
jQuery toArray Method to get the jQuery elements as DOM elements
Exercise : Select the jQuery elements as DOM elements with toArray()
Use the jQuery selector to make a selection of elements
Convert them to DOM elements with toArray()
Using JavaScript methods get the DOM elements and make updates to them
jQuery Mouse Move Events Listeners and hover Events
Exercise : attach various mouse movement events to page elements.
Add the hover() event to the divs within the main class. On enter update the background color to red and then on leave set it back to white.
Add mouseup() and mousedown() to the divs updating the text and the color of the background on the different mouse press states.
Add mouseout() and mouseleave() to the main element, check the difference
Add mouseenter() and mouseover() to the main element, check the difference
Add mouseenter() and mouseleave() to the buttons, to update the background color just like the hover() event.
On the main document track the mousemove() from the event object, get the values of pageX and pageY property values and then output them into a page element.
jQuery to listen for keyboard Events and get values from the event object
Exercise :
Using a loop create several input fields add them all to main
On the input field add keydown() method update the CSS background color and output the event method into the console including the element index() value.
On the input field add keypress() method update the CSS background color and output the keypress into the console including the element index() value.
On the input field add focus() and blur() methods update the CSS background color and output the event methods into the console including the element index() value.
On the input field add keyup() method update the CSS background color and output the event method into the console including the element index() value.
On the input field add focusin() and focusout() methods which will include the children, then update the CSS background color and output the event method into the console including the element index() value.
jQuery form Events on submit and more
Exercise : Attach events to form elements and form submission
Add a select element with options to the HTML page
On change of the select output the value to the element with the class of output.
Select the input text type element, and on change event output the value of the input field to the output element
On input field select of text add a select() method event to the element, output the active element text into the output element.
On the form submission, add an event which says in the console that the form submitted, as well add a preventDefault() to prevent the default action of form submission.
On a button add when clicked add within the callback function that the main form is submitted.
Attach events with the on Method with more powerful events
Exercise : use of on() method for adding events to future elements created after the event code is run.
Create an element with a class of box, add it to the start at the top of the page elements.
Add multiple events the the element with a class of box, click() mouseenter() and mouseleave()
Add to all the button elements, within the .btns class element, the click event with the on() method. Once clicked it should output the element index value to the text area of the element with the class of output.
Create an object with some data, then using the on() method, add a click event including the data to be sent to the callback function of adder.
In the adder() function output the event object data into the console.
Use the short hand click on the button elements, add when clicked that the background changes to red and the element index value is output into the console log.
Create page buttons and append them to the btns class element. The buttons created after the click() event was added will not have the click event.
jQuery scroll event on Browser Events and window events
Exercise : Add elements and connect the anchor tag to the elements with id, add event of scroll and resize to the Window object.
When the button is clicked, create a random value to be used for height, and a random color to be used for background color of a new element. Create a new div, set the css() add an attribute of id and append it to the body of the page.
Add a anchor tag, with a hyperlink to the # + element id and append this to the element with a class of output.
Add a scroll() event to the window and a resize() to the window. Output those events to the console.
How to create a jQuery Mole hit game
Objective of the game is to hit the moles, they will appear and disappear randomly. Click the mole to score, continue the game until the round is over and the number of moles has reached 0.
Exercise : Build dynamic and interactive game play with jQuery
Use the HTML and CSS to setup the basic game play area
Setup a global game object of data that tracks the score, gameover boolean, last hole, the number of holes for the game, the end of the moles countdown, and the total of mole to show in the round.
Build the game board with holes for the number of elements to show in the game play area, within the hole add the elements with the mole, the leaves, and the hit icons. Give them classes so that they can be selected. Create a unique hole class so that each hole can be randomly selected from the board.
Add to the start button to start the game function.
In the start game function hide the start button. Set the game score, game end counter, and game over boolean to starting values. This will allow the player to start again once the countdown of moles is complete. Launch a function that will start the random moles to show.
Create a function to output the score and countdown of the moles left. Invoke the function to update the game score.
In the starter() function use the selector to select an element, use a function to generate the random hole value to select.
In the random hole value generator, get a random number and check to see if the new value is not the same as the last value, if it is to generate a new number.
Once you have the random element hole selected, send it into a new function to showMole(). This will be the hole that the mole will show in.
In the showMole() function subtract the countdown of moles, update the score. If the countdown is less than or equal to zero then show the start button.
If the countdown is greater than zero, then generate a random value for a timer. This can be used to set a random time in milliseconds in the timeout function.
From the hole element, hide the dirt element, show the mole in the element.
Set a setTimeout() which in the callback shows the dirt element, hides the ‘mole’ and ‘hit’ class elements. Also checks if game is over, and if it is not then invokes starter() to continue the loop.
Load a file with jQuery load method
Exercise : AJAX example connects to an external file and loads the contents directly into a page element.
Create several text and html files with content that you want to load directly into your page elements.
Using a click event on the button, and the load() method select the element and in the load parameters add a string value of the path to the file.
Optional callback function, can return the response text, the response status and the entire xHR object which can then be used within the callback function. Check the status, if the status returns ‘success’ then load a message into the console.
Exercise : Make and AJAX request to a JSON file and retrieve the values as an object in the code
Create a JSON file locally and use the get() method to get the JSON object data.
Use the JSON object data by outputting the values into the web page once the button is clicked.
Make several different connections, create elements with jQuery and add the JSON response data values into the page elements
Practice connecting with different objects, try the endpoint URL in the browser to check to see if GET will work to retrieve the data.
POST data with jQuery using post method
POST requires a server response, there are not many server endpoints to test with. I’ve set up one using Google Apps Script which can be used, and returns a simple response object back from the data that was sent. You can also setup your own server endpoint using backend coding to provide a response on POST methods.
Exercise : Send data to a server using the POST method.
Create two input fields for first and last names
On the button click send the data to the server URL.
Use the post() method, create the data argument from the values in the input fields.
Add a callback on the post request, to return the response object, that will be in JSON from this endpoint. Also include the status
Check if the returned response from the server is ‘success’, and if it is output the response JSON data selecting the properties and adding the values into the web page.
GET shorthand Methods jQuery getScript getJSON methods
Exercise : jQuery offers several GET methods to either send GET data, import a JS file to use in the current file and to return response data as JSON.
Create input elements for the page using jQuery
On the first button click, make a get method request to the endpoint and retrieve the JSON data. Output the JSON data object contents to the web page. get() method
On the second button click import a JavaScript JS script file. include a function in the new js file, that can then be invoked. getScript() method
Add a new button to the page that will invoke the new JS function when clicked, outputting the contents of the input field into the browser console.
On the third button click, get the endpoint data as JSON using getJSON() method. output part of the response object data, selecting it by the property value of the object into the console of the browser.
jQuery AJAX method and callback options
Exercise : Use the ajax() method to connect to endpoints and use the response data within the web page elements.
Use the ajax() method, within the argument object add a property value for the url of the source file. Add a callback function for the success property value. With the successful request output the data values into the web page element.
Use the ajax() method and a GET method type, in the ajax argument object, set the url to the endpoint URL, set the type to GET, set the data to an object of the input field values and names, set the response data as dataType json.
Add chained methods to ajax() of done() which will fire the callback function once the connection has been successful. Use the data values returned from the server endpoint and add them into your web page elements.
Chain to the ajax() method, the fail() and always() methods and output the response data into the console.
Use the same code as the GET request, update the type to POST. This will now send the request as a POST with the data from the web page input elements.
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.