jQuery Training

History of jQuery

• 2006 – John Resig creates jQuery
• 2006 – jQuery is licensed under dual license
• 2012 – jQuery drops GPL and is MIT licensed
• 2013 – jQuery 2.0 drops support for IE 6-8
• 2016 – jQuery 3.0 supports Promises and HTML5

Purpose of jQuery

• Simplify common JavaScript operations
  1. DOM manipulation
  2. Events
  3. Animation
  4. Widgets
• Additional functionality available through widgets and plugins.

jQuery Difficulty Level

• Easy to use
• Gateway to JavaScript

jQuery: The Good

• Ease of use
• Easy to find example code

jQuery: The Bad

• Non-optimized code can affect performance
• Over-reliance on jQuery causes code bloat

jQuery: The Future

• jQuery will remain widely used
• Need for jQuery on new projects will decline as JavaScript improves

Syntax

• Use jQuery object
• Select DOM elements
• Perform actions on selected elements using jQuery methods

Including the jQuery Library

• <script src="path-to-jquery.js" integrity="###"	 crossorigin="anonymous"></script>

jQuery Variables

• Takes a selector as its parameter
• Returns an object
• Most often called using the $() shorthand method

jQuery Selectors

• Used for selecting DOM nodes
• CSS-style selectors
  • $('.error')
  • $('#mainNav)
• jQuery-specific selectors
  • attribute value
  • hierarchy
  • pseudo-selectors

jQuery Filters

• Further refine node selection. Examples:
  • :first
  • :eq
  • :even
  • :last
  • :odd

jQuery Methods

• Can accomplish a wide variety of tasks
  • ready()
    • Waits until the page's DOM is ready
    • Executes the code passed to it
    • Has several different, but equivalent, forms
      • $( handler )
      • $( document ).ready( handler )
      • $( "document" ).ready( handler )
      • $( "img" ).ready( handler )
      • $().ready( handler )

jQuery DOM Element Methods

• get()
• index()
• size()
• toArray()

Event Methods

• on()
• off()
• mouseover()
• focus()
• click()
• error()
• load()

Manipulation Methods

• addClass()
• after()
• append()
• clone()
• css()
• html()
• remove()

Effect Methods

• fadeIn()
• fadeOut()
• hide()
• show()
• toggle()

Chaining

• $('#activate').on('click',function()
  
  	{ $('.active')
  			.fadeTo('fast','1.0')
  			.css('backgroundColor','yellow')
  			.css('fontSize','2em');
  	});

Keep Learning jQuery

by taking a Webucator jQuery Class https://www.webucator.com/webdev-training/jquery-training.cfm

"Easily the best technical course I've taken."

"Small class sizes. The textbook is very, very good. It's a reference manual that can actually stack up against a cursory Google search. Conference software was very easy to pop in and out of."