Skip to content

Latest commit

 

History

History
145 lines (102 loc) · 3.3 KB

wk02_day05.md

File metadata and controls

145 lines (102 loc) · 3.3 KB
Raw

Week 02, Day 05.

14 / 08 / 2015

What we covered today:

Events

var onButtonClick = function() {
  console.log('clicked!');
};

$('button').on('click', onButtonClick); // Attaching an event handler with a defined function to the button

$('button').on('click', function () { // Attaching an event handler with an anonymous function to the button
  console.log('clicked!');
});

$('button').click(onButtonClick)

Other Event Types

  • Keyboard Events - 'keydown', 'keypress', 'keyup'
  • Mouse Events - 'click', 'mousedown', 'mouseup', 'mousemove'
  • Form Events - 'change', 'focus', 'blur'

Arguments get passed into callbacks by default.

var myCallback = function (event) {
    console.log( event );
    // The event parameter is a big object filled with ridiculous amounts of details about when the event occurred etc.
};

$('p').on('mouseenter', myCallback);

Preventing Default Events

$('a').on('click', function (event) {
    event.preventDefault();
    console.log('Not going there!');
});
$('form').on('submit', function (event) {
    event.preventDefault();
    console.log('Not submitting, time to validate!');
});

Effects and Animations

$('#error').toggle(1000);

$('#error').fadeIn();

$('#error').show(1000, function(){
    $(this).addClass('redText')
});

jQuery Patterns and Anti-Patterns

// Pattern: name variables with $
var $myVar = $('#myNode');

// Pattern: bind events to the document or "body"
$("body").on('click', 'a', myCallback);

// Storing References
// Pattern: store references to callback functions
var myCallback = function(argument) {
  // do something cool
};

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

// Anti-pattern: anonymous functions
$("body").on('click', 'p', function(argument) {
  // do something anonymous
});

Chaining jQuery Functions

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();

Read here for more information

Have a crack at these exercises.

Plugins with jQuery

To Find Plugins

How to select a good plugin

  • Well documented
  • Flexible
  • Community
    • Number of forks and issues
  • Actively maintained?
  • File size
  • Browser compatibility
  • Responsive

For more details, go here.

How to use a plugin

  • Download the plugin and associated files from the site or Github repository
  • Copy them into your project folder
  • In the HTML, reference any associated CSS
  • After you reference jQuery, and before you reference your own code - add the script tag that references the plugins JS file(s)

Give this a go