Group items tagged

I’ve been having a lovely day at work, fiddling with jQuery. I started to come up with some really gnarly selector chains though, and I wondered what nodes they were actually addressing. So, I wrote a tiny jQuery extension that logs the current jQuery selection to the firebug console. jQuery.fn.log = function (msg) { console.log("%s: %o", msg, this); return this; }; Now, I can just stuff a call to .log() in the middle of what I’m doing to see what I’m currently addressing. e.g. $(root).find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked"); The nice thing about logging to firebug is that each node becomes clickable in the console, so you can immediately see the context.

// hides every other <p> on the page $("p:odd").hide();

// place a username and password input field on the page <input type=text id="username"> <input type=password id="pass"> // call a server-based PHP file that will process the information passed to it $.post("myFormProcessor.php", {username: $("#username").val(), password: $("#pass").val()}); // conversely, this PHP file could also return information to the function, from which // you could process the results $.post("myFormProcessor.php", {username: $("#username").val(), password: $("#pass").val()}, function(data){ // the data variable contains the text returned from the server, you don't // have to set anything up ahead of time, jQuery will do it all for you if (data != "ERROR") $("#responseDiv").text(data); } );

What does this mean? Well, based on the ability to load any Web page, and then parse it with jQuery, you have at your hands a very effective and easy-to-program page scraper, from which you can gather any type of information from any page.

jQuery.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { jQuery("<img>").attr("src", arguments[i]); } }