Killer jQuery Tips (from around the web)

2008-10-27T08:28:00.000-07:00

.. Work in progress ..

When you start on a new or existing web project, one of the first questions you ask yourself (after the core technology and infrastructure is figured out) is how do you efficiently generate/construct web pages (HTML) and then the JavaScript library to use. Should you use a third party library, open source one, or should you write all your JS utilities yourself, as you or some team members are quite proficient.

Well, unless you are working on the Google classic home page, chances are that using a JS library helps and jQuery is one top-notch selector based JavaScript library, that I have followed since it was pulled together by John.

Some of the tips are mine while most are collected from over the web with appropriate references/sources tagged. Enjoy!

Wait for document to be ready for DOM access and modifications

$(document).ready(function(){

// start/init js processing

// set/fire event handlers

// ...

});

Detect Browsers and versions

if ($.browser.msie) {

// ..

}

// more browser objects available as well - see official jquery site for more info

Select all nodes with tag name

$("a")

Select node with a specific id

$("#gears-of-war-section")

Set up JavaScript event handlers

This code selects all outgoing links (have css class "outgoing-link"), within the gears-of-war-section (which could be a div or whatever) and then attaches click handlers on them.. (This jQuery doc page lists the complete set of event names supported)

$("#gears-of-war-section.outgoing-link").click(function() {

// do things here

});

An example of the sexy jQuery Chaining feature (chaining event handlers)

$("#gears-of-war-section.outgoing-link").click(function() {

// what to do when links are clicked

}).mouseup(function() {

// what to do when user mouses over those links

});

Mark External Links

$("a").not("[href^=/]").not("[href^=#]").append("?");

Use Your Own Bullets (Add a class dynamically to an element)

$("ul").addClass("Replaced");

Append / Prepend text elements

$("ul > li").prepend("‒ ");

Append HTML content

$("#someparagraph-id").html("I am just added");

Switch a stylesheet
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});

Default input text in forms

var defvalue = "Search!";

var selector = "#search-input-elem"; // can also make a function and have this as a param

if($.trim($(selector).val()) == "") {

$("#SearchText").val(defvalue);

}

$(selector).focus(function() {

if($("#search-input-elem").val() == defvalue) {

$("#search-input-elem").val("");

}

});

$(selector).blur(function() {

if($.trim($(selector).val()) == "") {

$(selector).val(defvalue);

}

});

Take advantage of CSS and XPath selectors
$("h2 + p").addClass("Large"); // select 1st paragraph and add Large class

Sources:

About Vishal

Welcome to Effective Websites Blog

2008-03-22T10:54:00.000-07:00

Here, I will try to put together a collection of ideas I gathered over time to identify, investigate and play with ideas that make a website effective - with an emphasis on high performance - which the common denominator of all effective websites.

Let's start digging.

effective web sites by goldenv

Killer jQuery Tips (from around the web)

Welcome to Effective Websites Blog