jQueryの基本まとめ - HTMLを操作しよう -

ゆるっとまとめ

テキストの変更取得

操作	使用例	備考
テキストの変更	$('A').text('hoge');	Aのテキストをhogeに変更
テキストの取得	$('A').text();	Aのテキストを取得

HTMLの変更取得

操作	使用例	備考
HTMLの変更	$('A').html('HTMLを記述');	AのHTMLを記述したHTMLに変更
HTMLの取得	$('A').html();	AのHTMLを取得

HTMLの挿入

操作	使用例	備考
要素内の先頭にHTMLを挿入	$('A').prepend('HTMLを記述');	A要素内の先頭に記述したHTMLを挿入
要素内の最後にHTMLを挿入	$('A').append('HTMLを記述');	A要素内の最後に記述したHTMLを挿入
要素の前にHTMLを挿入(同階層)	$('A').before('HTMLを記述');	Aの前に記述したHTMLを挿入
要素の後にHTMLを挿入(同階層)	$('A').after('HTMLを記述');	Aの後に記述したHTMLを挿入

HTMLの移動

操作	使用例	備考
要素内の先頭にHTMLを移動	$('A').prependTo('B');	A要素内の先頭に指定した要素Bを移動
要素内の最後にHTMLを移動	$('A').appendTo('B');	A要素内の最後に指定した要素Bを移動
要素の前にHTMLを移動(同階層)	$('A').insertBefore('B');	Aの前に指定した要素Bを移動
要素の後にHTMLを移動(同階層)	$('A').insertAfter('B');	Aの後に指定した要素Bを移動

要素の置き換え

操作	使用例	備考
指定した要素を他の要素に置き換える	$('A').replaceWith('B');	A要素をB要素に置き換え

要素の削除

操作	使用例	備考
指定した要素を削除	$('A').remove();	A要素を削除

他の要素で包む

操作	使用例	備考
要素を指定した要素で個別に包む	$('A').wrap('B');	A要素をBで個別に包む
要素を指定した要素でまるっと包む	$('A').wrapAll('B');	A要素をBでまるっと包む
要素の中身を別の要素で包む	$('A').wrapInner('B');	A要素の中身がBで包まれる

属性値の操作

操作	使用例	備考
要素の属性値を取得	$('A').attr('B');	A要素の属性値Bを取得
要素の属性値を変更	$('A').attr('B', 'C');	A要素の属性値BをCに変更
要素の属性値を削除	$('A').removeAttr('B');	A要素の属性値Bを削除

class属性の操作

操作	使用例	備考
class属性の追加	$('A').addClass('B');	A要素にBというclassを追加
class属性の削除	$('A').removeClass('B');	A要素からBというclassを削除

CSSの操作

操作	使用例	備考
CSSの設定	$('A').css('color', 'red');	A要素の色を赤に設定
CSSの取得	$('A').css('color');	A要素の色を取得

テキストの変更取得

text

テキストの変更

$(function(){
  $('#target').text('fuga');
});

テキストの取得

$(function(){
  var hoge = $('#target').text();
  console.log(hoge);
});

HTMLの変更取得

html

HTMLの変更

$(function(){
  $('#target').html('aaaa<span>hogehoge</span>');
});

HTMLの取得

$(function(){
  var hoge = $('#target').html();
  console.log(hoge);
});

HTMLの挿入

prepend

指定した要素内の先頭にHTMLを挿入

$(function(){
  $('#target').prepend('<span>要素内の先頭に挿入</span>');
});

<p id="target"><span>要素内の先頭に挿入</span>ターゲットだゆん</p>

append

指定した要素内の最後にHTMLを挿入

$(function(){
  $('#target').append('<span>要素内の最後に挿入</span>');
});

<p id="target">ターゲットだゆん<span>要素内の最後に挿入</span></p>

before

指定した要素の前にHTMLを挿入 (同階層)

$(function(){
  $('#target').before('<p>前に挿入</p>');
});

<p>前に挿入</p>
<p id="target">ターゲットだゆん</p>

after

指定した要素の後にHTMLを挿入 (同階層)

$(function(){
  $('#target').after('<p>後ろに挿入</p>');
});

<p id="target">ターゲットだゆん</p>
<p>後ろに挿入</p>

HTMLの移動

prependTo

指定した要素を他の要素内の先頭に移動

$(function(){
  $('#target').prependTo('#hoge');
});

