DAY24.JavaScript・jQuery学習編 jQueryを学ぶ

01.jQueryとは

JavaScriptのライブラリ

JavaScriptをより簡単に記述できるようにしたもの

主にWebサイトやWebアプリケーションで使用される

プログラマーの間だと「jQueryはちょっと古い」
サイト制作・アプリ制作の現場ではまだまだ超絶現役

世界中のホームページの1/3以上を作っている
「WordPress」にもjQueryが採用されている

02.jQueryを使うメリットとJavaScriptとの違い

1.短いコードで簡単にかける

jQueryはJavaScriptよりも更に簡単にプログラムを書くことができる

JavaScriptで書いたら20行近くかかるコードが、jQueryで書けば2行で済む...

・実装スピードが早まる
・長いコードを読む必要もない
・バグの発見もラク
・保守性も上がる

2.ブラウザごとの対応がいらない

Chrome/FireFox/Safari/Edgeなど
各種ブラウザによって仕様が少しずつ異なる

Chromeではうまく動作していたのにFireFoxではエラーが出る…

JavaScriptでは、それぞれのブラウザに対応するためのコードを記述する

各ブラウザの仕様に合わせた細かい処理は、jQueryが受け持ってくれる

純粋にプログラムを書くことに集中できるのはjQueryを使う大きなメリット

3.便利なライブラリがたくさんある

jQueryにはたくさんのライブラリがある

画像を何枚かスライドさせる動きをつけたい…

自分でゼロから作らなくても
世界中のプログラマーが作ったスライダーライブラリが山ほどある

便利なライブラリはjQueryを読み込めば自由に使うことができる
※ライセンスによって商用利用できるものとできないものがある

03.jQueryの書き方のルール

1.jQueryのライブラリー本体を読み込む

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

2.jQueryで書いたファイルを読み込む

<script src="js/practice.js"></script>

3.jQueryの型

$(function() {
　//この中にプログラムを書いていきます
});

4.基本の書き方

基本の書き方ルールは英語に似ている

$("主語").動詞("補語");
①$マークで始まり
②function()で囲む
③$("主語").動詞("補語")の文法ルールで書く

5.HTMLからjQueryを使う方法

HTMLファイル上に自力でコーディングする際に必要になる知識

jQueryのライブラリはCDNを活用して読み込む

jQueryの公式サイトからリンクを取得することができる

※ CDNはファイルをダウンロードしなくても簡易的に活用できる仕組み

jQueryのURLを自分が記述するscriptタグの前に読み込んでおく

読み込む場所は、HTMLの</body>の直前

6.セレクタの指定の仕方3パターン

タグ名で指定
$("h2")

クラス名で指定
$(".lead")

ID名で指定
$("#js-for-web")

7.jQueryの代表的なメソッド

.text()　テキストを取得する
.text('変更したいテキスト')　テキストを' '内の文字列に変更する
.html()　HTMLを取得する
.html('変更したいHTML')　HTMLを' '内のHTMLに変更する
.click()　対象要素をクリックする
.prepend('要素')　要素の先頭にHTMLを挿入する
.append('要素')　要素の最後にHTMLを挿入する
.remove()　要素を削除する
.attr('属性')　指定した属性の値を取得する
.attr('属性', '値')　指定した属性の値を変更する
.removeAttr(属性名)　指定した属性を削除する
.addClass(class属性値)　class属性を追加する
.removeClass(class属性値)　class属性を削除する
.css(プロパティ名)　指定したCSSプロパティの値を取得する
.css(プロパティ名, 値)　指定したCSSプロパティの値を設定する
val()　フォームの入力値(value属性の値)を取得する
val('入力値')　フォームの入力値(value属性の値)を設定・上書きする

04.メソッドを使った要素の指定

子要素の中から探す時はfind()かchildren()を使う

1.find()

対象要素の子孫要素から、セレクタに該当するものを取ってくる

子孫要素全体から探してくる

2.children()

対象要素の直属の子要素から、セレクタに該当するものを取ってくる

直属の子要素からしか探せない

05.イベントの監視

イベントの構文
$('セレクタ').イベント名(function() { });

1.イベント監視（click編）

クリックされたときに何か処理を追加

$('セレクタ').click(function() {
    //ここに処理を書く
});

2.イベント監視（scroll編）

スクロールしたときに何か処理を追加

$('セレクタ').scroll(function() {
    //ここに処理を書く
});

3.イベント監視（hover編）

ホバーしたときに何か処理を追加

hoverイベントはfunctionをコンマ区切りで2個続けて書くことができる
・最初に「ホバーされたときの処理」
・2つ目に「ホバーが外れたときの処理」

$('セレクタ').hover(
    function() {
        //ここにホバーされた時の処理を書く
    },
    function() {
        //ここにホバーが外れた時の処理を書く
    }
);

06.アニメーション

jQueryにはページに動きをつける様々なアニメーションが用意されている

1.スライドのように開閉して表示

.slideUp()　

.slideDown()

2.フワッと浮き上がる表示

.fadeIn()

.fadeOut()