www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery Ready Event Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27

It is not a good practice to start manipulating the document with jQuery before it is fully loaded and ready. It is good to wait for the document to be fully loaded and ready, before working with it. This is not only the case with jQuery, this also hold true for JavaScript too.

We can do that by writing our code inside the document ready event. See below the same example from the previous lesson:

<html>
<head>
<title>First jQuery Page</title>
<script src="jquery-1.9.1.js"></script>
</head>

<body>
<div id = "hello" ></div>
<script type = "text/javascript" >
function docReady ()
{
$ ( "#hello" ). text ( "Hello world!" );
}

$ ( document ). ready ( docReady );
</script>
</body>
</html>

The code above produces the same results as it does in the previous lesson. This time we have defined a function named docReady() and have placed our DOM manipulating code inside it. Then we use the ready() method of the document object to assign our function to the ready event, to tell jQuery that as soon as the document is ready, we want our docReady() to be called. The ready event is fired as and when the document has completely loaded and is ready for DOM manipulation.

The above code can be shorten a bit by using an anonymous function of JavaScript. This simply means that instead of declaring the function first, and then passing its reference to the ready() function, we can simply define it inside the ready function, as follows:

<div id = "hello" ></div>
<script type = "text/javascript" >
$ ( document ). ready ( function ()
{
        $ ( "#hello" ). text ( "Hello world!" );
});
</script>

Next >>> Lesson No. 5: jQuery Method Chaining







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.