Home » Tutorials » JavaScript » JQuery: Are These APIs Confusing You?

JQuery: Are These APIs Confusing You?

JQuery: Are These APIs Confusing You?

As a web designer / developer, you might saw some JQuery API / code that seems like having similar functionality, and sometimes, it might quite confuse you. For example, have you seen the following code before when you are writing your JQuery code for your website?

$(document).ready(function(){});

$(window).load(function(){});

return false;

 e.preventDefault();

Some of you might already know the difference between document.ready and window.load / return false and e.preventDefault, but no worry for those who still hv no idea about the code above, because we are going to explain the differences between these 2 groups of syntax and tell you when to use it.

Difference Between $(document).ready and $(window).load

$(document).ready
The $(document).ready is the code that we used almost everytime when we start work with JQuery. This code is used to initialize our JQuery after the DOM (Document Object Model) is ready. Basically, web designer / developer used this for the function that requires only with the interactivity / functionality.

$(window).load
The $(window).load is used to initialize our JQuery when the page is fully loaded including images as well. Normally, web designer / developer use $(window).load for the JQuery function that requires work with images, such as Image Slideshow, because the slideshow will only start play when the images is fully loaded.

Difference Between ‘return false’ and e.preventDefault()

For example:

$("a").click(function() {
//some code here
//then return false
return false;
});

$("a").click(function(e) {
//some code here
//then prevent default value of link
e.preventDefault();
});

Both of these have the same function, which is prevents the browser from performing the default action of the link, so what is the differences between these 2?

Let’s say you hv a box inside a box and both have click event on them. So when you click on the inner box, the event will trigger the outer box as well, if you use e.preventDefault(). If you want to prevent the click event of the inner box trigger the outer box, you can use ‘return false’ instead of e.preventDefault().

Other JQuery Tutorials


Android, iOS Development Tutorials