10 Useful jQuery Snippets

Key Takeaways

• jQuery snippets are small, reusable pieces of code that provide ready-made solutions to common programming tasks, saving developers time and effort. They can be easily integrated into larger projects and are a valuable resource for both novice and experienced developers.
• To use a jQuery snippet, you need to copy the code and paste it into your project where you want the functionality to be. You may need to modify the code slightly to fit your specific needs, such as changing variable names or adjusting parameters. Always test the snippet thoroughly in your project to ensure it works as expected.
• Using jQuery snippets can potentially improve the performance of your website. By using pre-written, optimized code, tasks can be accomplished more efficiently and reduce the amount of code needed in your project. However, performance also depends on many other factors, such as the overall structure of your code and the speed of your server.

Nowadays, jQuery is far the most favorite Javascript framework of many developers. Through jQuery they will be able to create stunning visual effects, manipulate data, etc. You had been probably in my other posts before so I won’t explain much from what are the benefits can be gained from jQuery.

1. Quick Copy Paste

$(document).ready(function(){
// jQuery Code Here
});

2. Date of Birth

$("#lda-form").submit(function(){
	var day = $("#day").val();
	var month = $("#month").val();
	var year = $("#year").val();
	var age = 18;
	var mydate = new Date();
	mydate.setFullYear(year, month-1, day);
	var currdate = new Date();
	currdate.setFullYear(currdate.getFullYear() - age);
	if ((currdate - mydate) < 0){
		alert("Sorry, only persons over the age of " + age + " may enter this site");
		return false;
	}
	return true;
});

3. Text Search

$.fn.egrep = function(pat) {
 var out = [];
 var textNodes = function(n) {
  if (n.nodeType == Node.TEXT_NODE) {
   var t = typeof pat == 'string' ?
    n.nodeValue.indexOf(pat) != -1 :
    pat.test(n.nodeValue);
   if (t) {
    out.push(n.parentNode);
   }
  }
  else {
   $.each(n.childNodes, function(a, b) {
    textNodes(b);
   });
  }
 };
 this.each(function() {
  textNodes(this);
 });
 return out;
};

4. XML file Parser

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

5. Class Hover add and Remove

$('.onhover').hover(
function(){ $(this).addClass('hover_style_class') },
function(){ $(this).removeClass('hover_style_class') }
)

6. Partial Page Refresh

setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // seconds to wait, miliseconds

7. Mouse Position

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;
  return {'x': x, 'y': y};
}

8. Delay Animation or Effect

$(".alert").delay(2000).fadeOut();

9. Popup Windows Opener

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

10. Each Element

$("input").each(function (i) {
//do something with each and pass i as the number of the element
});

Frequently Asked Questions about jQuery Snippets