読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

jQueryによるDOM操作をまとめてみた

Javascript jQuery まとめ

f:id:nipe880324:20150311124141j:plain
Photo by Flickr: J. A. Alcaide's Photostream

jQueryを使うことでブラウザ間の違いを吸収しながらも、簡易にDOM操作のJavaScriptコードを記載することができます。
よく使われるjQueryのDOM操作のメソッドをまとめました。

また、jQuery1.x系とjQuery 2.x系の選択基準として、

  • 1.x系は IE8 以前をサポートするレガシーブラウザ向けのバージョン
  • 2.x系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン

ですので、適切なjQueryのバージョンを選んでください。

目次

  1. jQueryの初期化処理の記述場所
  2. 子要素の追加(append, appendTo, prepend, prependTo)
  3. 要素の挿入(after, insertAfter, before, insertBefore)
  4. 要素の置換(replaceWith, replaceAll)
  5. 要素の削除(remove, empty)
  6. 属性の追加/設定/削除(attr, removeAttr)
  7. 要素のコンテンツの取得/設定(text, html)
  8. CSSスタイルの操作(css, addClass, removeClass, toggleClass)
  9. 表示/非表示(hide, show, toggle)
  10. フォームの入力項目の値の取得/設定(val)

1. jQueryの初期化処理の記述場所

HTMLのロードが完了してからイベントハンドラの登録などの処理を行うようにしたいので、
jQueryのreadyメソッド内で処理を記述します。

$(document).ready(function(){
  // イベントハンドラの登録などのコード
});


2. 子要素の追加(append, appendTo, prepend, prependTo)

$li = $('<li>').text('これは子要素のli要素');

// ulの子要素の末尾にliを追加
$('ul').append($li);
$li.appendTo($('ul'));

// ulの子要素の先頭にliを追加
$('ul').prepend($li);
$li.prependTo($('ul'));


3. 要素の挿入(after, insertAfter, before, insertBefore)

$newLi = $('<li>').text('これは挿入するli要素');

// li要素の直後に新たなli要素を挿入
$('li').after($newLi);
$newLi.insertAfter($('li'));

// li要素の直前に新たなli要素を挿入
$('li').before($newLi);
$newLi.insertBefore($('li'));


4. 要素の置換(replaceWith, replaceAll)

// div要素を置換
$('div').replaceWith($('div').text('要素を置換'));

// 上記のコードと同じ
$('<div要素を置換></div>').replaceAll($('div'));


5. 要素の削除(remove, empty)

// すべてのdiv要素を削除
$('div').remove();

// すべてのli要素のうちclass属性がoddのものを削除
$('div').remove('.odd');

// div要素の子要素をすべて削除
$('div').empty();


6. 属性の追加/設定/削除(attr, removeAttr)

// a要素のhref属性を取得
var url = $('a').attr('href');

// a要素のhref属性を設定
$('a').attr('href', 'http://www.new.co.jp');

// 複数の属性をまとめて設定
$('a').attr({
  title: 'Google',
  href: 'http://www.new.co.jp'
});

// a要素のhref属性を削除
$('a').removeAttr('href');


7. 要素のコンテンツの取得/設定(text, html)

// h1要素内のテキストの設定と取得
$('h1').text('Hello, world');
var text = $('h1').text(); // => 'Hello, world'


// h1要素内のHTMLの設定と取得
$('h1').html('<a href="http://sample.co.jp">Hello, world</a>');
var html = $('h1').html(); // => <a href="http://sample.co.jp">Hello, world</a>


8. CSSスタイルの操作(css, addClass, removeClass, toggleClass)

// スタイルの設定と取得
// JSとCSSが密結合してしまうので、下記のaddClass/removeClassを使う方がよい
$('h1').css('color', 'red');
var color = $('h1').css('color'); // => rgb(255, 0, 0)

// class属性にtitleクラスを追加
$('h1').addClass('title');

// class属性にtitleクラスを削除
$('h1').removeClass('title');

// class属性にtitleクラスの追加/削除を切り替える
$('h1').toggleClass('title');


9. 表示/非表示(hide, show, toggle)

// id属性がcontentsの要素を非表示にする
$('#contents').hide();

// id属性がcontentsの要素を表示にする
$('#contents').show();

// id属性がcontentsの要素を表示/非表示を切り替える
$('#contents').toggle();

※あまり大きい範囲にhide()やshow()をやるとパフォーマンスが悪くなる場合があるらしい。エッジケースのためにjQueryが特別な処理をやっていてそれがネックになるらしい



10. フォームの入力項目の値の取得/設定(val)

テキストフィールドの値の取得と設定

$('#email').val('satoshi@email.com'); // 値の設定
var email = $('#email').val();        // 値の取得('satoshi@email.com')

チェックされているラジオボタンの取得

<input type="radio" name="gender" id="man" value="1">
<label for="man">男性</label>
<input type="radio" name="gender" id="woman" value="2">
<label for="woman">女性</label>
<input type="radio" name="gender" id="other" value="3">
<label for="other">その他</label>


// チェックされていないラジオボタンの取得
var checkedValue = $('input[name=gender]:checked').val();
// => undefine (チェックされていない場合)
// => "1"      (男性がチェックされている場合)

チェックされているチェックボックスの取得

<input type="checkbox" name="hobby" id="sport" value="1">
<label for="sport">スポーツ</label>
<input type="checkbox" name="hobby" id="travel" value="2">
<label for="travel">旅行</label>
<input type="checkbox" name="hobby" id="reading" value="3">
<label for="reading">読書</label>


// チェックされているチェックボックスの取得
var checkedValues = $('input[name=hobby]:checked').map(function(_, element) { return element.value; });
// => []         (チェックされていない場合)
// => ["1", "2"] (スポーツと旅行が選択されている場合)

参考文献

  • 独習JavaScript 第2版