JavaScriptのライブラリのひとつライブラリとはJavaScriptなどのネイティブ言語を、より使いやすくさせたファイルのことです。他のライブラリとの競合コンフリクトが起きることもあります。jQueryはJavaScriptを比較的簡単に習得できるメリットがあるのでぜひ習得しましょう。jQueryライブラリの読み込みhtmlにjQueryを読み込んでみよう読み込み方は2種類あります。1ファイルをダウンロードして読み込ませる方法jQueryダウンロードサイトへダウンロードしたファイルは、jsという名前とつけたフォルダを作りその中に入れ、htmlではlinkタグを使って読み込みます。src="js/jquery-3.3.1.min.js"></script>※minとついているファイルがあります。ファイル内の改行を削除した圧縮版ファイルという意味です。※scriptタグの属性「type="text/javascript"」という記述はhtml5より不要になりました。ネットワーク)で配信されているファイルを読み込ませる方法です。ファイルのダウンロードは必要ありませんが、ネット環境がないところでは使えなくなります。src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>上記はすべて同じことです。このような書き方をします。さしあたってローカル環境で実装する際はhttps:を入れておきましょう。"#00f");セレクタcssでも指定するあのセレクタです。htmlではタグ名やクラス名のことです。どの要素を対象にするかを指定します。")の中に入れるのがルールです。クオーテーションは"でも'でも大丈夫です。メソッド関数メソッドとは、jQueryという仕組みの中で決められている、特定の機能をもった命令です。エクセルでいう、TEXT()やCOUNTIF()関数のようなもので、この名称の後の()カッコの中に、対象となる値(引数ひきすう)を入れることで使用します。逆に言えば文字のあとにカッコ()があれば、それはメソッドであるということになります。いろんなプログラミング言語でこのような命令する機能が用意されています。メソッドと呼ばれていたり関数かんすうと呼ばれていたりします。イメージしやすいところで言えば、ロボットを動かすとなったときに「右足を出す」とか「うなずく、あごを動かす」とか、そんな感じです。.addClass()要素にクラスを追加できます。.on()イベントを定義したりデータを渡すことができます。.click()要素をクリックしたときに、イベントを発生させます。.mouseover()要素にカーソルが乗ると、イベントが発生します。.mouseout()要素からカーソルが離れると、イベントが発生します。.hover()要素にカーソルが乗ったときと離れた時どちらもイベントが発生します。.text()要素内のテキストを取得または書き換えることができます。.show()非表示になっている要素を表示させます。.hide()表示されている要素を非表示にします。.toggle()showとhideの機能が一つになったもの。showとhideをクリック毎に交互に行います。.animate()アニメーションを作成します。.fadeIn()要素をフェードインで表示にします。.fadeOut()要素をフェードアウトで非表示にします。.change()input/select要素などの中身が変更されたときにイベントが発生します。この時点では全て覚えなくても良いです。なんとなくこんなことできるのだなぁ程度で見てみましょう。パラメータ引数ひきすうとも呼ばれます。メソッドを使うときの対象となる値を入れます。食べるというメソッドがあったとして、パラメータには食べ物を入れるというイメージです。具体的な動作となります。プログラミングではこのように、機能に値を入れて具体的な動きを作り出します。それぞれのメソッドに対応した書き方で、パラメータ値を入れます。*/実行タイミングの宣言html文章(ドキュメント)の読み込みが済んだらjQueryを実行したいので、その指示を入れます。*/});1は2を省略した形で同じ意味です。ほとんどは1の書き方でOKです。});});html文章が読み込まれる前にjQueryが実行されてしまうと、指定しているセレクタがまだ存在しない状態となります。セレクタが存在しないため、jQueryがエラーとなることを防ぐために、htmlを読み込み完了したときにjQueryを実行させるために必要なものとなります。以下のindex.htmlファイルを作成し、新たにフォルダに入れましょう。JavaScriptはCSSファイルのように外部ファイルに記述することが好ましいですが、ここのページではひとまずhtmlに直接scriptタグに入れて記述していきます。//ここにjQueryを記述します</script><body></body></html>以下に紹介するいろんなイベントを記述して実行してみましょう。クリックイベントボタンクリックをトリガーとして文字の色を変更するサンプルです。これは"changeColor_btn"というidがついている要素をクリックした時に"box"というidがついている要素内の文字色を変更しています。クリックをトリガーとして文字の色を変更するサンプルです。"box"というidがついている要素内の文字色を変更しています。/*box要素の文字の色を変更します。ホバーイベント背景色を変更するサンプルです。これは"text"というクラスがついている要素にマウスを乗せた時に"text"要素の背景色を変更しています。背景色を変更するサンプルです。"text"要素の背景色を変更しています。クラス'hover_on'を付与します。クラス'hover_off'を付与します。});});ここで$(this)ディスという表記が出てきました。これはイベントを発生させる要素$('#text')のことを指します。イベントを適応させる要素が複数ある場合に$(this)にしておかないと、すべての要素に適応されてしまいます。いまは「処理の中ではイベントを発生させる要素は$(this)と書くんだな」と覚えておいてください。クリックされた要素の次にあるdivを表示させる。ウィンドウを1pxでも動かしたらこの中の処理が開始されます。高さが100px超えたらボタンがゆっくり表示されます。高さが100px以内になったらゆっくり消えます。その表示されているボタンをクリックするとページの一番上に移動します。同名のクラスすべて対象となってしまいますので注意しましょう。$this」で検索してみましょう。});});html内でどんな要素が登場して、その要素それぞれがどんなタイミングでどのような挙動をしてほしいかを考えてみましょう。jsでは「ホバーしたときに、子要素を表示する」という処理を書きますので、表示されている要素の中に小要素が入るようにします。</ul></div>ツールチップ先端の三角形はcss疑似要素「::after」を使っています。質問などあればSlackで。バックエンドデザイン学習に関するご質問はこちらまで技術的な質問はSlackにログインして問い合わせてください。返答までお時間かかることもあります。