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>

関連記事

2021.03.05

jQuery

jQueryのremoveAttrメソッド・removeDataメソッドで要素の属性を削除

デモページはこちら jQueryのremoveAttrメソッドとremoveDataメソッドで要素の属性を削除します。removeDataメソッドはカスタムデー…

2020.11.08

jQuery

プラグインを利用せずにjQueryで実装する高さ揃え

デモページはこちら jquery.matchHeight.jsのようなプラグインを利用せず、jQueryのみでhtml要素の高さ揃えを実装します。プラグイン利用…

2020.09.09

jQuery

jQueryのCDN読み込み

コンテンツ・デリバリー・ネットワーク(CDN)は、アクセス元から一番近くのキャッシュサーバーへ接続してファイルが提供される仕組みです。jQueryのCDNはjQ…

2020.09.21

jQuery

jQueryで兄弟要素を取得(next・nextAll・prev・prevAll・siblings)

デモページはこちら jQueryで兄弟要素(同階層の要素)を取得するメソッドのまとめです。対象要素の直後の要素を取得するnext、対象要素の直後以降の要素を全て…

2020.09.22

jQuery

jQueryで子孫要素を取得(children・find)

デモページはこちら jQueryで子孫要素(子要素と子要素の子要素である孫要素)を取得するメソッドのまとめです。対象要素の子要素を全て取得するchildren、…

上に戻る