WEB

jQuery備忘録

よく使うjQuery集

.hover

$(function(){
  var triger = 'トリガー要素';
 var target = 'ターゲット要素';
  $(triger).hover(function(){
    $(target).fadeToggle();
  });
});

グロナビのhoverアクションなどでサブメニューを表示したりするのによく使う。

 

サムネイルクリックでメイン画像切り替え




<div class="big_img">
 <img style="display:none" src="~~.jpg" alt="">
 <img style="display:none" src="~~.jpg" alt="">
 <img style="display:none" src="~~.jpg" alt="">
</div>

<div class="thum">
 <div><img src="~~.jpg" alt=""><p>キャプション</p></div>
 <div><img src="~~.jpg" alt=""><p>キャプション</p></div>
 <div><img src="~~.jpg" alt=""><p>キャプション</p></div>
</div>



$(function(){
  var oya = '.big_img img';
  var ko = '.thum img';
  $(oya).eq('0').show();
  $(ko).on('click', function(){
      var i = $(this).index();
      $(oya).hide();
      $(oya).eq(i).fadeIn('fast');
  });
});

・サムネイルを複数枚表示
・メイン画像が切り替わってもサムネイルは動かない
・サムネイルにキャプションも表示

いつも使用しているスライダープラグインslickだとサムネイルが動いてしまうのでNG。またslickのdotsをサムネイルにすることで動かないようにもできるが、サムネイル箇所にキャプションを一緒に表示する必要があったので今回は簡単なものを自作。
あと他のプラグインを一から覚えるの面倒出し、何より重くなるので。本当は「.big_img > img」は一枚だけにして、urlだけ引っ張っても良い。今回はwp環境でサムネイルとメイン画像の呼び出しurlが違うので(サイズのため)この仕様。

form submitの2度押し防止

$(function () {
  $('form').submit(function () {
    $(this).find(':submit').css('pointer-events','none');
    setTimeout(() => {
	    $(this).find(':submit').css('pointer-events','auto');
	  },
	3000)
  });
});

サブミット時にpointer-eventsをnoneにする。またjsのバリデートに引っかかった場合に、3秒後にクリックできるように戻す。jsを使わずphpなどでバリデーションかける場合は3秒後の処理は不要。

form 生年月日入力欄 常に現在の年から20年分表示

$(function () {
 var i = new Date();
 var year = i.getFullYear();
 for(var num = year; num > year-20; num--){
  $('#birthday_year').append($('<option>').html(num).val(num));
 }
});

formのselectでよく使う「年」の動的範囲指定。20を変更すれば、任意の年数にできる。

 

タブ切り替え

See the Pen
eYZgVGe
by Mugi Sasaki (@mugi-sasaki)
on CodePen.

よく使うタブ切り替え。同一ページに複数タブがあっても動きます。3列使用なのでCSSは適宜調整の必要あり。

 

jqueryでの外部html読み込み

$(function(){
	var area = $('#hoge'); // 表示する場所
	var path = $('/hoge.html'); // 表示するファイルの相対パス
	$(area).load(path);
});

jquery3以降ではload()が動かないので注意

 

後から生成された要素にjqueryを使う

$(document).on('click','要素',function(){
	// 生成された要素に対する内容を記述
});
ABOUT ME
mugi
mugi
名前:mugi 性別:男 生年月日:1984/11/03 職業:フリーランスWEBデザイナー(HTML/CSS/Javascript/php) 趣味:DIY・登山・クライミング・釣り・ギター・スケボー・酒 2017年に沖縄から和歌山に移住。築80年の中古住宅を購入して、自分でリフォームしながら家族3人で暮らしています。現在は子育て奮闘中。