In today’s post I’m going to show you guys 50 jQuery Snippets that can help you with your JavaScript projects. Some of these snippets are going to be things that have just been supported with jQuery 1.4.2 whilst others are really useful functions or methods that can help you do things better or quicker. I’ve tried to bare in mind optimal performance with these snippets so if there’s anything you see that you think could be done better, please feel free to post your version in the comments!. I hope you find the post useful.

//a filter allows you to reduce the set of matched elements
 //to those that match a given selector. In this case the query
 //removes anything which doesn't (:not) have (:has) a child with
 //class "selected" (.selected)
 .filter(":not(:has(.selected))")

var allItems = $("div.item");
var keepList = $("div#container1 div.item");
//Now you can keep working with those jQuery objects. For example,
//trim down the "keep list" based on checkboxes whose names
//correspond to
<div>class names: $(formToLookAt + " input:checked").each(function() { keepList = keepList.filter("." + $(this).attr("name")); });</div>

//jQuery 1.4.* includes support for the has method. This method will find
 //if a an element contains a certain other element class or whatever it is
 //you are looking for and do anything you want to them.
 $("input").has(".email").addClass("email_icon");

//Look for the media-type you wish to switch then set the href to your new style sheet
$('link[media='screen']').attr('href', 'Alternative.css');

//Where possible, pre-fix your class names with a tag name
//so that jQuery doesn't have to spend more time searching
//for the element you're after. Also remember that anything
//you can do to be more specific about where the element is
//on your page will cut down on execution/search times
var in_stock = $('#shopping_cart_items input.is_in_stock');

<ul id="shopping_cart_items">
<li>
<input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li>
<li>
<input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li>
<li>
<input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li>
</ul>

 //Toggle class allows you to add or remove a class
 //from an element depending on the presence of that
 //class. Where some developers would use:
 a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
 //toggleClass allows you to easily do this using
a.toggleClass('blueButton');

if ($.browser.msie) { // Internet Explorer is a sadist. }  

$('#thatdiv').replaceWith('fnuh'); 

if ($('#keks').html()) { //Nothing found ;}   

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

$ ('#lal').append('sometext'); 

var e = $("", { href: "#", class: "a-class another-class", title: "..." }); 

//This precision-based approached can be useful when you use
//lots of similar input elements which have different types
var elements = $('#someid input[type=sometype][value=somevalue]').get();

	jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };
	// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 

$('button.someClass').live('click', someFunction);
	//Note that in jQuery 1.4.2, the delegate and undelegate options have been
	//introduced to replace live as they offer better support for context
    //For example, in terms of a table where before you would use..
	// .live()
	$("table").each(function(){
	  $("td", this).live("hover", function(){
		$(this).toggleClass("hover");
	  });
	});
	//Now use..
	$("table").delegate("td", "hover", function(){
  $(this).toggleClass("hover");
});

$ ('#someElement').find('option:selected'); 

$("p.value:contains('thetextvalue')").hide();

jQuery.fn.autoscroll = function(selector) {
  $('html,body').animate(
    {scrollTop: $(selector).offset().top},
    500
  );
}
//Then to scroll to the class/area you wish to get to like this:
$('.area_name').autoscroll();

Detect Safari (if( $.browser.safari)),
Detect IE6 and over (if ($.browser.msie && $.browser.version >/ 6 )),
Detect IE6 and below (if ($.browser.msie && $.browser.version </= 6 )),
Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version <= '1.8' )) 

var el = $('#id');
	el.html(el.html().replace(/word/ig, '')); 

$(document).bind('contextmenu',function(e){ return false; });

$.expr[':'].mycustomselector = function(element, index, meta, stack){
   // element- is a DOM element
   // index - the current loop index in stack
   // meta - meta data about your selector
   // stack - stack of all elements to loop
   // Return true to include current element
   // Return false to explude current element
};
// Custom Selector usage:
$('.someClasses:test').doSomething();

if ($('#someDiv').length) {//hooray!!! it exists...}  

$("#someelement").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        alert("Left Mouse Button Clicked");
    }
    else if(e.button == 2)
        alert("Right Mouse Button Clicked");
});

