Currently I"m working more and more with jQuery and JavaScript to get behavior into my pages. This was quite painful in the beginning as I was depended a bit too much on alert"('this happens!').
But I guess this is where you get started and then find out about the excellent firebug. With the console you can then fire your JavaScript and jQuery commands to the page like so:
I'm querying on of Holland's main news sites for their logo. Firebug conveniently comes up with the link to the element and when clicked it will show where it's located on the page.
This is all nice but let's change the boring logo of nu.nl to that of our own!
Easy enough, just use the following to change the picture in the page:
$('#sidemenu a img').attr('src', 'http://www.tjsolutions.nl/themes/tjs/images/headerbg.jpg')
But changing the elements in a page is just the beginning. You can just as easily add new functionality by binding a click event handler to one or more elements in the page.
You can also use the console to inspect what events are registered to an element on the page. All you need to do is use this syntax:
$(selector).data("events");
When we try that on the last input (randomly chosen) you get an overview of all the events bound (in this case only one).
If you the click on the object and hover over "function" you'll end up with the code itself:
This is a very neat trick that I wish I had stumbled upon earlier. Hope it helps.