前提

ES5のjQueryを触らないといけない、なんてことになった際にとりあえず覚えておこう的最低限メモ

Jsなんとなーく見たことあるけどほぼ触ったことない、HTML/CSSは最低限の知識がある

変数定義

ES5なのでletは使えません
下記はHTMLのtmpクラスをjQueryオブジェクトとして生成

var $tmp = $('.tmp');

CSSとか

$tmp変数にHTML要素があればCSSを適用できる
HTML属性の中身をセットしたりとか

$tmp.css('color','red');
$tmp.html('href=https://xxxxxxx');

モーダルの出現、閉じる

modelの要素は最初はdisplay: none;にしておこう！

  $('.signup-show').click(function(){
    // モーダル出現
    $('#signup-modal').fadeIn();
  });

  $('.close-modal').click(function() {
    // モーダル閉じる
    $('#signup-modal').fadeOut();
  })

Hover

TextなんかをHoverで表示/非表示したい場合はadd/removeのclassに対してdisplay: blockにしておこう！
function()を二つ定義しないといけないのは忘れないように（Hoverしたときのアクション、離された時のアクション）

  $('.lesson').hover(
    function() {
      $(this).find('.text-contents').addClass('text-active');
    },
    function() {
      $(this).find('.text-contents').removeClass('text-active');
    }
  );

アコーディオン（FAQなどで使う内容表示、非表示）

$('.faq-list-item').click(function() {
    var $answer = $(this).find('.answer');
    // answerクラスがopenになっているかどうか（開いているかどうか、内容が表示されているかどうか）
    if($answer.hasClass('open')) { 
      // open状態を削除
      $answer.removeClass('open');
      // slideUpメソッドを用いて、$answerを隠す
      $answer.slideUp();

      // .faq-list-item子要素のspanタグの中身をtextメソッドを用いて'+'に書き換え
      $(this).find('span').text('+');

    // answerクラスがcloseになっている（閉じている、内容が表示されていない）
    } else {
      $answer.addClass('open'); 
      // slideDownメソッドを用いて、$answerを表示
      $answer.slideDown();
      // .faq-list-item子要素のspanタグの中身をtextメソッドを用いて'-'に書き換え
      $(this).find('span').text('-');

eqメソッド

jQueryの$()オブジェクトは実は配列らしい

<li>要素が例えば4つある$('.tmp')オブジェクトがあれば$('.tmp').eq(1)とかしたら要素の取り出しができるみたい

  $('#hide-btn').click(function() {
    $('.slide').eq(1).fadeOut();
  })

indexメソッド

クリックされた要素が何番目のindexなのかチェック

    var clickedIndex = $('.btn').index(this);
    $('.slide').eq(clickedIndex).addClass('active');

next / prev メソッド

HTML要素の前/後を取得する


    if($(this).hasClass('next-btn')) {
      $displaySlide.next().addClass('active');
    } else {
      $displaySlide.prev().addClass('active');
    }

textメソッド

.text()はHTML要素の内容置換にも使えたりする
p要素の文字列取得


$tmp.text('foooooooooo');
var txt = $('p').text;

attrメソッド

HTML属性のゲッター/セッター
属性とは、
- id
- class
- href
- src
- type
など。

  // tmpクラスのid属性のpタグの中身を取得
  var id = $('.tmp p').attr('id');
  // linkIDのhref属性の中身を取得
  var href = $('#link').attr('href');
  // pタグのidをtmpにセット
  $(p).attr('id', 'tmp');

val()メソッド、submitファンクション

input, form要素から入力された値をval()で取得
または、select要素で選択されたリストのvalue属性を取得

  $('#form').submit(function() {
    var textValue = $('#text-form').val();
    $('#output-text').text(textValue);
    return false;
  })

scrollTop メソッド

任意のセクションまで移動させる
ページの一番上のポジションからoffset().topで指定したセクションの上までの距離を取得し、そこまでスクロール
$(window)は現在のwindow

var position =  $('.tmp').offset().top;
$(window).scroll(position);

もしくは下記のように使う
header要素に何かしらジャンプしたい要素がある場合

$('header a').click(function() {
  var id = $(this).attr('href');
  var position = $(id).offset().top;
  $('html,body').animate({'scrollTop':position}, 500);
})

animateメソッド

hoverと合わせてアニメーションつけたりする
渡す値は連想配列になってるので注意

$('.sns-icon').hover(
  // hover時font-sizeを30pxにする、アニメーション速度は300ミリ秒
  function() {
    $(this).animate({'font-size':'30px'}, 300);
  },
  // hoverから離された時
  function() {
    $(this).animate({'font-size':'24px'}, 300);
  }
)

jQuery (ES5) 備忘録

前提