jQueryをCDNで読み込んでみよう

1. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内の「index.html」を開く
2. https://code.jquery.com/にアクセスして、jQuery 1.xの「minified」のコードをコピー

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

3. コピーしたコードを </body>の手前に貼り付ける

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</body>

4. 上書き保存

<script src="jQuery本体のファイルパス" type="text/javascript"></script>
<script type="text/javascript">
  ここにjQueryの処理を記述
</script>
</body>

HTML5 の場合は type属性を省略できる

<script src="jQuery本体のファイルパス" type="text/javascript"></script>
<script src="JSファイルのパス" type="text/javascript"></script>
</body>

HTML5 の場合は type属性を省略できる

外部のJSファイルを読み込もう

1. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内の「index.html」を開く
2. 「app.js」を読み込むscript要素を記述

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>

3. 上書き保存

DOMが読み込まれてから、
スクリプト実行しよう。

ブラウザにHTMLの読み込みが終わってから処理を実行する為に、
「ready」というメソッドを使って、
DOMの準備ができてからスクリプトを実行させる。

$(document).ready(function() {
  ここにjQueryの処理を記述
});

なお、readyメソッドは以下のように省略することも可能。

$(function() {
  ここにjQueryの処理を記述
});

1. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内に「app.js」を作成
2. 「app.js」にはじめてのjQueryを記述

$(function() {
  // ここにjQueryのコードを記述
});

3. 上書き保存

$(セレクタ).メソッド名(パラメータ)
  〇〇に        〇〇する  

はじめてのjQueryを書いてみよう。

1. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「app.js」を開く
2. 「app.js」にはじめてのjQueryを記述

$(function() {
  // ここにjQueryのコードを記述
  $('body').text('はじめてのjQuery');
});

3. 上書き保存
4. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「index.html」をブラウザで開く
5. 「はじめてのjQuery」と表示されているかを確認

メソッドチェーンを使ってみる

1. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「app.js」を開く
2. 「app.js」に css() というメソッドを追記

$(function() {
  // ここにjQueryのコードを記述
  $('body').text('はじめてのjQuery').css('color', 'red');
});

3. 上書き保存
4. 「jquery-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「index.html」をブラウザで開く
5. 「はじめてのjQuery」が赤文字で表示されているかを確認

jQuery独自のセレクタを使ってみよう。

1. 「jquery-lessons」 › 「chapter01」 › 「filter」フォルダ内の「app.js」をテキストエディタで開く
2. 下記を参考にjQueryのフィルターを記述

$(function () {
  // :first ・・・ 先頭の要素のみ
  $('li:first').css('color', '#c00');

  // :last ・・・ 最後の要素のみ
  $('li:last').css('color', '#00c');

  // :eq() ・・・ 指定したインデックス番号の要素のみ（0から始まる）
  $('li:eq(2)').css('color', '#0c0');

  // :even　・・・ 偶数の要素
  $('li:even').css('background-color', '#eee');

  // :odd　・・・ 奇数の要素
  $('li:odd').css('background-color', '#ddd');
});

3. 上書き保存
4. 「jquery-lessons」 › 「chapter01」 › 「filter」フォルダ内にある「index.html」をブラウザで開く
5. 適切な要素にcssメソッドが反映してるかを確認

• jQueryは、jQuery本体を読み込む必要がある
• セレクタで要素を指定し、メソッドで処理を実行する
• セレクタはCSSと同じものとjQuery独自のものがある