jQuery での $(function() {}) の使用例-jsチュートリアル-php.cn

jQuery での $(function() {}) の使用例

php中世界最好的语言

リリース： 2018-04-23 16:50:04

オリジナル

3354 人が閲覧しました

今回は、jQuery での $(function() {}) の使用例をお届けします。jQuery で $(function() {}) を使用する際の注意事項は何ですか?見て。

$(function() {}); は、$(document).ready(function(){ }) の略語です。 (function(){ }) はページ内の window.onload を置き換えるために使用されていますが、今日、これは当てはまらないことがわかりました。ページ読み込みエフェクトをやっていた時に発見しました！

$(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>

ログイン後にコピー

If $(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>

ログイン後にコピー

概要: コードin

$(document).ready は、コンテンツがロードされた後に実行されます。ページがロードされると、script タグはその中のコードを実行します。タグ内で実行すると、まだロードされていないコードまたは DOM が呼び出されます。その場合、エラーが報告されます。

もちろん、script タグをページの最後に配置しても問題はなく、効果は

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの記事にある他の関連トピックに注目してください。

推奨読書:

jQuery バージョンアップの注意事項

jQuery での $ と $() の使用方法について詳しく説明します。

以上がjQuery での $(function() {}) の使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。