2020.08.16

jQuery

loadメソッドでhtmlファイルを読み込み

jQueryのloadメソッドはajaxの機能を限定的にした簡易版のような位置づけで、htmlファイルを読み込んで出力するだけの機能に特化しています。空のdivタグ内にhtmlファイルを出力する場合は下記のように記述します。なおdivタグが空ではない場合、中身は全て上書きされるため注意が必要です。

<div class="thumbnailblock"></div>
<script>
$(function(){
	$('.thumbnailblock').load('thumbnailblock_girls.html');
});
</script>

なおajaxでも記述方法が違うだけで同様の出力が可能です。htmlメソッドでhtmlタグも含めて出力します。

<div class="thumbnailblock"></div>
<script>
$(function(){
	$.ajax({
		type: 'GET',
		url: 'thumbnailblock_girls.html',
		success: function(data) {
			$('.thumbnailblock').html(data);
		}
	})
});
</script>

関連記事

2020.10.11

jQuery

jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装

デモページはこちら jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装します。hoverメソッドは要素にマウスカーソルが重…

2020.09.06

jQuery

jQueryプラグイン drawer.jsの使い方

デモページはこちら ハンバーガーメニューが実装できるjQueryプラグイン、drawer.jsの使い方です。使用にはjQuery以外にdrawer.css、is…

2020.09.23

jQuery

jQueryで要素の幅と高さを取得(width・innerWidth・outerWidth・height・innerHeight・outerHeight)

デモページはこちら jQueryで要素の幅と高さを取得するメソッドのまとめです。まず幅ですが、対象要素の幅を取得するwidth、対象要素のpaddingを含めた…

2020.09.22

jQuery

jQueryで親要素を取得(parent・parents・closest)

デモページはこちら jQueryで親要素(親要素の親要素である先祖要素を含む)を取得するメソッドのまとめです。対象要素の親要素を取得するparent、対象要素の…

2020.09.29

jQuery

PC表示でページの途中からスクロールに追従するナビゲーション

デモページはこちら PC表示の場合、ページの途中に配置したナビゲーションが画面の一番上に来たタイミングで固定され、スクロールに追従する動作を実装します。 ナビゲ…

上に戻る