• jQuery Selectors
• DOM traversal and modification
• Animation Effects
• Interaction Helpers
• Interface components like Datepickers and Accordions
  
• How to use plugins to extend jQuery’s capabilities
• How to make asynchronous JavaScript and XML calls

• HTML5 and CSS3: Essentials
  

• HTML5 and CSS3: Advanced
  

• Using JavaScript or equivalent experience
  

• A scripting language is a programming language that allows control of one or more software applications. 
  
• "Scripts" are distinct from the core code of the application, as they are usually written in a different language. 
  
• Scripts are often interpreted from source code or bytecode, whereas the applications they control are traditionally compiled to native machine code. 
  
• Scripting languages are nearly always embedded in the applications they control.
  

If it walks like a duck and it quacks like a duck, then it is a duck.

•  Treats functions as first-class citizens. 
  
• This means the language supports:
• Passing functions as arguments to other functions.
• Returning them as the values from other functions.
• Assigning them to variables or storing them in data structures.
• Anonymous function (AKA function constant, function literal, or lambda function) 
• A function defined, and possibly called, without being bound to an identifier.

• Java is a statically typed language; JS is dynamic.
  
• Java is class-based; JS is prototype-based.
• Java uses block-based scoping; JavaScript uses function-based scoping.
• Java is a full feature, robust, LARGE, programming language. JS is a scripting language.

• It dramatically reduces the amount of code that needs to be written compared to pure Javascript.
• Less development time 
• More readable code
• It is easier to understand than scripting with pure Javascript. 
  
• The documentation is extremely well organized and the community is very active with helping out anyone who may be struggling with a snippet of code.
  
• It makes using Ajax extremely easy.
• Handles a lot of cross browser JS compatibility issues for you.

• Find - HTML elements on a page
• Change - HTML elements on a page
• Listen - To user actions
• Animate - Content on a page
• Communicate - Over the network to fetch and exchange data

• Commonly referred to as "The DOM"
• A tree-like structure generated by the browser
• Describes relationships in HTML
• Nodes
• Parent
• Child
• Sibling
• API for CSS & JS
• Allows us to find and manipulate HTML elements

• Element's text and attributes are considered nodes
• Nodes can have Parent and Child relationships
• Special Relationships
• First Child
• Last Child

• A page can't be manipulated safely until the document is "ready." 

jQuery(document).ready(function(){  // Your code...});// OR$(function() {    // Your code...});

• jQuery detects this state of readiness for you. 
  
• Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute

jQuery(document).ready(function(){
  // Your code...
});
// OR
$(function() {
    // Your code...
});

 window.jQuery = window.$ = jQuery;

• ID
• Class
• Element
• Attribute
  
• Compound CSS Selector
  

 // jQuery
$('#myID');

// JavaScript
document.getElementById('myID');

// jQuery
$('.myClass');

// JavaScript
document.getElementsByClassName('myClass');

• A NodeList is a host object and is not subject to the usual rules that apply to native JavaScript objects. 
  
• The NodeList object consists of a length property and access to its members via square bracket property access syntax.  Similar to and Array but NOT an Array.
  
• You can use this API to create an Array containing a snapshot of the NodeList's members
  

var nodeList = document.getElementsByTagName('myClass');
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}

 // jQuery
$('div');

// JavaScript
document.getElementsByTagName('div');

// jQuery$("input[name='first_name']");
// JavaScriptfunction getElementByAttributeValue(attribute, value)
{
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
   {
    if (allElements[i].getAttribute(attribute) == value)
    {
      return allElements[i];
    }
  }
}

// jQuery$("#contents ul.people li");

// JavaScript// Would be too long to fit onto a slide...

<h1></h1>
<ul id="places">
  <li>Chicago, IL</li>
  <li>Boulder, CO</li>
  <li class="promo">New York, NY</li>
</ul>

1. Find the <h1> element and change its text to say "Where do you want to go?"
   
2. Find all of the <li> elements and modify their text to say "St. Louis, MO"
   
3. Find the element with the class of "promo" and make its text red

• Choosing good selectors is one way to improve JavaScript's performance. 
• A little specificity – for example, including an element type when selecting elements by class name – can go a long way. 
• On the other hand, too much specificity can be a bad thing. 
• A selector such as #myTable thead tr th.special is overkill if a selector such as #myTable th.special will get the job done.
• Wherever possible, make selections using IDs, class names, and tag names.
  

if ( $( "div.foo" ) ) {
    ...
}

• jQuery doesn't cache elements for you. If you've made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.
  
• Once the selection is stored in a variable, you can call jQuery methods on the variable just like you would have called them on the original selection.
  
• A selection only fetches the elements that are on the page at the time the selection is made. If elements are added to the page later, you'll have to repeat the selection or otherwise add them to the selection stored in the variable.
  

<ul>
    <li>
        <span>
            <i>Foo</i>
        </span>
    </li>
    <li>Bar</li>
</ul>

 <div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>