Impromptu jQuery tutorial - Ottowa Feb 28, 2013

jquery-tutorial.md

Slide decks:

• http://www.slideshare.net/toadh/jquery-tutorial-14977468
• http://www.slideshare.net/AlmogBaku/drupal-javascript-14718275
• http://www.slideshare.net/joern.zaefferer/stackoverflow-devdays-jquery-introduction-for-developers

Tutorials:

• http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
• http://www.codecademy.com/courses/web-beginner-en-bay3D
• http://drupal.org/node/304258#5.-the-drupal-javascript-api

jQuery snippets to run in the console

Replaces images with conservative.ca logo:

jQuery('img')
  .attr('src','http://www.conservative.ca/wp-content/themes/conservative/images/featureMenu-navMenu-Conservative-en.png')

Remove all li tags (list-item):

jQuery('li').remove();

Without jQuery, get the element with id="logo" and (assuming it's a link) make it pont to drupal.org:

logo = document.getElementById('logo');
logo.href='http://drupal.org';
console.log(logo.href);

Example

• http://interactingwithprint.org/
  • see http://interactingwithprint.org/sites/all/modules/custom/iwp_mod/js/iwp-mod.js