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 ### 指定した要素を他の要素内の先頭に移動 ```js $(function(){ $('#target').prependTo('#hoge'); }); ``` ```html [ before ]

テキストテキスト

要素内の先頭に移動される要素

[ after ]

先頭に移動される要素テキストテキスト

```

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 ### 指定した要素を削除する ```js $(function(){ $('h1 #target').remove(); }); ``` ```html [ before ]

テキストテキスト 削除される要素

[ after ]

テキストテキスト

```
# 他の要素で包む ## 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要素の色を取得
});