【初級編DAY15】jQueryを学ぼう①
DOM操作を含めたJavaSprictの基礎を学んだところで、jQueryの学習に入っていきましょう！
■jQueryとは？■
JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの
メリット
- 短いコードで簡単に記述が可能
- 便利なライブラリが豊富
ライブラリとは：JavaScriptを使った開発作業において汎用的に使える機能を再利用できるようにまとめたもの。様々な人が作業を重複して行うのではなく、誰かが一度作った機能は広く共有し、よりクリエイティブな作業に集中できるようにしようというものです。
jQueryを使うための準備
■CDNとは■
Content Delivery Networkの略
ファイルを手元にダウンロードしなくても簡易的に活用できる仕組み
CDN読み込み方法
①jQuery公式サイトのCDNsのセクションから外部で提供してくれているjQueryのURLを読み込みします。
Google、マイクロソフト、CDNJS、jsDelivrのどれかをクリックして、スニペットコピーします。
②HTMLファイルに記入
<!-- 先にjQueryを読み込む -->
<script src="./js/script.js">
/* ここに自分のコードを記述する。外部ファイルとして読み込んでもOK */
</script>
</body>
先ほどjQuery公式よりコピーしたスニペットを自分のHTMLファイルへ記入します。
注意点
- </body>タグの直前に記入する。
- jsファイルよりも上（先）に記入する。
以上でjQueryの読み込みは完了です！
こちらのサイトを参考にさせて頂きました。
👇CDNについてもっとよく知りたい方はコチラ👇
jQueryを書く時のルール
■基本記述■
とりあえず、jQueryがどのように便利なのか、下記にて確認をしてみましょう。
id#titleのtextを書き換えたいとき、JavaSprictとjQueryの書き方の違いは以下となります。
jQueryのほうがすっきりして、処理が分かりやすいね！
では実際にjQueryを使っていきましょう。
セレクタ（HTML要素）の指定方法【jQuery("セレクタ")】
jQueryで操作したいセレクタ（HTML要素）を指定してみましょう。下記のように指定することで一致するすべての要素を取得します。
基本記述
// idで指定
// classで指定
// タグで指定
// 属性で指定
■セレクタの指定方法■
- id・・・#id名（＃シャープ）
- class・・.class名（.ドット）
- タグ・・タグ名（そのまま）
- 属性・・[属性名]（大かっこ※href要素などの属性の中に""がある場合は外側は''シングルで囲いましょう。例(’[href=”http://〇〇”]’
これでjQueryからHTML要素を指定して操作することが可能となります。
JavaSprictのdocument.querySelectorAll("セレクタ");と同じ意味合いですね！
👇JavaSprictの復習はコチラ👇
では、上記では一致したHTMLの要素がすべて指定されているので、その中からプロパティの指定をしていきましょう。
メソッド("パラメータ")
これまでで、jQueryを使用してHTMLの要素を取り出すことをしました。その際返ってきた情報は該当するHTML要素に関するすべての情報が載っていたかと思います。
では、その中から操作する場所を指定、変更してみましょう。
基本
クラス名.titleを指定し、css要素のcolorを"red"へ書き換えている
こちらの書き方でいろいろな要素の操作が可能となりますので、覚えておきましょう！
詳しくはDAY16で解説しています。
さて、jQuery()で一致したすべての要素の指定ができることがわかりました。
そうなるとJavaSprictのdocument.pueryselectorAllと同様となりますので、こちらも個別に操作が必要な際は繰り返し処理が必要となります。
繰り返し処理【.each(function)】
■.each(function)とは■
繰り返し処理を行うことができるメソッド
例
//一致する全ての要素が取得される
//個別に操作するためには繰り返し処理が必要
elements.each(function () {
});
解説
- jQueryでclass名.textの要素をすべて変数elementsに格納
- elementsに対して繰り返し処理を実行
- console.log内
jQuery(this).text()・・・jQueryで現在処理されている要素（ここでいうとelements)のTEXT情報（innerText）を指定している。 - これがオブジェクトが終わるまで繰り返される。
■thisとは？■
様々なものを指し示す変数。現在処理されている要素が繰り返しの都度入れ替わりでその変数に入っているイメージ。
JavaScriptのforEachとよく似ているね！
複数のセレクタを指定する
jQueryを使用する際に、まとめてセレクタを指定したり、子要素や孫要素を指定することも可能です。
まとめてセレクタを使用
カンマで区切ることで複数のセレクタを指定することが可能です。
例
class名.ABCとクラス名.abcを指定することが可能
子要素や孫要素などの条件を追加して指定
書き方により、「.〇〇の下にある.△△を呼び出す」と複数の条件を追加することが可能です
他にも様々な条件でセレクタの指定が可能となります。
公式サイトで確認をしておきましょう。
Selectors | jQuery API Documentation
メソッドを使った要素の指定【Tree Traversal】
jQuery(”セレクタ”)を起点とし、親子要素や兄弟要素を直接指定するメソッドが存在します。
■Tree Traversalとは■
樹形図のように親子関係がある要素を辿って指定できること。 これらのメソッド。
■使用メソッド■
.children()・・・子要素
.find()・・・子孫要素
.find()・・・子孫要素
例
// #sectionを起点に子孫要素のpタグを操作
// #sectionを起点に子要素のpタグを操作
#sectionのそれぞれの関係要素のpにcssでカラーを赤に変更している
解説
<section class="oyayouso">
<p class="koyouso"></p>
<p class="koyouso">
<p class="magoyouso"></p>
<p class="magoyouso"></p>
</p>
</section>
子孫要素とは：親要素を起点に子要素以下の階層から検索できる
子要素とは：親要素を起点に直属の子要素のみ検索できる。
メソッドを使った要素の指定はほかにもたくさんあります。
Tree Traversal | jQuery API Documentation
.parents()・・・先祖要素
.parent()・・・親要素
.next()・・・次の兄弟要素
.prev()・・・前の兄弟要素
.children()・・・子要素
.find()・・・子孫要素
ワンポイント
jQuery(function(){})について
これからコードを記述するにあたり、jQuery(function(){})という記述を見かけることがあるかと思います。
こちらのコードは「HTMLをすべて読み込んだ後に処理を実行するための記述」となり、HTMLよりも前に記述を行った際に必要なコードとなります。
通常HTMLは上から下に読んでいるので、HTML要素が読み込まれる前にjQueryが記述されるとないものを指定することとなりうまく動かくなってしまいます。
それを防ぐために、このコードがあった際はHTMLの読み込みが完了するまでは待機し、読み込みが終わった後にjQuery(function(){})が読まれるようになっています。
JavaScriptを読み込む位置を</body>の直前にすることで、HTMLがすべて読み込まれた後にJavaScriptの処理が実行されます。その場合はjQuery(function(){} で囲う必要はありません。
だから</body>の直前に書くことを推奨されているんだね！
こちらのサイトを参考にさせて頂きました。
👇よくわかる解説はコチラ👇
jQueryの省略
通常jQuery("セレクタ").メソッド("パラメータ")と記述すると記載しましたが、実はjQueryの部分を＄で省略することも可能なんです！
下記二通りの記述の仕方を記載しましたが、どちらも同じ意味となります。
しかし、注意が１つあり、WordPressではそのまま$()を使用することが出来ないので、覚えておきましょう。
どんどん難しくなってきましたね・・
JavaSprictを学んでからjQueryを勉強すると少し考え方の違いがあり戸惑うところもありますが、JavaSprictは頭の片隅に置きながらまた新しくこの便利なjQueryについで学んでいきましょう！
今日はここまで！٩( ''ω'' )و
お疲れ様でした。
