【初学者向け】DOM操作チートシート【jquery】

毎日の業務お疲れ様です。

過去２回の掲載の反響が上々でプロブロガーに目覚めそうな、にこるです。

今回は、初学者向けのjqueryチートシートを作成しました。

ど忘れした人もリファレンス用に使ってください。

---

要素の置き換え

子要素の最後に追加 [append]

◇構造（変更前）

<div class="target">
  hogehoge
  <!-- ここに要素追加 -->
</div>

◆構造（変更後）

<div class="target">
  hogehoge
  <p>てきすと</p>←①
  <p>にこる</p>←②
</div>

[JS]処理

var contents = 'にこる';

$('.target').append('<p>てきすと</p>');// ①
$('.target').append('<p>' + contents + '</p>');// ②

子要素の最初に追加 [prepend]

◇構造（変更前）

<div class="target">
  <!-- ここに要素追加 -->
  hogehoge
</div>

◆構造（変更後）

<div class="target">
  <p>にこる</p>←②
  <p>てきすと</p>←①
  hogehoge
</div>

[JS]処理

var contents = 'にこる';

$('.target').prepend('<p>てきすと</p>');// ①
$('.target').prepend('<p>' + contents + '</p>');// ②

後ろに追加 [after]

◇構造（変更前）

<div class="target">
  hogehoge
</div>
<!-- ここに要素追加 -->

◆構造（変更後）

<div class="target">
  hogehoge
</div>
<p>にこる</p>←②
<p>てきすと</P>←①

[JS]処理

var contents = 'にこる';

$('.target').after('<p>てきすと</p>');// ①
$('.target').after('<p>' + contents + '</p>');// ②

前に追加 [before]

◇構造（変更前）

<!-- ここに要素追加 -->
<div class="target">
  hogehoge
</div>

◆構造（変更後）

<p>てきすと</p>←①
<p>にこる</p>←②
<div class="target">
  hogehoge
</div>

[JS]処理

var contents = 'にこる';

$('.target').before('<p>てきすと</p>');// ①
$('.target').before('<p>' + contents + '</p>');// ②

カレント要素を追加する

子要素の末尾に移動 [appendTo]

◇構造（変更前）

<span>こんにちは</span>
<div class="target">にこるさん<!-- ここに要素追加 --></div>

◆構造（変更後）

<div class="target">にこるさん<span>こんにちは</span></div>

[JS]処理

$('span').appendTo('.target');

子要素の最初に移動 [prependTo]

◇構造（変更前）

<span>こんにちは</span>
<div class="target"><!-- ここに要素追加 -->にこるさん</div>

◆構造（変更後）

<div class="target"><span>こんにちは</span>にこるさん</div>

[JS]処理

$('span').prependTo('.target');

要素の前に移動 [insertAfter]

◇構造（変更前）

<span>こんにちは</span>
<div class="target1">ニコルさん</div>
<div class="target2">にこるさん</div>
<!-- ここに要素追加 -->

◆構造（変更後）

<div class="target1">ニコルさん</div>
<div class="target2">にこるさん</div>
<span>こんにちは</span>

[JS]処理

$('span').insertAfter('.target2');

要素の後ろに移動 [insertBefore]

◇構造（変更前）

<span>こんにちは</span>
<div class="target1">ニコルさん</div>
<!-- ここに要素追加 -->
<div class="target2">にこるさん</div>

◆構造（変更後）

<div class="target1">ニコルさん</div>
<span>こんにちは</span>
<div class="target2">にこるさん</div>

[JS]処理

$('span').insertBefore('.target2');

指定した要素で囲む

指定した要素に内包する [wrap]

◇構造（変更前）

<!-- ここに要素追加 -->
<div class="target">
  hogehoge
</div>
<!-- /ここに要素追加 -->

◆構造（変更後）

<div>←①
  <div class="target">
    hogehoge
  </div>
</div>←①

[JS]処理

$('.target').wrap('<div></div>');// ①

全体を指定した要素に内包する ​[wrapAll]

◇構造（変更前）

<!-- ここに要素追加 -->
<span class="target">hogehoge</span>
<span class="target">hugahuga</span>
<!-- /ここに要素追加 -->

◆構造（変更後）

