jquery methods

.bind() method
This method allows us to specify any JavaScript event, and to attach a behavior to it. In this case, the event is called click,   and the behavior is a function consisting of our one-liner above:

$(document).ready(function() {
 $('#switcher-normal').bind('click', function() {
   $('body').removeClass('narrow').removeClass('large');
 });
 $('#switcher-narrow').bind('click', function() {
    $('body').addClass('narrow').removeClass('large');
  });
  $('#switcher-large').bind('click', function() {
    $('body').removeClass('narrow').addClass('large');
  });
  $('#switcher .button').bind('click', function() {
    $('#switcher .button').removeClass('selected');
    $(this).addClass('selected');
  });
});

This optimization takes advantage of the three jQuery features we have discussed. First, implicit iteration is once again useful where we bind the same click handler to each button with a single call to .bind(). Second, behavior queueing allows us to bind two functions to the same click event, without the second overwriting the first. Lastly, we're using jQuery's chaining capabilities to collapse the adding and removing of classes into a single line of code each time.
removeClass() 
The .removeClass() method's parameter is optional; when omitted, it removes all classes from the element.              
Since the context keyword this gives us a DOM element rather than a
jQuery object, we can use native DOM properties to determine the ID of the element that was clicked.

$(document).ready(function() {
  $('#switcher .button').bind('click', function() {
    $('body').removeClass();
    if (this.id == 'switcher-narrow') {
      $('body').addClass('narrow');
    }
    else if (this.id == 'switcher-large') {
      $('body').addClass('large');
    }
    $('#switcher .button').removeClass('selected');
    $(this).addClass('selected');
  });
});

click()
Binding a handler for an event (like a simple click event) is such a common task that
jQuery provides an even terser way to accomplish it; shorthand event methods work
in the same way as their .bind() counterparts with a couple fewer keystrokes.
For example, our style switcher could be written using .click() instead of .bind()
as follows:
  

 $(document).ready(function() {
       $('#switcher .button').click(function() {
         $('body').removeClass();
         if (this.id == 'switcher-narrow') {
            $('body').addClass('narrow');
         }
         else if (this.id == 'switcher-large') {
            $('body').addClass('large');
         }
         $('#switcher .button').removeClass('selected');
         $(this).addClass('selected');
       });
    });

toggle()
The .toggle() method takes two arguments, both of which are functions. The first
click on the element causes the first function to execute; the second click triggers the
second function. The two functions continue to alternate every other click thereafter.
With .toggle(), we can implement our collapsible style switcher quite easily:

   $(document).ready(function() {
       $('#switcher h3').toggle(function() {
         $('#switcher .button').addClass('hidden');
       }, function() {
         $('#switcher .button').removeClass('hidden');
       });
    });

toggleClass()
For this specific case, jQuery provides another mechanism for the collapsing we are
performing. We can use the .toggleClass() method to automatically check for the
presence of the class before applying or removing it:
    

$(document).ready(function() {
       $('#switcher h3').click(function() {
          $('#switcher .button').toggleClass('hidden');
       });
     });

In this case, .toggleClass() is probably the more elegant solution, but .toggle()
is a more versatile way to perform two different actions in alternation.

   

$(document).ready(function() {
       var toggleStyleSwitcher = function() {
          $('#switcher .button').toggleClass('hidden');
       };
       $('#switcher').click(toggleStyleSwitcher);
       $('#switcher-normal').click(function() {
          $('#switcher').click(toggleStyleSwitcher);
       });
       $('#switcher-narrow, #switcher-large').click(function() {
          $('#switcher').unbind('click', toggleStyleSwitcher);
       });
    });

Now the toggle behavior is bound when the document is loaded, unbound when
Narrow Column or Large Print is clicked, and rebound when Normal is clicked
after that.