HTML/CSSを操作する命令まとめ

jQueryを利用したスクリプトでは

1.指定したいHTML要素を「セレクター」で指定

2.操作したい内容

を記述します。

ここでは、2にあたるHTML/CSSを操作する命令の書き方をまとめていきます。

テキストの変更と取得

テキストを変更：指定したHTML要素の文章を…に変更する

$('指定したHTML要素').text(…)

テキストを取得：指定したHTML要素の文章を取得する

$('指定したHTML要素').text()

HTMLの変更と取得

HTMLを変更する：指定したHTMLを変更する

$('指定したHTML要素').html(…)

HTMLを取得する：指定したHTMLを取得する

$('指定したHTML要素').html()

HTMLの挿入

要素内の先頭にHTMLを挿入する

$('指定したHTML要素').prepend(…)

要素内の最後にHTMLを挿入する

$('指定したHTML要素').append(…)

要素の前にHTML要素を挿入する

$('指定したHTML要素').before(…)

要素の後にHTML要素を挿入する

$('指定したHTML要素').after(…)

HTMLの移動

他の要素内の先頭に要素を移動する

$('指定したHTML要素').prependTo(…)

他の要素内の最後に要素を移動する

$('指定したHTML要素').appendTo(…)

他の要素の前に先頭に要素を移動する

$('指定したHTML要素').insertBefore(…)

他の要素の後ろに先頭に要素を移動する

$('指定したHTML要素').insertAfter(…)

他の要素で包む、取り除く

要素を他の要素で囲む

$('指定したHTML要素').wrap(…)

要素をまとめて他の要素で囲む

$('指定したHTML要素').wrapAll(…)

親要素を取り除く

$('指定したHTML要素').unwrap()

要素の置き換え

$('指定したHTML要素').replaceWith(…)

要素の削除

$('指定したHTML要素').remove()

属性値の変更と取得

指定した属性値の値を変更する

$('指定したHTML要素').attr(…,…)

指定した属性値の値を取得する

$('指定したHTML要素').attr()

指定した属性を削除する

$('指定したHTML要素').removeAttr(…)

class属性の追加と削除

class属性の追加

$('').addClass(…)

class属性を削除する

$('').removeClass(…)