Free Online Courses for Software Developers - MrBool

Click here to login

If you don't have a registration, click here to register

Mrbool Courses

Online course

Introduction to jQuery

jQuery is a rich JavaScript library. It helps the developer to easily traverse and manipulate the DOM. It also simplifies creating events and making AJAX calls. In this jQuery Training Course, we start by downloading jQuery. Then we created a new project using Visual Web Developer and added a reference of the jQuery library to the project. We added an HTML page and dropped a reference of jQuery to the page. We then introduced $(document).ready() and showed how we can dynamically add a div to the body of the page. Play stay tuned as we discuss more jQuery functionalities in the upcoming videos.

  • Introduction

    • 1


      This is the first of a series of videos on jQuery. jQuery is a rich JavaScript library. It helps the developer to easily traverse and manipulate the DOM. It alo simplifies creating events and making AJAX calls. Watch this video
    • 2


      This video continues the discussion of the core jQuery functionalities. We start by adding a new function that will be triggered anytime the user clicks anywhere in the body of the HTML page. In the project we added a new image called flag.jpg under the images folder. Watch this video
  • Attributes

    • 4


      This video discusses the jQuery functionality that retrieves and modifies HTML tags attributes. The attr attribute is very handy to retrieve those attributes and change them. We will also see how to use the html() function to change the HTML for a specific tag. Watch this video
  • Utilities

    • 5


      This video discusses some of the utilities available in jQuery. We will start by showing how we can retrieve an element with an id. Watch this video
    • 7


      In this video, I am going to wrap up the discussion of utilities by talking about the reverse and the merge utilities. Watch this video
    • 8


      In this section we start by constructing a page with few divs, a button and two spans. The code that shows off the jQuery manipulation is discussed in the next video. Watch this video
  • Selectors

    • 10

      Spans, Divs, and Lists within the divs

      This class will discuss some of the jQuery selectors in detail. First we start by creating a page that contains spans, divs, and lists within the divs. We add some styles for visual appearance. We start first with the hover functionality. Watch this video
    • 11


      In this video, I am continuing my discussion of selectors. I start by creating the main HTML page that contains a table of employees and their salaries. Under the table I add a list of three radio buttons. The table contains a header that explains the table content. Watch this video
  • Events

    • 12


      Before moving into events, this video continues the example on selectors. We use a table of employees and their salaries to illustrate how we can select the nth-row and the effect of hovering over rows. Watch this video
  • Effects

    • 13

      Show and hide the paragraph.

      This video will start the discussion of the animation effects using jQuery. We display a paragraph and a button on the page. Then we add jQuery code that allows us to show and hide the paragraph. Watch this video
    • 14


      This video continues the discussion of animation. We create a similar idea by placing the definition of jQuery in a span. We place a button right above the definition (which is initially hidden). when the user clicks on the button, the definition is faded in. Watch this video