Progate jQuery学習
内容
初級
・jQueryのつかいかた
$(‘セレクタ’).メソッド(引数);
「$(‘セレクタ’).」でjQueryオブジェクトを作成し（何を）、「メソッド(引数)」でそのjQueryオブジェクトに対してメソッド（機能）を呼び出す（～する）。
セレクタ部分にはタグ名やクラス名などを指定する。指定したタグやクラスにメソッドによった動きがでる。
・hide 要素を隠すメソッド
・fadeOut 要素を隠す際に、徐々に消えていくというアニメーションを追加
$(‘セレクタ’).fadeOut(1500);
要素が消えていく速度を1500ミリ秒(1.5秒)に指定
逆に、fadeInメソッドもある。引数でslow(ゆっくり)に指定できる。
・slideUp 要素を隠す部分が下から上にスライドするアニメーション
$(‘セレクタ’).slideUp1500);
要素が下から上に消えていく速度を1500ミリ秒(1.5秒)に指定
逆に、slideDownメソッドもある。引数でslow(ゆっくり)に指定できる。
・id HTMLでタグに名前をつける方法。classと違い同じ名前のidは一度しか使えない
しかし、ひとつしかない分処理が高速化される。できるだけidを用いるのが好ましい。
CSS、jQueryで呼び出すときは、名前の前に#をつける。（classは.をつけた）
・show 隠れた要素を表示するメソッド
CSS img{display:none;}
jQuery ${‘img’}.show();
・イベント アニメーションを行うタイミングを設定できる
構文には関数を用いる
$(`セレクタ`).イベント名(function(){実行したい処理};)
・click セレクタがクリックされたときに処理を行う。
<div id = “hide-text”>テキストを隠す</div>
<div id = “text”>ボタンをクリックすると文章がかくれます</div>
$(‘#hide-text’).click(function(){
$(‘text’).hide();
});
例 $(‘p’).css(‘color’,’red’); pタグの色を赤に変更
・text HTMLの文章を変える
・html HTMLを変える。textと違うのは文字列ではなくHTMLそのもの
・this $(this)はイベントの中でそのイベントが起こった要素を取得できる
例えば、クリックされた部分だけ赤にするなど。クラス名をセレクタにするとクリックされていない同じクラス名のものまで赤になってしまう。
例 $(‘セレクタ’).click(function{
$(this).メソッド();
$(‘親要素’).hover(function{
$(this).find(‘子孫要素’).メソッド();
・オブジェクトは変数にできる var $div = $(‘div’);
・メソッドチェーン 同じオブジェクトを複数回使う時は、連鎖的にメソッドを繋げることができる
$(‘セレクタ’).メソッド(), メソッド(), メソッド(), . . . .
・find すべての子孫要素から、指定したセレクタをもつ要素を取得できるメソッド
$(‘親要素’).find(‘子孫要素’).メソッド();
・children すべての子要素から、指定したセレクタをもつ要素を取得できるメソッド
・hover マウスを乗せたとき、はすれたときに指定された処理を行うイベント
乗せたとき、外したときとで、引数がふたつ必要
$(‘div’).hover(function(){
マウスを乗せた時の処理
},
function(){
マウスを外したときの処理
}
);
中級
・jQueryの読み込み
<script src=”script.js”></script> で読み込み
</body>の直前に書くと、Webページの表示速度をより早めることができる。
・jQueryの型
$(function(){この中にjQueryを書く});
・モーダル clickイベントなどにもとづいて、表示/非表示が行われる要素
モーダルにするステップ
- モーダルをCSSで非表示にする 表示を消す display:none;
- ログインボタンにclickイベントを設定 クリックしたらアクション
- clickイベントでモーダルを表示 クリックで表示
htmlに箱をつくる（常に表示） → htmlの箱とボタンに名前をつける（複数あるものはclass ひとつのものはid） → cssで箱を消す → scriptでクリックしたら箱が表示されるようにする
・モーダルを消す
html 箱に閉じるマークを設定 → script 閉じるマークをクリックしたら消えるように設定
・アイコンにマウスが乗ったときだけ紹介文を表示
html アイコン、紹介文に名前をつける → css 紹介文を消す → script hoverを設定
・addClass 指定した要素にclassを表示できる
・removeClass 指定した要素からclassを取り除く
CSSにdisplay:none;で文を消しておく → CSSにdisplay:block;のclassをつくる → マウスを乗せたときaddClass(クラスのすり替え) none→block 紹介文が現れる → マウスを外したときremoveClass （blockのクラスが外れる）block→none紹介文消える
・アコーディオン機能 質問をクリックするとその答えがスライドして表示/非表示される
CSSで答えの文を消しておく
→質問に同じclass名をつける
→クリックしたらその文が現れるようにする
※クリックしたら表示 openクラスを設定しておき、クリックしたらopenクラスがついて文が表示される。
同じクラス名をつけているのでクリックされたものとされていないものを差別化するために$(this)を使う。
・hasClass 引数に指定したクラスをオブジェクトがもっていればtrue、いなければfalse
<div class = “answer”> $(‘answer’).hasClass(‘open’); false
<div class = “answer open”> $(‘answer’).hasClass(‘open’); true
openクラス（質問の答え）がついているか？ if文
ついていれば、質問の答えが見えているということなのでopenクラスをはずす
slideUpで文を消す ＋→− textメソッドで書き換え
ついていなければ、質問の答えが見えていないということなので、openクラスをつけ、質問の答えを表示する。
slideDownで文を表示 −→＋ textメソッドで書き換え
※addClass removeClassについて
classのつけ外しなので、最初の表示に反映させたいものはhtmlに記述しておく
クリックなどのアクションで表示を変えたいときは、CSSにつけるclassを設定しておき、クリックでCSSにあるclassが要素の上書きされる。
よって、変化後、上書き後のclassはHTMLには記述しない。
上級
・iQueryオブジェクトにはインデックス番号がある。
<li>インデックス1
<li>インデックス2
<li>インデックス3
$(‘li’)
・eq 指定したインデックス番号の要素のみを取得できるメソッド
$(‘li’).eq(‘取得したい要素のインデックス番号’)
・スライド機能
まずはすべてのスライドをdisplay:none;で見えなくする。
表示したいスライドにactiveと名付けたclassをつけ、CSSでactiveクラスをdisplay:block;にする。
・index 指定のclassをもつインデックスのみを取得できる。
<li>インデックス１
<li class=”active”>インデックス2 取得したいインデックス
<li>インデックス3
$(‘li’).index($(‘.active’)) インデックス２が取得できる
・クリックされた要素の取得
$(‘たくさんの要素’).click(function(){
var index = $(‘たくさんの要素’).index($(this));
});
クリックされた要素を取得し関数indexに代入
var clickedIndex = $('.index-btn').index($(this));
$('.slide').eq(clickedIndex).addClass('active');
index-btnとslideが対応しているので、取得したindex-btnのインデックス番号をslideに適応すると対応したslideが表示される。
ボタンと画像などを一対一対応させたいときは、それぞれ同じclass名をつけて対応させたい順に並べる。
・prev jQueryオブジェクトの同じ階層の要素からひとつ前の要素を取得
・next jQueryオブジェクトの同じ階層の要素からひとつ後の要素を取得
<li>ひとつ前
<li id =”centar”>
<li>ひとつ後
$(‘center’).prev().メソッド ひとつ前
・次へ前へボタン
前へボタンをclick → prevでひとつ前の要素を取得 → 表示
後へボタンをclick → removeでひとつ後の要素を取得 → 表示
ボタン複数の処理
ボタン複数にそれぞれclassを設定し、ifでそのclass名のボタンが押されたら処理、そのclass名のボタンが押されたら処理……とつくる。
clickのなかの関数には同時に起こしたい処理を羅列できる
・これ以上進めないときの前へボタンと後ろへボタンを消す
if slide要素のインデックス番号が０なら、前へボタンを消す
if slide要素のインデックス番号が３なら、後ろへボタンを消す
・関数をまとめる
var slideIndex =
var slideIndex =
→ function toggleChangeBtn(){
var slideIndex =
}
呼び出し toggleChangeBtn()
・attr HTMLの属性をセット
$(‘要素’).attr(‘属性’, ‘名前’) 要素に名前という属性をセット
var 関数名= $(‘要素’).attr(‘属性’) 要素の属性を取得し関数名に代入
・val inputタグに入力された値を取得するメソッド
select属性では選択されたid属性の値が取得される
$(‘select要素’).val(‘value属性’); select要素のvalue属性の値を選択
・submit ボタンやクリックされたときやエンターキーが押されたときにイベントが発生
・空文字列 中身のない文字列。’ ‘で表す。
・カスタムデータ属性 自分で作成できる属性
・animate アニメーションをつけるメソッド
$(‘セレクタ’).animate({‘プロパティ’: ‘値’}, ‘fastなど時間の指示’)
・aタグはページ内のリンクもつくることができる。
<a href = “#id名”> リンク
<div id = “id名“ > リンク先
・scrollTop ページ最上部から値pxの位置まで移動
$(‘html, body’).scrollTop(値)
アニメーションのつけかた
$(‘html, body’).animate({
‘scrollTop’:0
}, ‘slow’)
・offset 要素の表示位置を取得
$(‘セレクタ’).offset(); → {top:180, left:100}
$(‘セレクタ’).offset().top; → 180
感想
初級
HTML CSS Javascriptの応用なので、それらが完了してから行うべき
中級
３つのファイルに渡っているので、作業の流れをつかむのが大切
新規メソッド等の紹介ではなく、作業の流れをおぼえるパートなので
ここをこうしたからこうなると、因果関係を明確に
かなり難しかった
レッスン１、javascriptをかなり理解していないと難しい。というかできない。
上級
所要時間 ５時間
やはり積み重ねの部分(attrやvalの使用頻度が高かった)は理解が完全でない分難しい。
逆に新しい知識を覚えるパートはさくさく進める。
