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.07

jQuery

jQueryのattrメソッド・dataメソッドで要素の属性を取得・変更・新規設定

デモページはこちら jQueryのattrメソッドとdataメソッドで要素の属性を取得・変更・新規設定します。dataメソッドはカスタムデータ属性のみ取得・変更…

2020.09.29

jQuery

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

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

2020.09.06

jQuery

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

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

2020.09.23

jQuery

jQueryで要素を追加または移動(before・insertBefore・after・insertAfter・prepend・prependTo・append・appendTo)

デモページはこちら jQueryで要素を追加または移動するメソッドのまとめです。対象要素の直前に追加するbefore、insertBefore、対象要素の直後に…

2022.08.25

jQuery

jQueryのhasClassメソッドでclassの付与を判定

jQueryのhasClassメソッドで要素にclassが付与されているか判定します。以下のhtmlの構造で確認します。 hasClassメソッドは引数にクラス…

上に戻る