Last active
October 22, 2015 13:52
-
-
Save tasukujp/046063058872264dbba4 to your computer and use it in GitHub Desktop.
jQueryの実行タイミング確認
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery実行タイミングの確認</title> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script> | |
| // パターン1 | |
| $(window).load(function() { | |
| alert("これはwindow.loadのタイミングです。"); | |
| $('#window').text("実行されました。") | |
| .css('color','red'); | |
| }); | |
| // パターン2 | |
| $(document).ready(function() { | |
| alert("これはdocument.readyのタイミングです。"); | |
| $('#document').text("実行されました。") | |
| .css('color','red'); | |
| }); | |
| // パターン3-1 | |
| alert("これはインライン1のタイミングです。"); | |
| $('#inline1').text("実行されました。") | |
| .css('color','red'); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>jQuery実行タイミングの確認</h1> | |
| window.loadが<span id="window">実行されていません。</span><br /> | |
| document.readyが<span id="document">実行されていません。</span><br /> | |
| インライン1が<span id="inline1">実行されていません。</span><br /> | |
| インライン2が<span id="inline2">実行されていません。</span> | |
| <script> | |
| // パターン3-2 | |
| alert("これはインライン2のタイミングです。"); | |
| $('#inline2').text("実行されました。") | |
| .css('color','red'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
分かりやすかったです！