プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

JQueryを使用する為の準備

■JQueryを使用する為の事前準備について解説する
 
http://jquery.com/にアクセスし「DownLoad」を押下

 
②「Google CDN」を押下

 
③任意のバージョンのJQueryスクリプトを</body>の前に記載する

 
※jQuery3系の場合


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <p>Hello World!</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>

 
④JQueryを記述して使用できることを確認
※p要素のフォントを太字にする場合


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <p>Hello World!</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    //jQuery(document).ready(function(){
    //「jQuery(document).ready」は「$」と記述できる
    $(function() {
      $('p').css('font-weight', 'bold');
    });
  </script>
</body>
</html>

 
⑤ブラウザで確認すると下記のとおり、p要素の「Hello World!」が太文字で表示されている