Edited at

生JSとjQueryの基本操作比較

jQueryに頼らずJSを書けるようになるために整理しました。

テストに使ったHTMLは以下です。


使ったHTML

    <p>jQueryの練習</p>

<ul id="main" data-hoge="datahoge">
<li>0</li>
<li class="item" data-index="one">1</li>
<li class="item">2</li>
<li>
3
<ul id="sub" class="hoge" style="padding: 5px; border: solid 10px #0000ff;">
<li><div>hoge</div></li>
<li id="sub1">3-1</li>
<li id="sub2" class="item">3-2</li>
<li class="item">3-3</li>
<li>3-4</li>
</ul>
</li>
</ul>


1. Nodeを取得


1-1. 複雑なCSSクエリ


javascript

document.querySelector('.item'); // 最初のノードを返す

document.querySelectorAll("#sub li"); // ノードリストを返す

// data属性で取得
document.querySelector(".item[data-index=one]")



jQuery

$('#sub li')



1-2. id, classで取得

querySelectorAllより、getElementByIdの方が高速


javascript

document.getElementById('main') // idで検索

document.getElementsByClassName('item') // class名で取得


jQuery

$('#main')



1-3. タグ名検索


javascript

var div2 = document.getElementById("sub");

div2.getElementsByTagName("li") // タグ名検索



jQuery

$('#sub li')



1-4. 親


javascript

var sub = document.getElementById('sub')

sub.parentNode // ほぼ一緒
sub.parentElement // ほぼ一緒



jQuery

$('#sub').parent()



1-5. 子


javascript

var children = document.getElementById('sub').children // 子

children.item(1) // 1番目
children[1] // 1番目

// TextNode含めたい場合childNodes。普通はchildren使えばok
document.getElementById('sub').childNodes



jQuery

var $children = $('#sub').children() // 子

$children[1] // 1番目

$('#sub').children('#sub1') // セレクタ指定(直下のみ)
$('#sub').find('#sub1') // セレクタ指定(配下の要素全て)
$('#sub #sub1') // findと同じ



1-6. 兄弟(前)


javascript

var children = document.getElementById('sub').children

children[4].previousElementSibling //兄弟(前)



jQuery

var $children = $('#sub').children()

$($children[4]).prev() // 兄弟(前)



1-7. 兄弟(次)


javascript

var children = document.getElementById('sub').children

children[4].nextElementSibling // 兄弟(次)



jQuery

var $children = $('#sub').children()

$($children[4]).next() // 兄弟(次)



1-8. 最初の子


javascript

var node = document.getElementById('sub')

node.firstElementChild // 最初の子



jQuery

$('#sub > :first') // 最初の子



1-9. 最後の子


javascript

var node = document.getElementById('sub')

node.lastElementChild // 最後の子



jQuery

$('#sub > :last') // 最後の子



2. Nodeの情報


Nodeのテキスト


javascript

var sub = document.getElementById("sub");

sub.children[0].innerHTML // 戻り値 => <div>hoge</div>
sub.children[0].textContent // 戻り値 => hoge



jQuery

$('#sub > :first').html() // innerHTMLと同じ結果

$('#sub > :first').text() // textContentと同じ結果


Nodeの高さ


javascript

var sub = document.getElementById("sub");

console.log(sub.clientHeight) // => 100
console.log(sub.scrollHeight) // => 100(スクロールを含んだ高さ)
console.log(sub.offsetHeight) // => 120


Nodeのid


javascript

document.getElementById("sample").id



jQuery

$('#sample').attr('id')



Nodeの存在確認


javascript

if ( document.getElementById("sample") != null ) { }



jQuery

if($('#sample').length){ }



Nodeのタイプ


javascript

var sub = document.getElementById("sub");

sub.nodeType // Nodeのタイプを数字で取得



3. Nodeの作成/追加/削除/置き換え


3-1. Nodeの削除


javascript

var sub = document.getElementById("sub");

sub.removeChild(sub.children[0]) // 子要素を指定して削除



jQuery

$('#sub > :first').remove(); // 自分自信を削除



3-2. Nodeの作成


javascript

// innerHTML利用パターン

var newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";

// createTextNode利用パターン
var sp1 = document.createElement("span");
var sp1_content = document.createTextNode("新しい span 要素");
sp1.appendChild(sp1_content);