[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">要素内の先頭に移動される要素</span>


[ after ]
<p id="hoge"><span id="target">先頭に移動される要素</hoge>テキストテキスト</p>

appendTo

指定した要素を他の要素内の最後に移動

$(function(){
  $('#target').appendTo('#hoge');
});

[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">要素内の最後に移動される要素</span>


[ after ]
<p id="hoge">テキストテキスト<span id="target">要素内の最後に移動される要素</hoge></p>

insertBefore

指定した要素を他の要素の前に移動 (同階層)

$(function(){
  $('#target').insertBefore('#hoge');
});

[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">前に移動される要素</span>


[ after ]
<span id="target">前に移動される要素</span>
<p id="hoge">テキストテキスト</p>

insertAfter

指定した要素を他の要素の後に移動 (同階層)

$(function(){
  $('#target').insertAfter('#hoge');
});

[ before ]
<span id="target">後に移動される要素</span>
<p id="hoge">テキストテキスト</p>


[ after ]
<p id="hoge">テキストテキスト</p>
<span id="target">後に移動される要素</span>

replaceWith

指定した要素を他の要素に置き換える

$(function(){
  $('#target').replaceWith('<h1></h1>');
});

[ before ]
<span id="target">テキスト</span>

[ after ]
<h1>テキストテキスト</h1>

要素の削除

remove

指定した要素を削除する

$(function(){
  $('h1 #target').remove();
});

[ before ]
<h1>
    テキストテキスト
    <span id="target">削除される要素</span>
</h1>

[ after ]
<h1>テキストテキスト</h1>

他の要素で包む

wrap

要素を指定した要素で包む

複数の要素が存在する場合は、各要素が個別にそれぞれ包まれる
※ 既にDOMに存在する要素で包むことも出来る

$(function(){
  $('.hoge').wrap('<div class="wrap"></div>');
});

[ before ]
<p class="hoge">テキストテキスト</p>
<p class="hoge">テキストテキスト</p>

[ after ]
<div class="wrap">
    <p class="hoge">テキストテキスト</p>
</div>
<div class="wrap">
    <p class="hoge">テキストテキスト</p>
</div>

wrapAll

複数存在する要素を指定した要素でまるっと包む

※ 既にDOMに存在する要素で包むことも出来る

$(function(){
  $('.hoge').wrapAll('<div class="wrap"></div>'); 
});

[ before ]
<p class="hoge">テキストテキスト</p>
<p class="fuga">間にある別の要素やテキストは除外され、下に移動する</div>
<p class="hoge">テキストテキスト</p>

[ after ]
<div class="wrap">
    <p class="hoge">テキストテキスト</p>
    <p class="hoge">テキストテキスト</p>
</div>
<p class="fuga">間にある別の要素やテキストは除外され、下に移動する</div>

wrapInner

指定した要素の中身(子要素)を別の要素で包む

※ 既にDOMに存在する要素で包むことも出来る

$(function(){
  $('.hoge').wrapInner('<strong></strong>'); 
});

[ before ]
<p class="hoge">テキストテキスト</p>
<p class="hoge">テキストテキスト</p>

[ after ]
<p class="hoge"><strong>テキストテキスト</strong></p>
<p class="hoge"><strong>テキストテキスト</strong></p>

属性値の操作

attr

要素の属性値を取得する

attr('属性名');

$(function(){
  $(a.targetLink).attr('href'); // リンク先を取得
});

要素の属性値を変更する

attr('属性名', '属性値');

$(function(){
  $(a.targetLink).attr('href', 'https://www.google.co.jp/'); // リンク先をGoogleに変更
});

removeAttr

要素の属性値を削除する

removeAttr('属性名');

$(function(){
  $(a.targetLink).removeAttr('href'); // リンクを削除
});

class属性の操作

addClass

class属性の追加

複数のクラスを追加したい場合は、スペース区切り

$(function(){
  $('.target').addClass('fuga hoge'); // target要素に新たにfuga,hogeのクラスを追加
});

removeClass

class属性の削除

複数のクラスを削除したい場合は、スペース区切り

$(function(){
  $('.target').removeClass('fuga hoge'); // target要素からfuga,hogeのクラスを削除
});

CSSの操作

CSSの設定

css('プロパティ名', '値');

$(function(){
  $('.target').css('color', 'red'); // target要素の色を赤に設定
});

※ 複数のCSSを同時に設定したい場合

ここではプロパティ名にシングルクォーテーション(ダブルクォーテーション)はつかない

css({
プロパティ名, '値',
プロパティ名, '値',
プロパティ名, '値'
});

$(function(){
  $('.target').css({
    color: 'white',
    fontWeight: 'bold',
    backgroundColor: 'black'    
  });
});

CSSの取得

css('プロパティ名');

$(function(){
  $('.target').css('color'); // target要素の色を取得
});