<div>←①
  <span class="target">hogehoge</span>
  <span class="target">hugahuga</span>
</div>←①

[JS]処理

$('.target').wrapAll('<div></div>');// ①

内側の要素を指定した要素で内包する [wrapInner]

◇構造（変更前）

<div class="target">
<!-- ここに要素追加 -->
  hogehoge
<!-- /ここに要素追加 -->
</div>

◆構造（変更後）

<div class="target">
  <div>←①
    hogehoge
  </div>←①
</div>

[JS]処理

$('.target').wrapInner('<div></div>');// ①

指定した親要素を削除 [unwrap]

◇構造（変更前）

<!--↓この要素を削除 -->
<div class="target">
  hogehoge
</div>
<!-- /↑この要素を削除 -->

◆構造（変更後）

hogehoge

[JS]処理

$('.target').unwrap();

クリックしたときに要素を置き換える

要素を置き換える [replaceWith]

クリックした時に要素を<span>に置き換え

◇構造（変更前）

<div class="hoge">
  <ul>
    <li><img src="hoge.jpg" alt="hoge"></li>
  </ul>
</div>

◆構造（変更後）

<div class="hoge">
  <ul>
    <span>hoge</span>
  </ul>
</div>

[JS]処理

$('ul > li').click(function(){ // クリックした<img>要素を<span>要素で置換
  $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>'); // テキスト値はalt属性
});

要素を置き換える [replaceAll]

該当する全ての文字列を置換する

◇構造（変更前）

<div class="hoge">
  <span class="fuga">hello</span>
  <span class="fuga aaa">world</span>
</div>

◆構造（変更後）

<div class="hoge">
  <span class="hoge">goodbye</span>
  <span class="hoge">goodbye</span>
</div>

[JS]処理

$('<span class="hoge">goodbye</span>').replaceAll('span.fuga');

要素セット配下に含まれる子要素を全部削除

要素配下の子要素を全削除 [empty]

要素の中の子要素全てを削除する

◇構造（変更前）

<div class="hoge">
 <p>あいうえお</p>
 <p>かきくけこ</p>
</div>

◆構造（変更後）

<div class="hoge">
</div>

[JS]処理

$('.hoge').click(functon(){// クリックした<hoge>要素の中のpを削除
  $(this).empty(); // 中身のp要素はすべて削除
});

要素を複製する

指定した要素を複製 [clone]

指定した要素を複製する

ある要素のコピーを作成してDOMの他の場所に配置する際に便利である。

◇構造（変更前）

<button>Clone Me!</button>

◆構造（変更後）

<button>Clone Me!</button>
<button>Clone Me!</button>

[JS]処理

$('button').on('click', function(){
  $(this).clone(true).insertAfter(this);
});

classの追加,削除

要素にクラスを付与する [addClass]

◇構造（変更前）

<span>Hello</span>
<span class="foo">Hello</span>

◆構造（変更後）

<span class="hoge">Hello</span>
<span class="foo hoge">Hello</span>

[JS]処理

$('span').addClass('hoge');

要素のクラスを削除する [removeClass]

◇構造（変更前）

<span>Hello</span>
<span class="foo">Hello</span>

◆構造（変更後）

<span>Hello</span>
<span>Hello</span>

[JS]処理

$('span').removeClass('foo');

要素の置き換え

要素のテキストを置き換える [text]

◇構造（変更前）

<div class="hoge">
  <ul>
    <li class="foo">おはよう</li>
  </ul>
</div>

◆構造（変更後）

<div class="hoge">
  <ul>
    <li class="foo">こんばんは</li>
  </ul>
</div>

[JS]処理

$('.foo').text('こんばんは');

要素のHTMLに指定値をセット [html]

◇構造（変更前）

<div class="hoge">
  <ul>
    <li class="foo">おはよう</li>
  </ul>
</div>

◆構造（変更後）

<div class="hoge">
  <span>こんばんは</span>
</div>

[JS]処理

$('.hoge').html('<span>こんばんは</span>');

現在時間の取得

var getCurrentDate = function() {
  var now = new Date();

  return now;
}

既存のイベントをoffにしたい

※単純にoffにすると、実行タイミングの関係で効かないためscriptタグとしてbody閉じタグ前に設置する

  $('body').append("<script>$('.target').off('click');</script>");