jQuery Document Ready Function

Document Ready Function

You might have noticed, that all jQuery methods, in our examples, are inside a document.ready() function

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

// jQuery functions go here….

});

This is to prevent any jQuery code from running before the document is finished loading(is ready)

Here are some examples of actions that can fail if functions are run before the document is fully loaded :

  • Trying to hide an element that doesn’t exist
  • Trying to get the size of an image that is not loaded

 

How to use custom Scripts?

It is better to write our custom code in the custom JavaScript file : custom.js, as follows:

/* Filename : custom.js */

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

$(“div”).click(function()) {

alert(“Hello world!”);

});

});

Now we can include custom.js file in our HTML file as follows :

<html>

<head>

<title> The JqueryExampe</title>

<script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” src=”/jquery/custom.js></script>

</head>

<body>

<div id=”newdiv”>

Click on this to see a dialogue box. </div>

</body>

</html>

 

Using Multiple Libraries

You can use multiple libraries all together without conflicting each others. For example you can use jQuery and MooTooljavaScript libraries together.

 

JQuery – noConfilct() Method

Many JavaScript libraries use $ as a function or variable name, just as JQuery does. In query’s ease, $ is just an alias for JQuery, so all functionality is available without using $

 

Run $.noConflict()

method to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn’t conflict with the $ object of other libraries.

 

Definition and Usage

The noConflict() method releases jQuery’s control of the $ variable

This method can also be used to specify a new custom name for the JQuery variable

 

Tip :

This method useful when other JavaScript libraries use the $ for their functions.

Syntax

$.noConflict(removeAll)

 

ParameterDescription
removeAlloptional. A Boolean value that specifies whether or not release jQuery’s control of ALL JQuery variable (including “jQuery”)

 

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

varjq=$.noconflict();

jq(document).ready(function()) {

jq(“button”).click(function()) {

jq(“p”).hide();

});

});

</script>

</head>

<body>

<h2>This is a heading </h2>

<p>This is a paragraph. </p>

<p>This is another paragraph </p>

<button>click me</button>

</body>

</html>

Here is simple way of avoiding any conflict :

// Import other library

// Import jQuery

$.nonConflict();

JQuery(document).ready(function($)

{

// code that uses jQuery’s $ can follow here.

}};

// Code that uses other library’s $ can follow here.

DOM element