Read the Code!

You wouldn't believe how much this helps. I keep having to go back to the code to understand what it's doing and see what else it can do. I haven't even touched some parts of the code yet, but I keep reading.

Try mini tests!

Try little code samples in a plain old text/html file. You get to see what you can and cannot do very quickly!
Try things like:

• Select things

  $('*') // select everything!
  $('A') // selects all anchor tags in the document
  $('#id') // selects the element with id="id" *Notice the similarity to CSS*
  $('*[@id="id"]') // selects the element with id="id" *Notice the similarity to XPATH*
  $('.class') // selects all elements that have the class="class" *Notice the similarity to CSS*
  $('.class, .anotherClass') // selects all elements that have the class="class" or class="anotherClass" *Again notice the similarity to CSS*
  $('INPUT', document.form[0]) // select all input tags under the given tag

• Try Events binding

  $('input[@type="button"]').click(function() {alert('you clicked a button')}); // ties an event all buttons that alerts you've clicked it.
  $('input[@type="text"]').bind('click', function() { alert('you clicked a textbox'}) // ties an event all textboxes that alerts you've clicked it.
  $('input[@type="text"]').bind('click.keyup.change.blur.focus', function() { alert('you've done something'}) // ties several events all textboxes that alerts you've done something.

• Try Chaining

  $('input[@type="button"]').click(function() {alert('you clicked a button')}).val('sets text');
  $('input[@type="text"]').css('width', 400).css('height', 30)

• Try hiding and animating

  $('input[@type="button" and @id="b1"]').click(function() {$('div#mydiv').show()})
  $('input[@type="button" and @id="b2"]').click(function() {$('div#mydiv').hide()})
  $('input[@type="button" and @id="b3"]').click(function() {$('div#mydiv').slideUp()})
  $('input[@type="button" and @id="b4"]').click(function() {$('div#mydiv').slideDown()})

Write an extension

Ok, so I was trying to disable some input boxes and I just wanted to call $('#myinput').disabled(true); so I wrote a little extension. It helped me learn some interesting things in jquery. Anyway here it is:

jQuery.fn.extend({
  filterDisabled : function(){ return this.filter(
    function(){return (typeof(this.disabled)!=undefined)})
  },
  disabled: function(h) {
    if (h!=undefined)
      return this.filterDisabled().each(function(){this.disabled=h});
    this.filterDisabled().each(function()
      {h=((h||this.disabled)&&this.disabled)});
    return h;
  },
  toggleDisabled: function() { return this.filterDisabled()
      .each(function(){this.disabled=!this.disabled});}
});
So, with the piece of code above, you can do the following:

$("#myButton").disabled(true);
or use it with multiple objects:
$(".button").disabled(true);
or just toggle states
$(".button").toggleDisabled();
or get the state of a control
if ($("#myButton").disabled()) { /*we are disabled*/}

This will also chain like other calls:
$(".button").disabled(true).val("disabled!");

Have Fun with JQuery!

It's all in the name of learning to be a better developer and enjoying some fun.