Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 59 lines (47 sloc) 1.696 kb
53d313a @scottgonzalez Pages: Use JSON for front matter
scottgonzalez authored
1 <script>{
2 "title": "$( document ).ready()",
3 "level": "beginner"
4 }</script>
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
5
6 A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside `$( document ).ready()` will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside `$( window ).load(function() { ... })` will run once the entire page (images or iframes), not just the DOM, is ready.
d244c32 @bobholt apply core styles to using-jquery-core sectione examples
bobholt authored
7
8 ```
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
9 // A $( document ).ready() block.
d244c32 @bobholt apply core styles to using-jquery-core sectione examples
bobholt authored
10 $( document ).ready(function() {
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
11 console.log( "ready!" );
b61492f @ajpiano unify "jQuery Basics" and "Using jQuery Core" into a single chapter. …
ajpiano authored
12 });
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
13 ```
b61492f @ajpiano unify "jQuery Basics" and "Using jQuery Core" into a single chapter. …
ajpiano authored
14
dda6278 @githubshrek Document Ready: Clarify what the shorthand form is
githubshrek authored
15 Experienced developers sometimes use the shorthand `$()` for `$( document ).ready()`. If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.
b61492f @ajpiano unify "jQuery Basics" and "Using jQuery Core" into a single chapter. …
ajpiano authored
16
d244c32 @bobholt apply core styles to using-jquery-core sectione examples
bobholt authored
17 ```
18 // Shorthand for $( document ).ready()
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
19 $(function() {
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
20 console.log( "ready!" );
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
21 });
22 ```
b61492f @ajpiano unify "jQuery Basics" and "Using jQuery Core" into a single chapter. …
ajpiano authored
23
c70d4bd @bobholt apply core styles to performance section, site-wide tweaks
bobholt authored
24 You can also pass a named function to `$( document ).ready()` instead of passing an anonymous function.
b61492f @ajpiano unify "jQuery Basics" and "Using jQuery Core" into a single chapter. …
ajpiano authored
25
d244c32 @bobholt apply core styles to using-jquery-core sectione examples
bobholt authored
26 ```
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
27 // Passing a named function instead of an anonymous function.
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
28
29 function readyFn( jQuery ) {
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
30 // Code to run when the document is ready.
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
31 }
32
d244c32 @bobholt apply core styles to using-jquery-core sectione examples
bobholt authored
33 $( document ).ready( readyFn );
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
34 // or:
d244c32 @bobholt apply core styles to using-jquery-core sectione examples
bobholt authored
35 $( window ).load( readyFn );
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
36 ```
37
dda6278 @githubshrek Document Ready: Clarify what the shorthand form is
githubshrek authored
38 The example below shows `$( document ).ready()` and `$( window ).load()` in action. The code tries to load a website URL in an `<iframe>` and checks for both events:
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
39
c70d4bd @bobholt apply core styles to performance section, site-wide tweaks
bobholt authored
40 ```
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
41 <html>
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
42 <head>
9afaf67 @konklone Switch links to code.jquery.com urls to be https now that everything …
konklone authored
43 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
810becf @alimony Style/typography fixes and code style adherence in the jQuery Core se…
alimony authored
44 <script>
45 $( document ).ready(function() {
46 console.log( "document loaded" );
47 });
48
49 $( window ).load(function() {
50 console.log( "window loaded" );
51 });
52 </script>
53 </head>
54 <body>
55 <iframe src="http://techcrunch.com"></iframe>
56 </body>
d6a31c4 @ajpiano Long time coming: drop all ruby/nanoc in favor of wintersmith wrappe…
ajpiano authored
57 </html>
58 ```
Something went wrong with that request. Please try again.