jQuery

var li = $('<li>').text('just added');



3-3. Nodeの追加(末尾)


javascript

var newDiv = document.createElement("div");

var sub = document.getElementById("sub");

sub.appendChild(newDiv) // Nodeの追加(末尾)



jQuery

var li = $('<li>').text('just added');

$('ul').append(li); // Nodeの追加(末尾) 書き方1
li.appendTo($('ul')); // Nodeの追加(末尾) 書き方2



3-4. Nodeの追加(要素の前)


javascript

var newDiv = document.createElement("div");

var sub = document.getElementById("sub");

sub.insertBefore(newDiv, sub.children[1]) //Nodeの追加(要素の前)



jQuery

var li = $('<li>').text('just added');

$('#sub').children()[2].before(li) // Nodeの追加(要素の前) 書き方1
li.insertBefore($('#sub').children()[2]) // Nodeの追加(要素の前) 書き方2


3-5. Nodeの置き換え


javascript

// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換

parentDiv.replaceChild(sp1, sp2); // Nodeの置き換え


jQuery

var $li = $('<li>').text('just added');

$('#flute').replaceWith($li); // Nodeの置き換え



4. classの操作


4-1. class取得


javascript

var sub = document.getElementById('sub')

sub.className // 文字列で取得
sub.classList // 要素の class 属性のトークンリスト



jQuery

$node.attr('class'); // 文字列で取得



4-2. class追加/削除/toggle


javascript

var sub = document.getElementById('sub')

sub.classList.add('red') // class追加
sub.classList.remove('red') // class削除
sub.classList.toggle('red') // classのtoggle



jQuery

$('#sub').addClass('red')    // class追加

$('#sub').removeClass('red') // class削除
$('#sub').toggleClass('red') // classのtoggle


4-3. 持っているか確認


javascript

var ele = document.getElementById('sub');

ele.classList.contains('red') // => true
ele.classList.contains('blue') // => false


jQuery

var ele = $('#sub')

ele.hasClass('red') // => true
ele.hasClass('blue') // => false


5. 属性の取得/設定


javascript

sub.getAttribute('class')           // 属性の取得

sub.setAttribute('class', 'blue') // 属性の設定


jQuery

$('#sub').attr('class')        // 属性の取得

$('#sub').attr('class', 'red') // 属性の設定


6. 正規表現


javascript

/#tab2/.test('#tab2') // => true

// 文字列が含まれれば配列、文字列が含まれなければnullが返る
'#tab2'.match(/#tab2/) // => ["#tab2"]



7. イベント


7-1. イベントの作成/リスナー/発火


javascript

var event = new Event('colorChange');      // イベント作成

var sub = document.getElementById('sub'); // イベントのターゲット
sub.addEventListener('colorChange', function(e){ // イベントリスナー
e.target.classList.remove('red');
e.target.classList.add('blue');
});
sub.dispatchEvent(event); // イベント発火


jQuery

$('#sub').on('colorChange', function(e){  // イベントリスナー

$(e.target).removeClass('red');
$(e.target).addClass('blue');
})
$('#sub').trigger('colorChange') // イベント発火


8.CSS操作


8-1.CSS設定


javascript

var sub1 = document.getElementById('sub1');

sub1.style.color = 'blue';


jQuery

$('#sub1').css('color', 'blue');



9. dataset


javascript

var main = document.getElementById('main');

console.log(main.dataset.hoge)


jQuery

$('#main').data('hoge')



10.form関連


checkedの確認


HTML

<form action="cgi-bin/abc.cgi" method="post">

<p>
<input type="checkbox" name="riyu" value="1" checked="checked">面白い
<input type="checkbox" name="riyu" value="2">役に立つ
<input type="checkbox" name="riyu" value="3">いまいち
</p>
<p><input type="submit" value="送信する"></p>
</form>


javascript

var check_element = document.querySelector("input[value='1']");

console.log(check_element.checked)

// :checkedを使った書き方
querySelectorAll('input:checked')



jQuery

$("input[value='1']").prop("checked")



select


jQuery

$select = $('select')

$('option:selected', $select).val()


11. 型を確認する


javascript

console.log(typeof(new String('hoge')));  // object



jquery

console.log($.type(new String('hoge')));  // string