はじめに
JavaScript記事はこちらです。
JavaScript(以下、JS)を学んでいく上で、今回はjQueryというものに出会ったので、
jQueryについて1つずつ整理していきます。
私はVScodeでコードを書き、ブラウザでHTMLファイルを開いております。
そして、検証（ブラウザ上で右クリック）のconsole項目に反映されているのか確認しております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。
jQueryについて
ユーザーから見えるWEBページの見た目部分は、HTML・CSS・JSで作成する流れです。
① HTMLでWebページの構成(マークアップ)を行う。
② CSSでスタイルを装飾する。
③ JSでWebページに動きをつけることができる。
そして、そのJSを簡単に作ることができるのがjQueryとなる。
jQueryのプラグイン
プラグインとは、jQueryの拡張機能であり、パッケージとなっている。
以下、URLが参考になりました。
jQueryの導入
*この辺は実装次第、訂正するかもです。
*こんな感じかなというニュアンスで見て頂ければ・・・
①動かしたいページのHTMLへjQuery CDNを書き込む。
CDNについては以下、URLが参考になりました。
jQuery CDNについて
②適用したいプラグインファイルを書き込む。（ネットからダウンロードできるようです。）
③CSSへ①と②を書き込む。
といった流れのようです。
JSとjQueryの文法の比較
私が学習をする上で、混乱してしまったので、整理してみました。
JS : HTML要素のid名やクラス名を指定することで、マッチするノードを取得できる。
jQuery : セレクタと呼ばれるHTML指定方法を用いることで、HTML要素を取得できる。
早速比較してみます。
①id要素を取得する
// JS
document.getElementById("id名");
// jQuery
$("#idSelector") // $がJSでいうdocumentとなります。
②class要素を取得する
// JS
document.getElementsByClassName("クラス名"); //idとは違い、複数のclassがある為、Elementにsがつきます。
// jQuery
$(".classSelector") //取得したいHTML要素のclass属性の値に.（ドット）を付ける。
③新しいclass要素を追加する
// JS
classList.add(追加したいクラス名)
// jQuery
addClass(追加したいクラス名)
④指定したclass要素を削除する
// JS
classList.remove(削除したいクラス)
// jQuery
removeClass(削除したいクラス名)
さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。