実践で使えるjQueryをいくつか集めてみました。(2021/08/09現在)

jQueryの基本的な書き方

基本的な書き方からおさらいしてみましょう。

$(function() {
	//ここに処理の内容を記述する
});

jQueryの本体をしっかり読み込んでおく必要があるので、注意してください。

CDN

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

要素の表示・非表示

表示

$(function() {
  $('.hoge').show();
});

非表示

$(function() {
  $('.hoge').hide();
});

フェードイン・フェードアウト

フェードイン

$('button').click(function() {
  $('.hoge').fadeIn();
});

フェードアウト

$('button').click(function() {
  $('.hoge').fadeOut();
});

クラス追加・削除

追加

$(function() {
  $('.hoge').addClass('is_active');
});

削除

$(function() {
  $('.hoge').removeClass('is_active');
});

追加削除

$(function() {
  $('.hoge').toggleClass('is_active');
});

追加削除は、ハンバーガメニューでよく使われる。

例）ボタンを押したらクラスが追加、もう一度押したら削除

$('button').click(function() {
  $('.hoge').toggleClass('is_active');
});

スムーススクロール

$(function () {
 let headerHight = 150;
 $('a[href^="#"]').click(function(){
   let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top-headerHight;
   $("html, body").animate({scrollTop:position}, 550, "swing");
    return false;
  });
});

.menuのaタグクリックをトリガーとしたクリック処理

(スムーススクロールと相性〇)

$(function() {
  $('.menu a[href]').on('click', function(event) {
    $('.btn').trigger('click');
   });
 });