6 fast jQuery Tips: More basic Snippets

Posted 2009-01-07 in JavaScript by Johann.

Still hungry for jQuery tips? After the first and second session, here are more snippets.

Force a Page Reload

This will forcefully reload the current page. No jQuery needed here.

location.reload(true);

If your content might be cached by proxy servers and your URL has no query string, try this:

location.replace(
 location.href.replace(/\?.*$/, '') + '?' + Math.random());

Many ad networks use this trick to ensure that ad tags are never cached.

Try it: Reload this page.

Reload an Image

There is no reload or replace method for images. The src property can be set in the same way as the location.href property though.

with($('#image')) {
 src = src.replace(/\?.*$/, '') + '?' + Math.random();
}

Roßstein, Buchstein und Leonhardstein

Try it: Reload this awesome photo of my awesome tour to the Schildenstein. In Firebug, you will see the new image being loaded.

Replace a <div> with jQuery

The easiest way, pointed out by Paul, is to use the replaceWith method.

$('#thatdiv').replaceWith('<div>fnuh</div>');

A more confusing way is to insert the new element after the target element’s previous element and then remove the target element. The with statement makes it shorter.

with ($('#thatdiv')) {
 with (prev()) {
  after('<p>Your new content goes here</p>');
 }
 remove();
}

Try it: Replace this element with something completely different.

Verify if an Element is empty

if ($('#keks').html()) {
 // Do something to remedy the situation
}

Test it: Is this element empty?

Append or Add HTML to an Element

One of the nicest things about jQuery that most methods are named what you’d expect them to be named.

$('#lal').append("<b>lol</b>");

Test it: Append your eBay username and password to this.

When to load jQuery on the page?

I assume most people include the jquery.js in the <head> portion of a page – at least I do. But unless you write CSS overrides on the page from JavaScript (document.write('<style>/<script>…')), putting it at the bottom improves performance.

I hope you have enjoyed these snippets. If you did, get updates via my news feed.

3 comments

#1 2009-01-11 by Paul Irish

It's considered poor form to use with these days: http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/

So instead you could do this:
$('#thatdiv').prev().after('<p>Your new content goes here</p>').end().remove();
or just:
$('#thatdiv').replaceWith('<p>Your new content goes here</p>');

#2 2009-01-11 by Johann

Paul,

I've updated the sample accordingly, thanks for the suggestion.

#3 2009-09-24 by Shahriar Hyder

Good ones mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:


Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance


http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

Subscribe

RSS 2.0, Atom or subscribe by Email.

Top Posts

  1. DynaCloud - a dynamic JavaScript tag/keyword cloud with jQuery
  2. 6 fast jQuery Tips: More basic Snippets
  3. xslt.js version 3.2 released
  4. xslt.js version 3.0 released XML XSLT now with jQuery plugin
  5. Forum Scanners - prevent forum abuse
  6. Automate JavaScript compression with YUI Compressor and /packer/

Categories

Navigation