You'll need:

git clone https://github.com/AIS-BYU/vaf-jquery-2015.git

or download it from https://github.com/AIS-BYU/vaf-jquery-2015

       IDE +  (         or       ) + CODE

#Python 3
python3 -m http.server
#Python 2 and below
python -m SimpleHTTPServer


#Node.js
npm install http-server -g
*You may need to sudo on Mac
http-server

write less, do more.

Presented by

What is it?

jQuery is a fast and feature-rich JavaScript library. It simplifies things like

  • DOM traversal and manipulation 

  • event binding and handling

  • animations and effects

  • and Ajax calls

​through an easy-to-use API that works across almost all browser versions

Why use jQuery?

  1. Promotes simplicity and readability
  2. Replaces other technology, like Flash
  3. Cross-browser compatibility
  4. Amazing plugin support
  5. Popularity
    • Used by 50 million+ sites

Javascript vs. jQuery

// Vanilla JavaScript 
var btn = document.getElementById('btn'), 
    msg = document.getElementById('msg'); 

function setMessage() { 
    // update the message 
    msg.innerHTML += ' World'; 
    // remove the event listener 
    if (btn.removeEventListener) { 
        btn.removeEventListener('click', setMessage, false); 
    } else if (btn.detachEvent) { 
        btn.detachEvent('click', setMessage); 
    } 
} 

// check for supported event subscription method 
if (btn.addEventListener) { 
    btn.addEventListener('click', setMessage, false); 
} else if (btn.attachEvent) { 
    btn.attachEvent('click', setMessage); 
}

Javascript vs. jQuery

// jQuery 
$('#btn').on('click', function() { 
    $('#msg').append(' World'); 
});

Document ready

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

To ensure that your code runs after the browser finishes loading the document, jQuery has a statement known as the ready event:

Q/A

Why would you want to wait until everything in the document is loaded?

Selectors

The most basic concept of jQuery is to "select some elements and do something with them."

Selectors

/** By ID **/
$( '#myId' ); // Note IDs must be unique per page

/** By Class Name **/
$( '.myClass' );

/** By Compound CSS Selector **/
$( '#contents ul.people li' );

/** By Attribute **/
$( 'input[name="first_name"]' ); 
// Beware, this can be very slow in older browsers

Event Binding

two syntaxes

// A little more concise
$( 'elem' ).event(...)

//For binding to 2+ events
//A little more readable
$( 'elem' ).on( 'event', ... )

example:

$('.btn').click(function(){ alert("Click"); });

$('.btn').on('click', function(){ alert("Click"); });

Animations

jQuery Core comes with several animations.
jQuery UI offers many more.

$( '.btn' ).on( 'click', function(){ 
    $( this ).fadeOut();
});
.hide()
.show()
.toggle()
.fadeOut()
.fadeIn()
.fadeToggle()
.slideUp()
.slideDown()
.slideToggle()

Exercise 1

Enable the dropdown menus

  • Select dropdown button
  • Toggle dropdown menu on click

Hide the Notification element 

  • Select notification
  • Fade out on one of these events
    • click
    • dblclick
    • mouseenter

Exercise 1 Solution

//Notification solution
$( '.notification' ).on( 'click', function(){
  $( this ).fadeOut();
});

//Dropdown solution 1
$( '.dropdown-toggle' ).on('click', function(){
  $( this ).siblings( '.dropdown-menu' ).fadeToggle();
});

// Dropdown solution 2
$( '.tab-bar > li' ).on( 'click', function(){
  $( this ).children( '.dropdown-menu' ).slideToggle();
});

NOTE: Only use ONE of the solutions for the dropdown menu. Adding them both will cause conflicts.

$.ajax()

Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page. 


Different browsers implement the Ajax API differently. jQuery provides Ajax support that abstracts away painful browser differences.

$.ajax()

$.ajax({
  url: "test.html",
  statusCode: {
    404: function() {
      alert( "page not found" );
    }
  }
}).done(function( html ) {
  $( this ).addClass( "done" );
  $( this ).append( html );
});

Example

$.getJSON()

Shorthand .ajax() call

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});
$.getJSON( 'ajax/test.json', function( data ) {
  $( 'body' ).append( data );
});

$.each()

The .each() method makes looping more concise and less error-prone.

Each time the callback runs it is passed the current loop index, beginning from 0. The callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Exercise 2

  • Pull data from /data/customer.json
  • Loop through each record to create a row
  • Select the table body element
  • Append that row

Exercise 2 Solution

$( '#load-data' ).on( 'click', function(){
  $.getJSON( 'data/customer.json', function( result ){
    var data = result.data;

    $.each( data, function( key, value ){
      var tbl_row = '<tr>';

      $.each( value, function( k, v ){
        tbl_row += '<td>' + v + '</td>';
      });

      tbl_row += '</tr>';

      $( 'table tbody').append( tbl_row );
    });
  });
});

Exercise 2 Solution

$( '#load-data' ).on( 'click', function(){
  $.getJSON( 'data/customer.json', function( result ){
    var tbl = $( 'table tbody' );
    $.each( result.data, function(){
      var tbl_row = '<tr>';
      $.each( $( this ), function(){
        tbl_row += '<td>' + this + '</td>';
      });
      tbl_row += '</tr>';
      tbl.append( tbl_row );
    });
  });
})

2

This is an optimized solution that I did not share in the forum. It uses some simplifications to make the code a little less complex.

jQuery 202

  • Deferred Objects/Promises
    • https://api.jquery.com/category/deferred-object/
  • jQuery UI 
    • http://jqueryui.com/
  • jQuery Plugins 
    • https://plugins.jquery.com/
Made with Slides.com