tolag3/mjon_git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
b2a89f11bd
mjon_git/src/main/webapp/WEB-INF/jsp/cnt/CNTDT_0000000343.jsp
hylee c59398486d mjon_git
2023-06-12 11:15:02 +09:00

475 lines
19 KiB
Plaintext
Raw Blame History

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]--><!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]--><!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]--><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="author" content="JS Foundation - js.foundation"><meta name="description" content=""><meta name="viewport" content="width=device-width">
<link href="//learn.jquery.com/jquery-wp-content/themes/learn.jquery.com/i/favicon.ico" rel="shortcut icon" />
<link href="//learn.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1" rel="stylesheet" />
<link href="//learn.jquery.com/jquery-wp-content/themes/learn.jquery.com/style.css" rel="stylesheet" /><script src="//learn.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script><script src="https://code.jquery.com/jquery-1.11.3.js"></script><script src="//learn.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script><script src="//learn.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script><script src="https://use.typekit.net/wde1aof.js"></script><script>try{Typekit.load();}catch(e){}</script><!-- at the end of the HEAD -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet" />
<link href="//learn.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css" rel="stylesheet" />
<link href="//learn.jquery.com/wp-json/" rel="https://api.w.org/" /><meta name="generator" content="WordPress 4.5.2" />
<link href="//learn.jquery.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flearn.jquery.com%2Fusing-jquery-core%2Fdocument-ready%2F" rel="alternate" type="application/json+oembed" />
<link href="//learn.jquery.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flearn.jquery.com%2Fusing-jquery-core%2Fdocument-ready%2F&amp;format=xml" rel="alternate" type="text/xml+oembed" />
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="projects">
<li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
<li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
<li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
<li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
<li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
</ul>
<ul class="links">
<li><a href="https://plugins.jquery.com/">Plugins</a></li>
<li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
<ul>
<li><a href="https://js.foundation/CLA">CLA</a></li>
<li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
<li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
<li><a href="https://contribute.jquery.org/code/">Code</a></li>
<li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
<li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://js.foundation/events">Events</a>
<ul class="wide">
</ul>
</li>
<li class="dropdown"><a href="https://jquery.org/support/">Support</a>
<ul>
<li><a href="https://learn.jquery.com/">Learning Center</a></li>
<li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
<li><a href="https://forum.jquery.com/">Forums</a></li>
<li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
<li><a href="https://jquery.org/support/">Commercial Support</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
<ul>
<li><a href="https://js.foundation/about/join">Join</a></li>
<li><a href="https://js.foundation/about/members">Members</a></li>
<li><a href="https://js.foundation/about/leadership">Leadership</a></li>
<li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
<li><a href="https://js.foundation/about/donate">Donate</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</section>
</header>
<div id="container">
<div class="constrain clearfix" id="logo-events">
<h2 class="logo"><a href="/" title="jQuery Learning Center">jQuery Learning Center</a></h2>
<aside>
<div id="broadcast"><a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img alt="Support the JS Foundation" border="0" height="100" src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation" width="400" /></a></div>
</aside>
</div>
<nav class="constrain clearfix" id="main">
<div class="menu-top-container">
<ul class="menu" id="menu-top">
<li class="menu-item"><a href="https://learn.jquery.com">Home</a></li>
<li class="menu-item"><a href="https://learn.jquery.com/about/">About</a></li>
<li class="menu-item"><a href="https://learn.jquery.com/contributing/">Contributing</a></li>
<li class="menu-item"><a href="https://learn.jquery.com/style-guide/">Style Guide</a></li>
</ul>
</div>
<form action="//learn.jquery.com/" class="searchform" method="get"><button class="icon-search" type="submit"><span class="visuallyhidden">search</span></button><label><span class="visuallyhidden">Search jQuery Learning Center</span> <input name="s" placeholder="Search" type="text" value="" /> </label></form>
</nav>
<div class="clearfix row" id="content-wrapper">
<div class="beta-ribbon-wrapper">
<div class="beta-ribbon"><a href="/about/#beta">Beta</a></div>
</div>
<div class="content-right twelve columns">
<div id="content">
<div class="post-heirarchy">Posted in: <a href="http://learn.jquery.com/using-jquery-core/">Using jQuery Core</a></div>
<article class="post-123 page type-page status-publish hentry" id="post-123">
<header class="entry-header">
<h1 class="entry-title">$( document ).ready()</h1>
</header>
<div class="entry-content">
<p>A page can&#39;t be manipulated safely until the document is &quot;ready.&quot; jQuery detects this state of readiness for you. Code included inside <code>$( document ).ready()</code> will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside <code>$( window ).on( &quot;load&quot;, function() { ... })</code> will run once the entire page (images or iframes), not just the DOM, is ready.</p>
<div class="syntaxhighlighter javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre>
&nbsp;</pre>
<div class="container">
<div class="line"><code><span class="comment">// A $( document ).ready() block.</span></code></div>
</div>
<div class="container">
<div class="line"><code>$( document ).ready(<span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">&quot;ready!&quot;</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>Experienced developers sometimes use the shorthand <code>$()</code> for <code>$( document ).ready()</code>. If you are writing code that people who aren&#39;t experienced with jQuery may see, it&#39;s best to use the long form.</p>
<div class="syntaxhighlighter javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre>
&nbsp;</pre>
<div class="container">
<div class="line"><code><span class="comment">// Shorthand for $( document ).ready()</span></code></div>
</div>
<div class="container">
<div class="line"><code>$(<span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">&quot;ready!&quot;</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>You can also pass a named function to <code>$( document ).ready()</code> instead of passing an anonymous function.</p>
<div class="syntaxhighlighter javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
</td>
<td class="code">
<pre>
&nbsp;</pre>
<div class="container">
<div class="line"><code><span class="comment">// Passing a named function instead of an anonymous function.</span></code></div>
</div>
<div class="container">
<div class="line">&nbsp;</div>
</div>
<div class="container">
<div class="line"><code><span class="function"><span class="keyword">function</span> <span class="title">readyFn</span><span class="params">( jQuery )</span> {</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="comment">// Code to run when the document is ready.</span></code></div>
</div>
<div class="container">
<div class="line"><code>}</code></div>
</div>
<div class="container">
<div class="line">&nbsp;</div>
</div>
<div class="container">
<div class="line"><code>$( document ).ready( readyFn );</code></div>
</div>
<div class="container">
<div class="line"><code><span class="comment">// or:</span></code></div>
</div>
<div class="container">
<div class="line"><code>$( window ).on( <span class="string">&quot;load&quot;</span>, readyFn );</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>The example below shows <code>$( document ).ready()</code> and <code>$( window ).on( &quot;load&quot; )</code> in action. The code tries to load a website URL in an <code>&lt;iframe&gt;</code> and checks for both events:</p>
<div class="syntaxhighlighter xml">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
</td>
<td class="code">
<pre>
&nbsp;</pre>
<div class="container">
<div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">&quot;https://code.jquery.com/jquery-1.9.1.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code>$( document ).ready(<span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">&quot;document loaded&quot;</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
<div class="container">
<div class="line">&nbsp;</div>
</div>
<div class="container">
<div class="line"><code>$( window ).on( <span class="string">&quot;load&quot;</span>, <span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">&quot;window loaded&quot;</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;<span class="title">iframe</span> <span class="attribute">src</span>=<span class="value">&quot;http://techcrunch.com&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">iframe</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-meta row">
<div class="bottom-links row">
<div class="prev six columns"><a href="http://learn.jquery.com/using-jquery-core/dollar-object-vs-function/">$ vs $() </a></div>
<div class="next six columns"><a href="http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/">Avoiding Conflicts with Other Libraries </a></div>
</div>
<aside class="meta-details six columns">
<h3>Last Updated</h3>
<ul>
<li class="icon-calendar icon-large" title="Last Updated"><span>January 16, 2017</span></li>
</ul>
</aside>
<aside class="github-feedback six columns">
<h3>Suggestions, Problems, Feedback?</h3>
<a class="button dark" href="https://github.com/jquery/learn.jquery.com/tree/master/page/using-jquery-core/document-ready.md">Open an Issue or Submit a Pull Request on GitHub</a></aside>
</div>
</article>
</div>
<div class="widget-area" id="sidebar" role="complementary">
<aside class="widget" id="chapter-listing">
<h3 class="widget-title">Chapters</h3>
<ul>
<li><a href="//learn.jquery.com/about-jquery/">About jQuery </a></li>
<li class="active"><a href="//learn.jquery.com/using-jquery-core/">Using jQuery Core </a>
<ul class="sub-chapter">
<li><a href="//learn.jquery.com/using-jquery-core/faq/">Frequently Asked Questions </a></li>
</ul>
</li>
<li><a href="//learn.jquery.com/events/">Events </a></li>
<li><a href="//learn.jquery.com/effects/">Effects </a></li>
<li><a href="//learn.jquery.com/ajax/">Ajax </a></li>
<li><a href="//learn.jquery.com/plugins/">Plugins </a></li>
<li><a href="//learn.jquery.com/performance/">Performance </a></li>
<li><a href="//learn.jquery.com/code-organization/">Code Organization </a>
<ul class="sub-chapter">
<li><a href="//learn.jquery.com/code-organization/deferreds/">Deferreds </a></li>
</ul>
</li>
<li><a href="//learn.jquery.com/jquery-ui/">jQuery UI </a>
<ul class="sub-chapter">
<li><a href="//learn.jquery.com/jquery-ui/widget-factory/">Widget Factory </a></li>
<li><a href="//learn.jquery.com/jquery-ui/environments/">Using jQuery UI </a></li>
</ul>
</li>
<li><a href="//learn.jquery.com/jquery-mobile/">jQuery Mobile </a></li>
</ul>
</aside>
</div>
<!-- #sidebar .widget-area --></div>
</div>
</div>
<footer class="clearfix simple">
<div class="constrain">
<div class="row">
<div class="six columns offset-by-three">
<h3><span>Books</span></h3>
<ul class="books">
<li><a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition"><img alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" height="114" src="//learn.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" width="92" /> Learning jQuery Fourth Edition <cite>Karl Swedberg and Jonathan Chaffer</cite> </a></li>
<li><a href="https://www.manning.com/books/jquery-in-action-third-edition"><img alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" height="114" src="//learn.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" width="92" /> jQuery in Action <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite> </a></li>
<li><a href="https://www.syncfusion.com/ebooks/jquery"><img alt="jQuery Succinctly by Cody Lindley" height="114" src="//learn.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" width="92" /> jQuery Succinctly <cite>Cody Lindley</cite> </a></li>
</ul>
</div>
</div>
<div id="legal">
<ul class="footer-site-links">
<li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
<li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
<li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
<li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
<li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
<li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
</ul>
<p class="copyright">Copyright 2018 <a href="https://jquery.org/team/">The jQuery Foundation</a>. <a href="https://jquery.org/license/">jQuery License</a> <span class="sponsor-line"><a class="do-link" href="https://www.digitalocean.com">Web hosting by Digital Ocean</a> | <a class="sp-link" href="https://www.stackpath.com">CDN by StackPath</a></span></p>
</div>
</div>
</footer>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1076265-1']);
_gaq.push(['_setDomainName', 'learn.jquery.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script><script type='text/javascript' src='//learn.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script><script type='text/javascript' src='//learn.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script><!-- at the end of the BODY --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
indexName: 'jquery',
inputSelector: 'input[name=\'s\']',
debug: true // Set debug to true if you want to inspect the dropdown
})" async></script>
Reference in New Issue View Git Blame Copy Permalink