HTML
CSS
JavaScript
jQuery

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

More than 3 years have passed since last update.

ゆるっとまとめ


テキストの変更取得

操作
使用例
備考

テキストの変更
$('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要素の色を取得
});