19/5/5 学習記録6「jQuery②」

Progate『jQuery 学習コース初級編』より

◯イベントの基本の書き方

//script.js
$(function() {
  $('セレクタ').イベント名(function(){
    // イベント発生時に実行したい処理
  });
});

◯clickイベント
指定した要素をクリックしたときにイベントが起きるようにする。

//script.js
$(function() {
 // イベントの設定
 $('#hide').click(function() {
    // クリックした時の処理の設定
　　　$('#text').slideUp();
  });    
});

◯CSSの変更

//script.js
$(function() {
 // イベントの設定
 $('#hogehoge').click(function() {
    // クリックした時の処理の設定
　　　$('#hoge').css('変更したいプロパティ','変更後の値');
  });    
});

◯HTMLの変更

//script.js
$(function() {
  $('セレクタ').イベント名(function(){
    // イベント発生時に実行したい処理
  });
});

◯「this」の活用

//script.js
$(function() {
  $('セレクタ').イベント名(function(){
    // イベント発生時に実行したい処理
  });
});

◯変数を活用
変数宣言には「var」を使用する。
※ES6では変数宣言に「let」を使用するが、jQueryはES5が適用されるため「var」を使用する。

//script.js
$(function() {
  $('セレクタ').イベント名(function(){
    // イベント発生時に実行したい処理
  });
});

◯メソッドチェーン
同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンが効率的。
メソッドを「.」(ドット)でつなげる。

//script.js
$(function() {
  $('セレクタ').イベント名(function(){
    // イベント発生時に実行したい処理
  });
});

◯find、childrenメソッド
find：全ての子孫要素から、指定したセレクタを持つ要素を取得
children：指定した子要素(1階層下まで)が持つセレクタの中から、指定したセレクタに合致した要素を取得

//script.js
$(function() {
  $('セレクタ').イベント名(function(){
    // イベント発生時に実行したい処理
  });
});

◯hoverイベント
マウスが要素に乗った時、外れた時に指定した処理を行う。

//script.js
$(function() {

  $('セレクタ').hover(
  function(){
    // マウスを乗せた時の処理
  }, ←コンマで処理を繋ぐ
  function(){
    // マウスを外した時の処理
  }
  );

});