Nice intro screencast: Learn jQuery with FireBug, jQuerify and SelectorGadget

Twitter proved to be useful once again and provided me a nice link to an article from Encosia: Hear me talk jQuery and ASP.NET on the jQuery Podcast. While listening to the podcast (very interesting and full of useful information) I found another article on the site: Updated: See how I used Firebug to learn jQuery. The article is about 1 year old, but still, I found it useful! I’ve been using Firebug for some time to debug JavaScript and jQuery, but never paid attention to the console.

The article contains a 10 minutes screencast in which Dave Ward shows how we can use the built-in console from Firebug to learn and test jQuery scripts. He also uses two scripts:

  • jQuerify – a little bookmarklet to load jQuery on pages that don’t already have it
  • SelectorGadget – an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze

which can make your life easier when it comes to playing around with jQuery.

Watching the screencast I decided to implement the same “feature” on my blog just for test. In order to do that I had to edit two files in the admin interface of WordPress:

  • first of all I had to add jQuery to my blog and decided to use the CDN provided by jQuery. For that I edited header.php and added on line inside the <head> tag:
Javascript
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  • second and last step, I edited the footer.php file and right before the closing </body> tag I added the following script:
Javascript
  1. <script>
  2. $(document).ready( function() {
  3. $("h3").mouseover( function() {
  4. $(this).css("cursor", "pointer");
  5. })
  6. .mouseout( function() {
  7. $(this).css("cursor", "default");
  8. }).click( function() {
  9. $(this).next().slideToggle();
  10. });
  11. });
  12. </script>

The result is the same as in the screencast: if you click on the headers from the right side bar you will hide/show the contents of that list. The only difference is that I used method chaining to change the cursor style based on the mouseover and mouseout events to make it clear for the user that clicking on the header will actually do something.

Here is the screencast from the article:

 

Enjoy!