JQuery Course

 

JQuery Course Overview

JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Too much good information is spread across corners of the web, languishing in blog and forum posts, often just out of reach of people who need it, while the same questionable advice is duplicated across even more questionable sites. Help us stem the tide and educate todays and tomorrow’s web developers.

 

JQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin.

Anyone interested in learning JQuery for developing web applications with improving JavaScript skills to help with their current job or to find a new role.  This is an extended framework in development using JavaScript.

You should have basic knowledge of HTML & CSS. Basic knowledge of JavaScript or another programming language is beneficial. This course is for you if you just want to learn jQuery from scratch or if you want to speed up your JS development

There are more opportunities in the market with JQuery as Application developer, web developer, UI developer, JavaScript developer, product developer in IT companies WIN IT, CGI, Accenture, delloitte, Apps associate and many more.

The main concepts covered in the course: JQuery Introduction, Selectors, Style Class Manipulation, DOM Manipulation, Events, Utility Functions, Ajax, Advanced Ajax, Parsing JSON, Animations and Effects with jQuery and jQuery UI

JQuery Course Syllabus

JQuery Introduction

  • Target Background
  • References
  • Unit Topics
  • What is jQuery?
  • Benefits of Using a JavaScript Library
  • jQuery Example
  • CSS Selectors
  • How to Use jQuery
  • Practical Usage Notes
  • Background – DOM
  • Background – DOM Ready Events
  • Background – JavaScript Functions
  • The jQuery Function Object
  • What Does the $() Function Take as Argument?
  • What Does the $() Function do?
  • The jQuery Wrapper
  • The jQuery Wrapper as an Array-Like Object
  • Note: innerHTML() vs. .html()
  • jQuery Wrapper Chaining
  • API Function Notation
  • Handling DOM Ready Event
  • xhtml Note

Selectors

  • Background: The Sizzle Selector Engine
  • Selecting Elements by Attribute
  • Pseudo-Selectors
  • Form Pseudo-Selectors
  • Faster Selection
  • Selecting Elements Using Relationships
  • Selecting Elements Using Filters
  • More on Chaining: .end()
  • Testing Elements
  • Is the Selection Empty?
  • Saving Selections
  • Iterating Through Selected Elements Using .each()
  • JavaScript Methods
  • JavaScript “this”
  • Function Context
  • The Function call() Method
  • .each() Revisited

Style Class Manipulation

  • Two Options
  • Specifying Style Properties
  • Setting Style Properties
  • .addClass() / .removeClass()
  • Defining a Stylesheet
  • Setting & Getting Dimensions
  • Attributes

DOM Manipulation

  • The $ Function Revisited
  • Getters and Setters
  • The text() Element Method
  • Appending DOM Elements
  • Removing DOM Elements
  • Performance

Events

  • Event Overview
  • Old School: Event Handling Using HTML Element Attributes
  • Unobtrusive JavaScript
  • Unobtrusive JavaScript Example
  • Multiple Handlers
  • Using jQuery Wrapper Event Registration Methods
  • The .bind() Method
  • Event Propagation
  • Handlers for Elements Before They Exist!
  • The Event Object
  • Triggering Events

Utility Functions

  • The jQuery Object Revisited
  • Functions May Have Methods
  • A jQuery Utility Function: $.trim()
  • $.each()
  • Example jQuery Utility Functions

Ajax

  • Ajax Overview
  • The Browser & the Server
  • The Ajax Request
  • The Ajax Response
  • Sending an Ajax Request With jQuery – The General Case
  • When this code is executed…
  • Sending an Ajax Request With jQuery – Simpler, Typical Case
  • Data Types
  • The .data() method

Advanced Ajax

  • A Form Example
  • An Ajax Form Example
  • Serialize()
  • Get vs. Post
  • More on Query Strings
  • ajaxStart() and ajaxError()

Animations and Effects with jQuery and jQuery UI

  • What is jQuery UI?
  • Can I do Animations and Effects using jQuery only?
  • Hiding Elements with jQuery
  • Using .hide() and .show() in jQuery
  • Alternating an Element’s Visibility in jQuery
  • Adjusting the Speed in jQuery
  • Providing a Handler in jQuery
  • Using .slideUp() / .slideDown() methods in jQuery
  • jQuery UI Categories
  • jQuery UI Interactions: Droppable and Draggable
  • Droppable and Draggable More Complete Exampl
  • jQuery UI Widgets: Datepicker
  • jQuery UI Widgets: Autocomplete

Parsing JSON

  • JSON
  • Reading JSON from the Server Using Ajax
  • Example file contents
  • Using the Results
  • Optimized Version
  • Getting More From the Response
  • jqXHR Methods
  • POST vs. GET
  • Invalid JSON
  • Using $.ajaxSetup()

Plugins

  • What is a plugin?
  • Goal
  • Self-Executing Anonymous Functions
  • Meeting Our Goal
  • Prototype Objects
  • The jQuery Wrapper Class Revisited
  • Example Plugin
  • Using the Plugin