50 jQuery Snippets That Will Help You Become A Better JavaScript Developer

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.

• How to Create A Nested Filter:

   //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))")
  

• How to Reuse Your Element Searches

  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
  class names:
  $(formToLookAt + " input:checked").each(function() {     keepList = keepList.filter("." + $(this).attr("name")); });
  

• How To Check If An Element contains a certain class or element with has():

   //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");
  

• How to Switch StyleSheets With jQuery:

  	//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');

• How to Limit the Scope of Selection (For Optimization):

  		//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');
  

  
  
   Item X
  
   Item Y
  
   Item Z
  
  

• How to Correctly Use ToggleClass:

  	 //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');
  

• How to set an IE Specific Function:

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

• How to Replace an element with jQuery:

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

• How to Verify if an element is empty:

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

• How to find out the index of an element in an unordered set

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

• How to Bind a function to an event:

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

• How to Append or add HTML to an element:

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

• How to use an object literal to define properties when creating an element

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

• How to Filter using multiple-attributes

  	//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();
  	

• How to Preload images with jQuery:

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

• How to set an event handler for any element that matches a selector:

  $('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");
  });
  

• How to find an option element that’s been selected:

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

• How to hide an element that contains text of a certain value:

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

• How To AutoScroll to a section of your page:

  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();
  

• How To Detect Any Browser:

  	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' ))

• How To Replace a word in a string:

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

• How To Disable right-click contextual menu :

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

• How to define a Custom Selector

  	$.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();
  

• How to check if an element exists

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

• How to Detect Both Right & Left Mouse-clicks with jQuery:

  $("#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");
  });
  

• How To Show or Erase a Default Value In An Input Field:

  //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]);
          }
      });
  });
  

• How To Automatically Hide or Close Elements After An Amount Of Time (supports 1.4):

   //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);
   

• How To Add Dynamically Created Elements to the DOM:

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

• How To Limit The Number Of Characters in a "Text-Area" field:

  	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);
  

• How to create a basic test for a function

  	//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" );
  });
  

• How to clone an element in jQuery:

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

• How to test if an element is visible in jQuery:

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

• How to center an element on screen:

  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(); 

• How to put the values of all the elements of a particular name into an array:

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

• How to Strip HTML From Your Element

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

• How to get a parent element using closest:

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

• How to log jQuery events using Firebug and Firefox:

  // 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;
  };
  

• How to force links to open in a pop-up window:

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

• How to force links to open in a new tab:

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

• How to select siblings in jQuery using .siblings()

  // 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');
  });
  	

• How to Toggle All the checkboxes on a page:

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

• How to filter down a list of elements based on some input text:

  	//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() ;
   })
   

• How to get mouse cursor X and Y

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

• How to make an entire List Element (LI) clickable

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

  
  Link 1
  Link 2
  Link 3
  Link 4
  
  

• How to Parse XML with jQuery (Basic example):

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

• How to Check if an image has been fully loaded:

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

• How to namespace events using jQuery:

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

• How to Check if Cookies Are Enabled Or Not:

      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
      }
  

• How to Expire A Cookie:

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

• Replace any URL on your page with a clickable link

  $.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,'$1‘)
              );
          });
          return $(this);
      }
  	//usage
  	$('p').replaceUrl();