jQuery(ready/load/resize/matchMedia)

$(document).ready(function(){ });

まずはjQueryの一般的な書き方である

$(function(){
});

は、

$(document).ready(function(){
});

と同じ意味で、

DOM(HTML)の読み込みが終わったときという意味になります。

＄(window).on(‘load’, function(){ });

ではこちらはどうでしょうか？

$(window).on('load', function(){
});

こちらは画像やCSSなど、ページが完全に読み込まれたらという意味になります。

例えば要素の高さを取得したい場合はこちらを書く必要があります。

$(window).resize(function(){ });

ではresizeはどうでしょうか？

$(window).resize(function(){
 });

これは画面幅が変更されたときという意味になります。

では、画面の横幅サイズと高さを取得してみましょう。

$(window).resize(function(){
    const w = $(window).width();
　　　 const h = $(window).height();
    console.log('width'+ '=' + w );
    console.log('height'+ '=' + h );
});

これをbody直下に<script></script>タグで囲って記述すれば、

デベロッパーツールで確認できます。

スクロール量についてはこちらの記事をどうぞ。

matchMedia

最後にmatchMediaについて。

matchMediaの使い方は、

例えば画面幅が645pxより大きいときは以下のように書きます。

if (window.matchMedia('(min-width: 645px)').matches) { }

気を付けなければいけないのは、

先ほど出てきたページが完全に読み込まれた状態(load)と画面幅が変更されたとき(resize)に実行する必要があります。

$(window).on('load resize', function(){
		 const w = $(window).width();
		 if (window.matchMedia('(min-width: 645px)').matches) { 
			 console.log('yes');
		 }
	 });

以上になります。