デイトラWeb制作-Day18-　jQuery②メソッドとパラメータ

本日もこつこつやっていきます。

メソッド、パラメーターとは

メソッドとは、セレクタで指定した要素を操作する命令文のこと。クラスを追加して！CSSを設定して！テキストを変更して！など。
パラメーターとは、どのようにメソッドを実行するか具体的に指示する補語。パラメーターに渡された値のことを引数と呼ぶ。

// クラスの追加
jQuery("#js-btn").addClass("btn-register");

//クラスの削除
jQuery("#js-register").removeClass("btn-register");

//cssの設定　複数まとめて指定
jQuery("#js-title").css({
  color: "red",
  fontSize: "80px",
});

// 文字列の変更
jQuery("#js-title").text("変更後のタイトル");

// 文字列の取得
const title = jQuery("#js-title").text();
alert(title);

.text()メソッドは、引数に入れたテキストに変更することができるが、
引数がなければ要素のテキストを取得するメソッドになる。

//class属性を追加する
$('#button').addClass('active');

//class属性を削除する
$('#button').removeClass('active');

引数のクラス名の前に、「.」は不要です。（確かにハマりそう）

メソッドチェーン

メソッドをつなげて書くこと。
jQueryオブジェクトの作成（セレクタにマッチした要素を探す処理）は負荷が掛かる。そのためメソッドチェーンの利用でjQueryオブジェクト作成の数を減らせるということは、負荷の軽減につながる。

jQuery("#js-title").css("color", "blue");
jQuery("#js-title").text("Hello, jQuery!");

//上記をつなげて書ける
jQuery("#js-title").css("color", "blue").text("Hello, jQuery!");

ただし、すべてのメソッドが連結できるわけではない。
返値でjQueryオブジェクトを返すメソッドの後にのみメソッドを連結できる。

メソッドを使ったアニメーション

// ふわっと表示
jQuery("#js-title").fadeIn(1500);

// ふわっと消える
jQuery("#js-btn").fadeOut(1000);

// スライドして表示
jQuery("#js-title").slideDown(1000);

// スライドして消える
jQuery("#js-btn").slideUp(1000);

（）内の数値は、アニメーションにかける時間（ミリ秒）を指定

イベント監視

イベントの構文 
 jQuery("セレクタ").on("イベント名", function() {})

クリック編

// クリックボタンがクリックされたら、タイトルを変更する。
$("#js-btn").on("click", function() {
  $("#js-title").text("Title Changed!");
});

hover編

//マウスホバーされたら、タイトルをオレンジ色にする。
//マウスが離れたら、元の色に戻す。

$("#js-title").on({
  "mouseenter": function(){
    $(this).css("color", "orange");
  },
  "mouseleave": function(){
    $(this).css("color", "navy");
  }
})

その他のイベント

• change : フォーム内に変更があったとき

• load : 読み込まれたあと

• resize : ブラウザサイズが変更されたとき

• submit : フォームが送信されたとき

追記　.click() {…　と　on("click",…　の違い

click()は後から追加した要素へのイベントには効かない。
on()メソッドは後から動的にjavaScriptや jQueryで追加された要素に対してもイベントの実行が可能。

→ 基本的にはon()メソッドを利用しよう！

あとがき

こういうの地味にうれしい。