#まずDOM操作とは？
「Document Object Model」の略で、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み。
本来は何もしていない状態のHTMLにはJavaScriptから手を出す事が出来ない。そこで、ファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOM。
参照: JavaScript初心者でもすぐわかる！DOMとは何か？
#メソッドとオブジェクトと関数
####オブジェクトとは？
jsで操作できる何か。ブラウザのウィンドウを表すwindowオブジェクトやコンソールを表すconsoleやwebページの内容を表すdocumentなんかがある。
オブジェクトは値の一種なので、変数やプロパティ(※プロパティとはそいつがどんな特性を持ってるのか表す情報)に入れる事ができる。
例えばconsoleやdocumentは、windowオブジェクトのプロパティ。だが、多くの場合省略可能でわざわざwindow.documentと書いたりする必要はなく、そのままdocumentだけで動かす事ができる。
####メソッドとは？
オブジェクトのプロパティに入れた関数の事。
####関数とは？
作り方
現在はES2015が主流だが、ES5の古い書き方だとletではなくfunctionだったりする
#繰り返し構文これだけは覚えとけ
for(let num = 0; num < 10; num++ ) {
console.log( num + '回目のハロー');
}
//解説文
//1. 新規作成した変数peopleを数値0で初期化し、継続条件「変数peopleが10より小さい」が真ならば、以下を繰り返せ
//2. {文字列「ハロー」をコンソールに表示しろ} 変数peopleに1を足す
=> //出力結果は以下
//０回目のハロー １回目のハロー ２回目のハロー ３回目の・・・ 10回目のハロー
//逆順にしたいなら
for (let num = 10; num > 0; num-- ) {
console.log( num + '回目のハロー');
}
//10ずつ増やしたいなら
for (let num = 10; num > 0; num+=10 ) {
console.log( num + '回目のハロー');
}
####forとwhileの違いは回数が指定できるかできないか
#振り仮名をふってみよう
| 1 | 2 | 3 |
|---|---|---|
| let | 新規作成 | |
| prompt | ユーザーに入力を促す、入力させる | メソッド |
| log | 表示しろ | メソッド |
| perseInt | 整数化せよ | 関数 |
| isNaN(引数) | 引数の中身が数値に変換不可ならtrue、可ならtrueを返せ | 関数 |
| >= | 左辺は右辺以上 | 演算子 |
| == | 左辺＝右辺 | |
| != | 左辺≠右辺 | |
| == | 左辺は右辺と厳密に等しい | |
| !== | 左辺は右辺と厳密に等しくない | |
| && | かつ(AND) | 論理演算子 |
| ! | ではない(NOT) | 論理演算子 |
| オブジェクト | 解説 | 参考リンク |
|---|---|---|
| document | ブラウザ上に表示されたドキュメントを操作できる | JavaScriptでdocumentオブジェクトを使う方法 |
| 1 | 2 | 3 |
|---|---|---|
| getElementById | htmlからidを取得する | |
| querySelector | セレクタで問い合わせる | idかclassか意識する必要なしで柔軟 |
| addEventListener | イベントリスナーを追加 | イベントとそれに対応する関数を結びつける |
| innerText | 内部にあるテキストを取得する | |
| classList | 後にaddやremoveを続けてクラスの追加・削除が簡単に行える | https://bityl.co/5vLy |
| onload | ページや画像が読み込みが完了した時点でイベントを実行・自動的に処理を実行したい場合など | https://bityl.co/5y3v |
| getAttribute | 属性値を取得する | 引数の属性から属性値を取得 |
| setAttribute | 属性値を設定する | 引数の属性にセット。新規属性の追加/既存属性を変更 |
| removeAttribute | 属性値を削除する | |
classListについては、今までjQueryでは簡単にできてたけど生jsではクソめんどくさかったクラスの追加・削除が簡単に実現できるようになるやつって覚えとけばokかな？
###addEventListenerの使い方
例えばハンバーガーボタンをクリックしたらメニュータブが開く、って時、内側ではこうなってる。
これをjsで表すと、以下のようになる。
変数.addEventLisner('click', 関数);
//または
変数.addEventLisner('click', () => {
関数内の処理
} );
#困ったらこれを見ろ
・フロントエンドエンジニア御用達の MDN web docs を網羅した
MDN web docsを、日本人にわかりやすいようにリンク分してくれ得ている。jsのみでなくhtml, cssなども網羅しているので、辞書的な感じで使える。それぞれチュートリアルもある。
#jQuery
jQueryで何をしてるかをざっくり言ってみると、
①操作したいHTML要素を取得
②何かのイベント(クリックされた〜とか)が起こった時に、取得したHTMLに操作（命令）を付与
取得方法は以下
| セレクタ | コード |
|---|---|
| 基本形 | $("セレクタ") |
| IDセレクタ | $("#Selector") |
| クラスセレクタ | $(".Selector") |
| 要素セレクタ | $("h1") |
####基本構文
$("セレクタ01").on('イベント',function(){
$("セレクタ02").メソッド(値);
});
#####主要メソッド一覧
| メソッド | 基本構文 | 使い所 |
|---|---|---|
| on() | 対象要素.on( イベント名, セレクタ, データ ,関数 ) | |
| css() | cssを上書きする | |
| remove () | 指定したHTML要素を削除する | |
| attr() | $("セレクタ").attr("変更したい属性名", "変更したい属性値 ") | HTML要素の属性値を取得・変更 |
| addClass () | $("p").addClass("red"); | 指定要素に引数のクラスを追加 |
| removeClass() | $("p").removeClass("red"); | 指定要素に引数のクラスを削除 |
| toggleClass() | $("p").toggleClass("red"); | 指定要素に引数のクラスを削除 |
| hide() | 要素を非表示に | |
| show() | 非表示の要素を表示に | |
| toggle | showとhideの機能をまとめたもの | |
| fadeIn() | $('セレクタ').fadeIn(かかるミリ秒) | 指定HTML要素をフェードイン |
| fadeOut() | $('セレクタ').fadeIn(かかるミリ秒) | 指定HTML要素をフェードアウト |
| fadeToggle() | $('セレクタ').fadeIn(かかるミリ秒) | 指定HTML要素をフェードイン・アウト |
| text | 要素内のテキストを取得・変更 | |
| children() | 子要素を取得 | |
| parent() | 親要素を取得 | |
| slideIn | 要素.slideIn（かかる秒数） | 要素を表示 |
| slideOut | 要素.slideOut（かかる秒数） | 要素を非表示 |
| slideToggle | 要素.slideToggle（かかる秒数） | 要素を表示・非表示どっちも |
#####主要イベント一覧
| 1 | 2 |
|---|---|
| cllick | クリックしたとき |
| mouseover | カーソルが要素の上に乗ったとき |
| mouseout | カーソルが要素の上から移動したとき |
| scroll | スクロールしたとき |
| load | ローディングが完了したとき |
#その他
js用のcssには-jsのプレフィックスをつけておくと管理しやすい
#参考リンク
・jQuery よく使うメソッドまとめ
・jQueryの基礎（概念・メソッド）