要素と要素が内包している部分

html([変更要素])

要素の中のHTMLを取得します。
引数を指定する事で、中身を入れ替える事ができますｙ

/*
<div id="hiei">
<p>ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
*/

$('.hoge').html();
/*
<p>ひぇええええええ</p>
<p>ひぇええええええ</p>
が取得される
*/

$('.hoge').html('<p>あいほんろく</p>');
/*
<div id="hiei">
<p>あいほんろく</p>
</div>
となる
*/

append([追加エレメント])

指定要素の末尾に追加します。

/*
<div id="hiei">
<p id="hoge">ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
*/

$('#hoge').append('アッー');
/*
<div id="hiei">
<p id="hoge">ひぇええええええ><span>アッー</span></p>
<p>ひぇええええええ</p>
</div>
となる
*/

appendTo([追加先エレメント])

指定要素を追加先エレメントの末尾に追加します。
要素ごとまるまる移動する形となります。

/*
<div id="hiei">
<p id="hoge">ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
<div id="hiei2">
あいうえお
</div>
*/

$('#hoge').appendTo('#hiei2');
/*
<div id="hiei2">
あいうえお
<div id="hiei">
<p id="hoge">ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
</div>

となる
*/

prepend([追加エレメント])

指定要素の先頭に追加します。

/*
<div id="hiei">
<p id="hoge">ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
*/

$('#hoge').append('アッー');
/*
<div id="hiei">
<p id="hoge"><span>アッー</span>ひぇええええええ></p>
<p>ひぇええええええ</p>
</div>
となる
*/

prependTo([追加先エレメント])

指定要素を追加先エレメントの先頭に追加します。
要素ごとまるまる移動する形となります。 appendToの前後逆バージョンですね。

/*
<div id="hiei">
<p id="hoge">ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
<div id="hiei2">
あいうえお
</div>
*/

$('#hoge').appendTo('#hiei2');
/*
<div id="hiei2">
<div id="hiei">
<p id="hoge">ひぇええええええ</p>
<p>ひぇええええええ</p>
</div>
あいうえお
</div>

となる
*/

height()

指定要素の高さを取得します。
margin、padding、borderは含まず、純粋なコンテンツの高さを取得します。

$('#hoge').height();

innerHeight()

指定要素の高さを取得します。
【paddingは含む】が【borderは含まれない】の高さを取得します。

$('#hoge').innerHeight();

outerHeight()

指定要素の高さを取得します。
【paddingとborderを含む】高さを取得します。

$('#hoge').outerHeight();

width()

指定要素の横幅を取得します。
margin、padding、borderは含まず、純粋なコンテンツの横幅を取得します。

$('#hoge').width();

innerWidth()

指定要素の横幅を取得します。
【paddingは含む】が【borderは含まれない】の横幅を取得します。

$('#hoge').innerHeight();

outerWidth()

指定要素の横幅を取得します。
【paddingとborderを含む】横幅を取得します。

$('#hoge').outerHeight();

offset()

指定要素の表示位置を取得します。
オブジェクトで分けて値を取得することができます。(後述)

$('#hoge').offset();

offset().top

指定要素の表示位置を取得します。
サイトの一番上(Document)からのpx数の距離となります。

alert($('#hoge').offset().top);

// または

var offset = $('#hoge').offset()
alert(offset.top);

offset().left

指定要素の表示位置を取得します。
サイトの一番左端(Document)からのpx数の距離となります。
leftの場合、ブラウザサイズによって値が変化してしまう事があります。

alert($('#hoge').offset().left);

// または

var offset = $('#hoge').offset()
alert(offset.left);

remove([セレクタ])

セレクタにマッチする指定要素を削除します。
引数を指定しない場合は、指定要素が対象になります。
そして要素ごと消します。

$('.test').remove('p');
// こうすると、testクラスがついているpタグが対象となります。

empty()

こちらも削除系なのですが
こちらは内包している要素を削除します。
指定した要素は生き残ります。

$('.test').empty();

// 以下のような動作になります。
<div id="hiei">
<p>ひぇええええええ</p>
</div>
↓
$('#hiei').empty();
↓
<div id="hiei">
</div>

練習問題的な