【JavaScript授業十六日目】JQuery

●書き方2種類あるので画像の読み込み時は注意！

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <script>

    $(function () {

      ページ読み込み完了後の処理

      JQueryの強みはページ内要素の操作に長けている

      ページ内のすべての要素をプラウザが認識してから処理する

      window.alert('成功！');

    });

  </script>

・JQueryを利用する場合はジョンレシグさんが作成した

・JQuery本体ファイルを読み込まなければいけない読み込み方法2種類
    1.ファイルをダウンロードして読み込み
    2.CDNを利用して読み込み(推奨)
    今回は「2」を使ってJQuery本体ファイル読み込み
    ※JQuery本体ファイルは利用する前に読み込むこと

・JQueryが用意している便利なメソッドを使用することができる

・代表的なメソッド：$()

$('p').css('background-color', '#fcc');

・cssメソッド
    第1引数：CSSプロパティ
    第2引数：CSSプロパティに対する値
document.getElementById("aaa").style.backgroundColor = "#fcc";　JS
 　　 ↓
$('aaa').css('background-color', '#fcc');　JQ

●複数指定するとき

      $("#content").css({

        "background-color": "#ffc",

        "color": "green",

      });

・オブジェクト指定の場合、プロパティ名をクォートで囲まなくてもよいが「-」が入っているとエラーになるのでクォートで囲むことをおすすめ

      $('#content2')

        .css('background-color', '#fcc')

        .width(300);

●メソッドチェーン

同じ場所に複数の処理をするときは処理(メソッド)をつなげて記述する