よく使われるjQueryの単語集

if($('li').hasClass('close')){ // liにクラス名closeがあれば
  $('li').removeClass('close'); // liのクラス名を削除する
}

$(".openbtn").click(function(){ // .openbtnをクリックしたら
  $(this).addClass("active"); // openbtnにactiveクラスを追加する
});

$(".navigation").click(function(){ // .navigationをクリックしたら
  $(".bgnavi").removeClass("active"); // bgnaviクラスについているactiveクラスを削除
});

$(".openbtn").click(function(){ // .openbtnをクリックしたら
  $(this).toggleClass("active"); // openbtnにactiveクラスがついていなかったら追加し、ついていたら削除
});

$('.accordion').parent().addClass('active'); // .accordionの親要素を取得してactiveクラスを追加する

$('.accordion').children().addClass('active'); // .accordionの子要素を取得してactiveクラスを追加する

$(".forcus-btn").click(function(){
  $("table").find(".forcus").css("background-color", "#ccc"); // tableの中にある.forcusクラスがついている要素の背景を灰色にする
});

$('.article-list').fadeIn(900); // .article-listが0.9秒かけてフェードイン

$('#splash-logo').fadeOut(1200); // #splash-logoを1.2秒でフェードアウト

$('.btn').click(function(){
  $('.article-block').show(); // .btnをクリックしたら.article-blockを表示
});

$('.btn').click(function(){
  $('.article-block').hide(); // .btnをクリックしたら.article-blockが非表示
});

$('.title').on('click', function(){ // .titleをクリックしたら
  $('.box').slideDown(500); // .boxを0.5秒かけてスライドしながら表示
});

$('.title').on('click', function(){ // .titleをクリックしたら
  $('.box').slideUp(500); // .boxを0.5秒かけてスライドしながら非表示
});

$('.title').on('click', function(){
  $('.box').slideToggle(500); // .boxを0.5秒かけてスライド表示、非表示
});

$('#page-top').click(function(){ // #page-topをクリックしたら
  $('body,html').animate({ // bodyとhtmlの
    scrollTop: 0 // スクロール位置を0にするアニメーションを実行
  }, 500); // ページトップスクロールの速さは0.5秒
  return false; // リンク自体は無効化
});

$('.has-child').children('ul').css("display","block"); // .has-childがついた子要素のulのdisplayをblockにする
// 複数指定の場合
$('.has-child').children('ul').css({"display":"block" , "color":"#ccc"});

$('#page-link a').click(function(){
  const elmHash = $(this).attr('href'); // ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
  const pos = $(elmHash).offset().top; // idの上部の距離を取得
  $('body,html').animate({scrollTop: pos}, 500); // 取得した位置に0.5秒でスクロール
  return false; // リンク自体は無効化
});

$("#box").append('<ul class="pagination">'); // #boxの中身の最後に<ul class="pagination">を追加

$(".navigation").appendTo(".wrapper"); // navigationの内容すべてをwrapperの中身の最後に追加

const winw = $(window).width(); // ウインドウの横幅を取得してwinwという変数に格納する

const winh = $(window).height(); // ウインドウの縦幅を取得してwinhという変数に格納する

const headerH = $("#header").outerHeight(true); // headerの高さを取得してheaderHという変数に格納する

const scroll = $(window).scrollTop(); // スクロール値を取得してscrollという変数に格納する

const offsetTop = $('#area-2').offset().top; // #area-2のtopの位置を取得し、offsetTopという変数に格納する
const offsetLeft = $('#area-2').offset().left; // #area-2のleftの位置を取得し、offsetLeftという変数に格納する

const contentsTop = Math.round($('#area-3').offset().top); // #area-3までの高さを四捨五入した値でcontentsTopという変数に格納する

const counter = $(".count-up").text(); // .count-upのテキスト情報をcounterという変数に格納する

$("input#join-btn").prop("disabled", true); // #join-btnがついたinputタグの操作を無効化する

const className = $(".sort-btn li").attr("class"); // .sort-btn liのクラス名を取得しclassNameという配列に格納する
className = className.split(' '); // クラス名を分割して配列にする
$("."+className[0]).addClass("active"); // 上記で取得した配列の0番目にactiveクラスを付与

const headerH = $('#header').outerHeight(true); // ヘッダーの高さを取得
const scroll = $(window).scrollTop(); // スクロール値を取得
if (scroll >= headerH){ // ヘッダーの高さ以上までスクロールしたら
  $('.openbtn').addClass('fadeDown'); // .openbtnにfadeDownというクラス名を付与して
}else{ // それ以外は
  $('.openbtn').removeClass('fadeDown'); // fadeDownというクラス名を除く
}

function fadeAnime(){
  // 処理を記述
}

const headerH = $("#header").outerHeight(true); // headerの高さを取得
$(".scroll-point").each(function(i){ // .scroll-pointクラスが付いたエリアからトップまでの距離を計算して設定
  elemTop[i] = Math.round(parseInt($(this).offset().top-headerH)); // 追従するheader分の高さ（70px）を引き小数点を四捨五入
});

$("#splash-logo").delay(1500).fadeOut('slow'); // #splash-logoを1.5秒遅延させてフェードアウト

$('#page-top').click(function(){ // #page-topをクリックしたら
  $('body,html').animate({ // bodyとhtmlの
    scrollTop: 0 // スクロール位置を0にするアニメーションを実行
  }, 500); // ページトップスクロールの速さは0.5秒
  return false; // リンク自体は無効化
});

if (scroll >= 100){ // 上から100pxスクロールしたら
  $('#page-top').removeClass('DownMove'); // #page-topについているDownMoveというクラス名を除く
  $('#page-top').addClass('UpMove'); // #page-topについているUpMoveというクラス名を付与する
}else{
  if($('#page-top').hasClass('UpMove')){ // すでに#page-topにUpMoveというクラス名がついていたら
    $('#page-top').removeClass('UpMove'); // UpMoveというクラス名を除き
    $('#page-top').addClass('DownMove'); // DownMoveというクラス名を#page-topに付与
  }
}

function mediaQueriesWin(){
  const width = $(window).width();
  if(width <= 768){
    $(".navi").addClass('active'); // 横幅が768px以下の場合、naviというクラスにactiveを追加
  }else{
    $(".navi").removeClass('.active'); // 横幅が768pxより大きい場合、naviというクラスについているactiveを削除
  }
}
// 画面がリサイズされたら動かす
$(window).resize(function(){
  mediaQueriesWin();
});
//画面が読み込まれたらすぐに動かす
$(window).on('load', function(){
  mediaQueriesWin();
});