jQuery_jqueryの$(function() {});の詳細説明-jsチュートリアル-php.cn

jQuery_jqueryの$(function() {});の詳細説明

WBOY

リリース： 2016-05-16 15:46:10

オリジナル

1193 人が閲覧しました

$(document).ready() のコードは、ページのコンテンツが読み込まれた後に実行されます。コードが script タグに直接記述されている場合、script タグ内のコードはページの読み込み時に実行されます。今回は、タグ内で実行されたコードがまだロードされていないコードまたは DOM を呼び出した場合、エラーが報告されます。もちろん、script タグをページの最後に配置しても問題はありません。効果は準備完了と同じです。

$(document).ready(function(){}) は $(function(){});

と省略できます。

段落をクリックすると、この段落は非表示になります:

<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("p").click(function(){
  $(this).hide();
 });
});
</script>
</head>

<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

ログイン後にコピー

$(document).ready(function() {}) が削除された場合、段落を非表示にすることはできません:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $("p").click(function(){
  $(this).hide();
 });
</script>
</head>

<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

ログイン後にコピー

しかし、ページの最後にスクリプトを置くと、隠された効果を復元できます:

<html>
<head>
</head>

<body>
 <p>If you click on me, I will disappear.</p>
</body>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $("p").click(function(){
   $(this).hide();
 });
</script>
</html>

ログイン後にコピー

概要:

$(document).ready 内のコードは、ページのコンテンツが読み込まれた後に実行されます。ページが読み込まれると、script タグによって内部のコードが実行されます。コードがまだロードされていないコードまたは DOM を呼び出すと、エラーが報告されます。
もちろん、script タグをページの最後に配置しても問題はなく、準備完了と同様の効果が得られます