jQueryの基礎（概念・メソッド） #JavaScript

【jQueryとは？】

jQuery：JavaScriptのライブラリでJavaScriptで行える全てのことをJavaScriptよりも簡単にできる。
→簡単に言うと、「JavaScriptで書かれた様々なお役立ち機能を、後に再利用しやすい形でまとめあげたパッケージ」
※JavaScript：HTML/CSSを操作するための言語

＜前提（処理のタイミング）＞
JavaScriptはHTMLのhead要素内に入っているので、書き換えたいbody要素を読み込む前に処理が終了している状態になっている。だから下記のような記述をして、HTML要素が全て読み込み終わったタイミングで処理を実行するように記述する。リセットCSS並に必須事項。

sample.js

$(function( ) {

});

【jQueryの基本ルール】

jQueryの基本ルールは極めてシンプルで2つだけ。

①操作したいHTML要素を取得
②取得したHTMLに操作（命令）を付与
→操作（命令）が起こるキッカケを設定してあげないといない。これを「イベント」と呼ぶ。

＜イベント＞
→HTMLの要素に対して行われた処理要求。「ユーザーがブラウザ上のボタンをクリックした」「テキストフィールドでキー入力をした」「要素の上にマウスカーソルを乗せた」などいずれもイベント。分かりやすくいうと、Railsで言うリクエストのイメージ。
ーーーーーーーーーーーーーーーーー
①操作したいHTML要素を取得

＜取得方法＞
■基本形
$("セレクタ")

■IDセレクタ
$("#Selector")

■クラスセレクタ
$(".Selector")

■要素セレクタ
$("h1")

②取得したHTMLに操作（命令）を付与

＜操作（命令）方法＞
$("セレクタ").jQueryの命令 ( ) ;
$("セレクタ").jQueryの命令 (引数) ;

【メソッド】

■val( )メソッド
→フォームに入力された値を取得したいときに使う。
実際に使うときは、取得した値を変数に代入して使う。

＜例＞

sample.js

var input = $("#keyword").val( );
/*keywordというidセレクタに入力されたフォームの値を取得し、input変数に代入する。/*

■text ( )メソッド
→テキストを書き換えたいときに使う

sample.js

$("#title").text ("変更したタイトル名") ;

■html ( )メソッド
→HTML要素のテキストをHTMLを含むテキストに書き換えたいときに使う

sample.js

$("p").html("<strong>変更されたコンテンツ</strong>");
/*これはHTML要素のテキストをstrongタグで強調された（太字）の「変更されたコンテンツ」というHTMLに書き換えている/*

★on( )メソッド

→どんなイベントが起きたら、何が実行されるかを設定したいときに使う

sample.js

$(function() {
    $("セレクタ").on("イベント名",function( ) {
        /*イベントが起きたときに行う処理/*
    });
});

これを基本ルールに則って解釈すると、

①操作したいHTML要素を取得
→$( " セレクタ " )

②取得したHTMLに操作（命令）を付与＆操作・命令が起きるキッカケ（イベント）を設定
→.on( " イベント名 ", function( ) {

＜イベント名一覧＞
その他イベント名については、下記URLをご参照ください
https://javascript.programmer-reference.com/jquery-list-event/

■append ( )メソッド
→引数で指定したHTML要素を追加したいときに使う

sample.js

$ ("#lists").append('<li class = "list">追加されたリスト</li>') ;

■remove ( )メソッド
→指定したHTML要素を削除したいときに使う

sample.js

$ (".list").remove( ) ;
/*今回は上記のappendメソッドで追加したlistクラスのセレクタ（".list"）を指定して、削除しています/*

■attr( )メソッド
→HTML要素の属性値を取得・変更したいときに使う。

sample.js

$("セレクタ").attr("取得したい属性名") ;
$("セレクタ").attr("変更したい属性名", "変更したい属性値 ")

sample.js

$("changeButton").on("click",function( ) {
    $("img").attr("src", "http:// ~~~ ") ;
});

＜コードの説明＞
「changeButton」要素を「click」したときに、「img」要素の「src」属性の属性値を「http:// ~~~」に変更する。
※要素タグは、画像を表示する際に使用し、src属性は記述の際には必須の属性で、src属性の属性値を記述することで画像ファイルのURLを指定する。つまり上記の記述は実際のブラウザ上では、既に指定されていた「src」属性の属性値が「http:// ~~~」という別の属性値に変更されるので、表示される画像が「http:// ~~~」の画像に変化するという操作（命令）を付与したことになる。
→HTML5タグリファレンス　http://www.htmq.com/html5/img.shtml

■addClass ( )メソッド
→指定した要素に引数で設定したクラスを追加したいときに使う

sample.js

$("p").addClass("red");

■removeClass( )メソッド
→指定した要素に引数で設定したクラスを削除したいときに使う

sample.js

$("p").removeClass("red");

＜その他のメソッド＞
■hide ( )メソッド
→要素を非表示にしたいときに使う

■show ( )メソッド
→非表示の要素を表示にしたいときに使う

■fadeOut ( )メソッド
→指定したHTML要素をフェードアウトさせたいときに使う。
引数にはフェードアウトにかかる時間を記入。1000＝1秒

■fadeIn ( )メソッド
→指定したHTML要素をフェードインさせたいときに使う。
引数にはフェードインにかかる時間を記入。1000＝1秒