Webサイト制作におけるjQueryのメソッドの書き方あれこれ

ｊQuery

ここ数回に渡ってjQueryの基本的なメソッドについてまとめてきたが、正しい書き方（意図した通りに処理される書き方）がやや曖昧なので、一度確認しておく。

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッドの書き方あれこれ</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
.done {
　width: 200px;
　background: #0F0;
}
.dtwo {
  width: 200px;
  background: #0FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<div class="done">
  <p>done</p>
</div>

<div class="dtwo">
  <p>dtwo</p>
</div>

<script>
$(function(){
/* append */
/*$('.dtwo').append($('.done')); /*  ○ */
/*$('.dtwo').append('.done'); /*  × */
/*$('<div class="new">class=new1</div>').append($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').append('.done'); /*  × */
/*$('.done').append($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').append('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').append('<div class="new">'
+ '<p>class=new5</p>'
+'</div>');  /*  ○ */

/* appendTo */
/*$('.done').appendTo($('.dtwo')); /*  ○ */
/*$('.done').appendTo('.dtwo'); /*  ○ */
/*$('<div class="new">class=new1</div>').appendTo($('.done'));  /*  ○ */
/*$('<div class="new">class=new2</div>').appendTo('.done'); /*  ○ */
/*$('.done').appendTo($('<div class="new">class=new3</div>')); /*  × */
/*$('.done').appendTo('<div class="new">class=new4</div>');  /*  × */
/*$('<div class="new">'
+ '<p>class=new5</p>'
+'</div>').appendTo($('.done'));  /*  ○ */

/* prepend */
/*$('.dtwo').prepend($('.done')); /*  ○ */
/*$('.dtwo').prepend('.done'); /*  × */
/*$('<div class="new">class=new1</div>').prepend($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').prepend('.done');/*  × */
/*$('.done').prepend($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').prepend('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').prepend('<div class="new">'
+ '<p>class=new5</p>'
+'</div>');  /*  ○ */

/* prependTo */
/*$('.done').prependTo($('.dtwo')); /*  ○ */
/*$('.done').prependTo('.dtwo'); /*  ○ */
/*$('<div class="new">class=new1</div>').prependTo($('.done'));  /*  ○ */
/*$('<div class="new">class=new2</div>').prependTo('.done'); /*  ○ */
/*$('.done').prependTo($('<div class="new">class=new3</div>')); /*  × */
/*$('.done').prependTo('<div class="new">class=new4</div>');  /*  × */
/*$('<div class="new">'
+ '<p>class=new5</p>'
+'</div>').prependTo($('.done'));  /*  ○ */

/* before */
/*$('.done').before($('.dtwo')); /*  ○ */
/*$('.done').before('.dtwo'); /*  × */
/*$('<div class="new">class=new1</div>').before($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').before('.done'); /*  × */
/*$('.done').before($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').before('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').before($('<div class="new">'
+ '<p>class=new5</p>'
+'</div>'));  /*  ○ */

/* after */
/*$('.dtwo').after($('.done')); /*  ○ */
/*$('.dtwo').after('.done'); /*  × */
/*$('<div class="new">class=new1</div>').after($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').after('.done'); /*  × */
/*$('.done').after($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').after('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').after($('<div class="new">'
+ '<p>class=new5</p>'
+'</div>'));  /*  ○ */

/* wrap */
/*$('.done').wrap($('.dtwo')); /* ○ */
/*$('.done').wrap('.dtwo'); /* ○ */ 
/*$('.done').wrap($('<div class="new">class=new</div>'));  /* ○ */
/*$('.done').wrap('<div class="new">class=new</div>'); /* ○ */

});
</script>
</body>
</html>

表示結果は省略。

上記コードはすべてコメントアウトしてあるが、一行ずつ確認していった結果を各行の右側のコメント欄に○×で記してある。

上記結果から分かることは以下の通り。

  • 新しく作る要素（まだHTML内に挿入していない状態の要素）は、別の要素を挿入するにあたっての基準にはなれないようなので注意が必要（意図した処理にはならない）
  • （逆に、）既にHTML内にある要素を基準にして、新しく作る要素（まだHTML内に挿入していない状態の要素）を挿入することはできる
  • appendTo()メソッド、prependTo()メソッド、wrap()メソッドに関しては、メソッドの括弧()内に指定する要素をjQueryオブジェクト化するための「$()」は、省略しても正しく（意図した通りに）処理される
  • 新しく作る要素（まだHTML内に挿入していない状態の要素）をメソッドの括弧()内に書く場合は、jQueryオブジェクト化するための「$()」を省略しても正しく（意図した通りに）処理される