自分用メモ
随時追記していく
※参考:Progateとは?魅力や欠点、学習の順序や心得など
jQueryとは?
Webブラウザ用のJavaScriptコードをより容易に記述できるようにしたJavaScriptライブラリ。
煩雑なプログラムの記述を、より少ない記述で実現する事が可能になる。
利用する為には、開発しているHTMLの中にjQueryを読み込む必要がある。
※参考:クリエイティブ、プログラミング用語まとめ
学習コース jQuery 初級編
jQueryを使うと、Webページにアニメーションや効果を付ける事や
ユーザーの行動に応じたインタラクティブなデザインを実現できる
①jQueryの基礎
jQueryに触れてみよう
メソッドを使ってみよう
アニメーションを使おう
classとid
要素を表示しよう
★jQueryとは
JavaScriptのライブラリの1つ
ユーザーのクリックに反応して表示されるフォームやアニメーションなど
HTMLとCSSだけでは実現できない様々な動きを実現できる
★jQueryの書き方
$(‘セレクタ’).メソッド(引数);
セレクタ:何を
メソッド:どうするか
「S(‘セレクタ’)」で、jQueryオブジェクトを作成する
「.’メソッド(引数)’」で、メソッドの呼び出しを行う
→セレクタの周りはクォーテーション(
)が必要→メソッドの周りはクォーテーションは不要。
jQueryはJavaScriptなので、文末にはセミコロン(;)を忘れずに
コメントもJavaScriptと同様に「//」を用いる
jQueryの使い方は、以下の2つが基本となる
①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でよく使うメソッドは以下を参照
②イベントを使おう
clickイベントcssメソッド
textメソッドとhtmlメソッド
this
変数とメソッドチェーン
③要素の取得
find・childrenhoverイベント
学習コース jQuery 中級編
Webページを作ろう
jQueryの準備
モーダルを表示しよう
モーダルを隠そう
hover機能の準備
addClass・removeClass
アコーディオンの準備
アコーディオンを完成しよう
学習コース jQuery 上級編
スライドを作ろう
eqメソッド表示するスライドを切り替えよう
indexメソッド
prevとnext
ボタンの表示/非表示
関数を使おう
lengthメソッド
フォームを操作しよう
要素の値を取得しよう入力欄の値を取得しよう
選択ボックスの値を取得しよう
フォームの入力チェックをしよう
入力欄への自動入力
選択ボックスの自動選択
ページ内を移動しよう
アニメーションをつけようページ内リンクを作ろう
スクロールにアニメーションをつけよう
ナビゲーションをつくろう
この記事へのコメントはありません。