More jQuery

Slides: http://www.teaching-materials.org/jquery2/

Review: JS Functions

//define a function
var sayHello = function (name) {
  console.log("Hello, " + name + "!");
}

//call a function 
sayHello("Girl Develop It");

Remember: Callbacks

Review: JS Callbacks

var sayHello = function (name) {
  console.log("Hello, " + name + "!");
}

var textAFriend = function (name, callback) {
  callback(name);
}

//call the function with a named callback function
textAFriend("Girl Develop It", sayHello);

Review: JS Callbacks

var sayAwesome = function (name, callback) {
  callback(name);
}

//call the function with an anonymous callback function
sayAwesome("Girl Develop It", function() {
  console.log("You are awesome " + name + "!");
});

Events

// First Example, with named callback & .on
var onButtonClick = function() {
  console.log('clicked!');
};

$('button').on('click', onButtonClick);


// Second Example, with anonymous callback & .on
$('button').on('click', function () {
  console.log('clicked!');
});


// Third Example, with .click (& a named callback)
$('button').click(onButtonClick)

Follow along: http://jsbin.com/jiwoxef/edit

Events


Preventing Default Events

//default event for clicking on link is to go to new page
$('a').on('click', function (event) {
  event.preventDefault();
  console.log('Not going there!');
});
//default event is to submit form and reload page
$('form').on('submit', function (event) {
  event.preventDefault(); 
  console.log('Not submitting, time to validate!');
});

Effects & Animation


//on page load
$('.kitty-image').show(3000);

$('.kitty-image').fadeIn(3000);

//with an event handler, as a callback
$('button').click(function() {
  $('.kitty-image').show();
});

$('button').mouseover(function(){
  $(this).css('color', 'red');
});

Exercise Time!

click here!

jQuery Plugins


"If you want to create an animation, effect, or UI component, chances are pretty good that someone has done the work for you already."

plugins.jquery.com



Which plugin should you pick?

jQuery Plugin Usage

  • Download the plugin and associated files from the site or github repo.
  • Copy them into your project folder.
  • In the HTML, reference any associated CSS files.
    • <link rel="type/stylesheet" type="text/css" href="tablesorter.css">
  • In the HTML, add a <script> tag for the jQuery plugin itself.
    • <script src="lib/tablesorter.js"><script>
  • In the JavaScript, call the jQuery plugin on your DOM.
    • $('table').tableSorter();

Exercise Time!

click here!

jQuery Patterns and Anti-Patterns


Pattern: name variables with $ 

var $myVar = $('#myNode');

Storing References

Pattern: store references to callback functions 

var myCallback = function(argument) {
  // do something cool
};

$(document).on('click', 'p', myCallback);

Anti-pattern: anonymous functions 


$(document).on('click', 'p', function(argument) {
  // do something anonymous
});

Chaining


banner.css('color', 'red');
banner.html('Welcome!');
banner.show();

Is the same as:

banner.css('color', 'red').html('Welcome!').show();

Is the same as:

banner.css('color', 'red')
       .html('Welcome!')
       .show();

DOM Readiness

Broken code: DOM manipulation and event binding in the <head> 

<head>
  <script>
    $('body').append( myNode );
  </script>
</head>

DOM Readiness

Pattern: If you need to load a script in the <head>, wait for the rest of the DOM to be ready before executing 

<body>
  //all your other HTML code
  <script>
    $(document).ready(function() {
      // do something when the DOM is fully loaded
    });
  </script>
</body>

jQuery


...is great.

But do not become a jQuery-dependant!

jQuery


docs.jquery.com