※ jQueryについて勉強したことをまとめたノートみたいなものです😎
HTMLにjQueryを読み込ませる。
//<body>の自分で作成したjsファイルよりも前にjQueryのjsファイルの読み込みを指定する。
<body>
<script src="jquery-3.4.1.min.js"></script>
<script scr="ファイル名.js"></script>
</body>
基本的な書き方
全部書いたコード↓
$(document).ready(function(){
// ここに実行させたい処理を記述していく。
});
省略可能なコードを削ったもの↓ こちらでOK👌
$(funcution(){
// ここに実行させたい処理を記述していく。
});
セレクタとメソッド
jQueryの基本の構文は「セレクタ」「メソッド」で成り立っている。
$(funcution(){
$(.text).css("color","#ff7c89");
});
- セレクタ = メソッドを実行する要素 要素を取得する際「$()」で取得。 複数の要素を指定したい場合は「,(カンマ)」で区切る。
- メソッド = 処理内容 「.css()」はjQueryオブジェクトのメソッド。
- jQueryのセレクタ指定に使用できる記号
| 記号 | 例 | 意味 |
|---|---|---|
| > | ul > li | ul要素の直下のli要素 |
| , | ul,li | ul要素とli要素 |
| + | ul + li | ul要素に隣接したli要素 |
| 半角スペース | ul li | ul要素の子要素以下のli要素 |
- 要素を指定するメソッド
| header1 | header2 | header3 |
|---|---|---|
| メソッド | 例 | 意味 |
| parent() | $(li).parent() | li要素の親要素 |
| children() | $(li).children() | li要素の子要素 |
| next() | $(li).next() | li要素の次の要素 |
| prev() | $(li).prev() | li要素の前の要素 |
| siblings() | $(li).siblings() | li要素の同列の兄弟要素 |