//This snippet will show you how to keep a default value
//in a text input field for when a user hasn't entered in
//a value to replace it
swap_val = [];
$(".swap").each(function(i){
    swap_val[i] = $(this).val();
    $(this).focusin(function(){
        if ($(this).val() == swap_val[i]) {
            $(this).val("");
        }
    }).focusout(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(swap_val[i]);
        }
    });
});

<input value="Enter Username here.." class="swap" type="text">

//Here's how we used to do it in 1.3.2 using setTimeout
    setTimeout(function() {
  $('.mydiv').hide('blind', {}, 500)
}, 5000);
//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
$(".mydiv").delay(5000).hide('blind', {}, 500); 

var newDiv = $('');
	newDiv.attr('id','myNewDiv').appendTo('body'); 

jQuery.fn.maxLength = function(max){
this.each(function(){
	var type = this.tagName.toLowerCase();
	var inputType = this.type? this.type.toLowerCase() : null;
	if(type == "input" && inputType == "text" || inputType == "password"){
		//Apply the standard maxLength
		this.maxLength = max;
	}
	else if(type == "textarea"){
		this.onkeypress = function(e){
			var ob = e || event;
			var keyCode = ob.keyCode;
			var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
			return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
			};
			this.onkeyup = function(){
				if(this.value.length > max){
				this.value = this.value.substring(0,max);
				}
			};
		}
	});
};
//Usage:
$('#mytextarea').maxLength(500); 

//Separate tests into modules.
module("Module B");
test("some other test", function() {
  //Specify how many assertions are expected to run within a test.
  expect(2);
  //A comparison assertion, equivalent to JUnit's assertEquals.
  equals( true, false, "failing test" );
  equals( true, true, "passing test" );
});

var cloned = $('#somediv').clone();  

if($(element).is(':visible') == 'true') { //The element is Visible }

jQuery.fn.center = function () {
	this.css('position','absolute');
	this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
	this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}
	//Use the above function as: $(element).center();

var arrInputValues = new Array();
   $("input[name='table\\[\\]']").each(function(){
     arrInputValues.push($(this).val());
});

 (function($) {
    $.fn.stripHtml = function() {
        var regexp = /< ("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,”")
            );
        });
        return $(this);
    }
})(jQuery);
	//usage:
	$('p').stripHtml();

$('#searchBox').closest('div'); 

// Allows chainable logging
// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');
jQuery.log = jQuery.fn.log = function (msg) {
      if (console){
         console.log("%s: %o", msg, this);
      }
      return this;

};

jQuery('a.popup').live('click', function(){
	newwindow=window.open($(this).attr('href'),'','height=200,width=150');
	if (window.focus) {newwindow.focus()}
	return false;
});

jQuery('a.newTab').live('click', function(){
	newwindow=window.open($(this).href);
	jQuery(this).target = "_blank";
	return false;
});

// Rather than doing this
$('#nav li').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});
// Do this instead
$('#nav li').click(function(){
    $(this).addClass('active')
        .siblings().removeClass('active');
});

var tog = false; // or true if they are checked on load
$('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});

//If the value of the element matches that of the entered text
//it will be returned
	$('.someClass').filter(function() {
    return $(this).attr('value') == $('input#someId').val() ;
 })

$(document).mousemove(function(e){
	$(document).ready(function() {
	   $().mousemove(function(e){
		$(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
	   });
	});
});

$("ul li").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
});

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

function parseXml(xml) {
	//find every Tutorial and print the author
	$(xml).find("Tutorial").each(function()
	{
	$("#output").append($(this).attr("author") + "");
	});
}

$('#theImage').attr('src', 'image.jpg').load(function() {
alert('This Image Has Been Loaded');
});

//Events can be namespaced like this
$('input').bind('blur.validation', function(e){
    // ...
});
//The data method also accept namespaces
$('input').data('validation.isValid', true); 

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled)
{
     //cookies have not been enabled
}

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

$.fn.replaceUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<a href="$1">$1</a>‘)
            );
        });
        return $(this);
    }
	//usage
	$('p').replaceUrl();