jQuery Commands

jquery_commands.js

// Wait until document is ready
$(function(){
  
  // Click any anchor tag and an element with id 'box' will fade out 'fast.'
  // You can also pass fadeOut() a milliseconds argument.
  $("a").click(function(){
    $("#box").fadeOut('fast');
  });
  
  // Click any anchor tag and turn all anchors inside of p tags to red.
  $("a").click(function(){
    $("p a").css("color", "red");
  });
  
  // Click an element with id 'box' and it animates in 2 steps.  Moves right 300 px and shrinks to 50 px
  $('#box').click(function() {
    $(this).animate({"left" : "300px" }, 4000);
    $(this).animate({ "width" : "50px" }, 4000);
  });  
  
  // Multiple selectors that add a CSS class to given element(s).  
  // Selectors - first element, last, odd, even, 4th, xpath where title='title'
  $('li:first').addClass('alert');
  $('li:last').addClass('alert');  
  $('li:odd').addClass('alert');
  $('li:even').addClass('alert');			
  $('li:eq(4)').addClass('alert');
  $('li:a[title=title]').addClass('alert');

  // Select anchor tags that are direct children of <li>
  $('li>a').removeClass('alert');
  
  // Adding new incrementing and removing <li> to <ul>
  var i = $('li').size() + 1;

  $('a#add').click(function() {
    $('<li>' + i + '</li>').appendTo('ul');
    i++;
  });

  $('a#remove').click(function() {
    $('li:last').remove();
    i--;
  });
  
});