BETA

jQuery 読み込みの基本

投稿日:2019-02-02
最終更新:2019-02-02

jQuery 読み込みの基本

HTML の基本構成

<!doctype html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>jQuery DEMO</title>  
</head>  
<body>  

<!-- コンテンツ -->  
本文  

<!-- プラグイン読み込み -->  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  

<!-- スクリプト記述 -->  
<script>  
$(function() {  
  alert("Hello, World!");  
});  
</script>  

</body>  
</html>
  • script を読み込む
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    
    • ライブラリを配信している CDN というサービスを利用し、上記のようにURLを指定して読み込むことができる
    • ローカルにライブラリをダウンロードし、そのパスを指定することもできる
    • <head></head>の中で読み込むことも、<body></body>の任意の箇所で読み込むこともできる
    • <body>の最後に記述することが多い
      • HTML は上から順に読み込まれるため、 JavaScript の読み込みより コンテンツの読み込みを優先させるため
  • script の読み込みより下で jQuery の命令を記述する

    <script>  
    $(function() {  
    alert("Hello, World!");  
    });  
    </script>
    
    • 一番シンプルな JavaScript だと以下のようになる

      <script>  
      alert("Hello, World!");  
      </script>
      
      • この場合このスクリプトが現れた瞬間に処理が実行される
        ex.1)

        <html>  
        <head>  
        <script>  
        alert("Hello, World!");  
        </script>  
        </head>  
        <body>  
        本文  
        </body>  
        </html>
        

        ⇒アラートで「OK」を押すと「本文」が画面に表示される

        ex.2)

        <html>  
        <head>  
        </head>  
        <body>  
        本文  
        <script>  
        alert("Hello, World!");  
        </script>  
        </body>  
        </html>
        

        ⇒「本文」が画面に表示されたあと、アラートが表示される

    • jQuery を読み込む単純な方法は以下

      <script>  
      $(document).ready(function(){  
      alert("Hello, World!");  
      });  
      </script>
      

      ⇒ドキュメントが準備完了(コンテンツの読み込みが完了)したら アラートを表示する
      ⇒これだと上部に書いてもコンテンツが最後まで読み込まれた後に jQuery が実行される

      • 一般的に以下の省略形が用いられる
        <script>  
        $(function(){  
        alert("Hello, World!");  
        });  
        </script>
        
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@dr3mmsの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!