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)
| Parameter | Description |
| removeAll | optional. 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
- jQuery Interview Questions & Answers
- JQuery Callback Functions & Get,Set Attributes
- jQuery Effects & Methods
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox