Description
On some pages that use traditional javascript,in the body tag the attribute
onload attribute is seen .But it is limited only single function. First thing, whenever using jQuery to manipulate the web page, it is a good practice to wait until the document ready event has fired before working with the document page. The document ready event tells that the HTML DOM page is now ready. So one can manipulate HTML elements without worrying.
jQuery document ready event keeps the code from running before document finished loading and it is a decent practice to wait for the document till it is loaded completely. Syntax
$(document).ready(function()
{
//DOM manipulation code
});
- $ sign is used to define jQuery, passing to it the
documentobject. The$function returns enhanced version ofdocumentobject and it has aready()method with anonymous function. - Inside
ready()method, one can execute all the jQuery and JavaScript code what they need, in order to enhance the HTML elements of the DOM.
$(function()
{
// jQuery methods go here...
});
Description
Check the below example for more help
[html]
<html>
<head>
<title>jQuery Document Ready</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<p>click on this paragraph</p>
<span>This is a span element</span>
</body>
</html>
[/html]
[javascript]
$(document).ready(function(){
$("p").click(function() {
alert("The Paragraph was clicked");
})
});
[/javascript]
Output: When clicked on the paragraph element the following output appears.
Points
- Document ready() function gets executed only after all the DOM elements gets loaded.
- $(document).ready(function(){}); is the syntax for ready function.