ProgateでjQueryを学習

自分用メモ

随時追記していく

※参考：Progateとは？魅力や欠点、学習の順序や心得など

jQueryとは？

Webブラウザ用のJavaScriptコードをより容易に記述できるようにしたJavaScriptライブラリ。
煩雑なプログラムの記述を、より少ない記述で実現する事が可能になる。
利用する為には、開発しているHTMLの中にjQueryを読み込む必要がある。

※参考：クリエイティブ、プログラミング用語まとめ

学習コース jQuery 初級編

Progate

jQuery 学習コース初級編 | Progate

https://prog-8.com/lessons/jquery/study/1

Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

jQueryを使うと、Webページにアニメーションや効果を付ける事や
ユーザーの行動に応じたインタラクティブなデザインを実現できる

①jQueryの基礎

jQueryに触れてみよう

メソッドを使ってみよう

アニメーションを使おう

classとid

要素を表示しよう

★jQueryとは
JavaScriptのライブラリの１つ
ユーザーのクリックに反応して表示されるフォームやアニメーションなど
HTMLとCSSだけでは実現できない様々な動きを実現できる

★jQueryの書き方

$(‘セレクタ’).メソッド(引数);

セレクタ：何を
メソッド：どうするか

「S(‘セレクタ’)」で、jQueryオブジェクトを作成する
「.’メソッド(引数)’」で、メソッドの呼び出しを行う
→セレクタの周りはクォーテーション（）が必要
→メソッドの周りはクォーテーションは不要。

jQueryはJavaScriptなので、文末にはセミコロン（;）を忘れずに
コメントもJavaScriptと同様に「//」を用いる

jQueryの使い方は、以下の２つが基本となる
①jQueryオブジェクトを作成する
②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す

ーーーーーーーーーーーーーーーーーー

★アニメーションを使おう

$(‘セレクタ’).fadeOut();
//要素を隠す際に、徐々に消えていくアニメーションを追加

$(‘セレクタ’).fadeOut(1500);
//引数でアニメーションの速度を1500ミリ秒（1.5秒）に指定

fadeOutメソッドを用いると、要素を隠す際に、
アニメーションを付ける事ができる
fadeOutメソッドは、後ろの()内に引数として、
アニメーションの速度を指定できる
ミリ秒での指定や、文字列での指定が可能

$(‘セレクタ’).slideUp();
//要素を隠す際に、下から上へスライドするアニメーションを追加

$(‘セレクタ’).slideUp(1500);

ーーーーーーーーーーーーーーーーーー

★classとid
idは箇所しか使えないが、classは何箇所でも使える
より上の構造でidを、より下の構造でclassを使うべき？

リスト1
リスト2

ーーーーーーーーーーーーーーーーーー
★classとidをセレクタにする
idには最初に「#」を、classには最初に「.」を付ける

【stylesheet.css】
ーーーーーーーーーーーーーーーーーー
#list {
margin: 10px;
}
//idセレクタ（#）

.list-item {
color.blue;
}
//クラスセレクタ（.）

【script.js】
ーーーーーーーーーーーーーーーーーー
$(‘#list’).css(‘margin’, ’20px’);
//idセレクタ（#）
$(‘.list-item’).css(‘color’, ‘red’);
//クラスセレクタ（.）

jQueryで操作対象のHTMLを選択するには、jQueryメソッドを使う
jQueryメソッドは利用頻度が多いので、「$()」と省略して記述できる
「$()」と「jQuery()」は同じ意味
()の中には、HTML要素を特定するための「セレクタ」を指定する
セレクタの指定方法は、CSSと同じものが一通り使える
id属性には「#」を、class属性には「.」を最初に付ける

ーーーーーーーーーーーーーーーーーー
★演習問題
slideUpやfadeOutは、jQueryの表示・非表示に関するメソッド

$(function() {
// slideUpメソッドを用いて、「#title」の要素を隠してください
$(‘#title’).slideUp();

// fadeOutメソッドを用いて、「.lesson-item」の要素を隠してください
$(‘.lesson-item’).fadeOut();

});

jQueryでよく使うメソッドは以下を参照