jQuery→JavaScript書き換え一覧表

More than 1 year has passed since last update.


CSSセレクタ


共通のHTML

    <ul>

<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト</li>
</ul>

<ul>
<li class="first">テキスト<strong>テキスト</strong>テキスト</li>
<li class="second">テキスト<em>テキスト</em>テキスト</li>
<li class="third">テキスト<span>テキスト</span>テキスト</li>
<li class="fourth">テキストテキストテキスト</li>
</ul>

<ul>
<li lang="en">テキストテキストテキスト</li>
<li></li>
<li><span>テキスト</span>テキスト<span>テキスト</span></li>
<li></li>
</ul>

<dl>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
</dl>

<dl>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
<dt>dt. テキストテキストテキスト</dt>
<dd>dd. テキストテキストテキスト</dd>
</dl>



要素セレクタ


jQuery

$("li").css("color", "red");



JavaScript

document.querySelectorAll('li').forEach(function(value) {

value.style.color = 'red';
});


IDセレクタ


jQuery

$('li#first').css('color', 'red');



JavaScript

document.querySelector('li#first').style.color = 'red';



クラスセレクタ


jQuery

$('li.first').css('color', 'red');



JavaScript

document.querySelectorAll('li.first').foreach(function(value) {

value.style.color = 'red';
});


子孫セレクタ


jQuery

$('.first strong').css('color', 'red');



JavaScript

document.querySelectorAll('.first strong').forEach(function (value) {

value.style.color = 'red';
});


ユニバーサルセレクタ


jQuery

$('li *').css('color', 'red');



JavaScript

document.querySelectorAll('li *').forEach(function (value) {

value.style.color = 'red';
});


グループセレクタ


jQuery

$('#first, #third').css('color', 'red');



JavaScript

document.querySelectorAll('#first, #third').forEach(function (value) {

value.style.color = 'red';
});


first-child疑似クラス


jQuery

$('li:first-child').css('color', 'red');



JavaScript

document.querySelectorAll('li:first-child').forEach(function(value) {

value.style.color = 'red';
});


CSS3:間接セレクタ


jQuery

$('#second ~ li').css('color', 'red');



JavaScript

document.querySelectorAll('#second ~ li').forEach(function (value) {

value.style.color = 'red';
});


CSS3:否定擬似クラス


jQuery

$('li:not(:first-child)').css('color', 'red');



JavaScript

document.querySelectorAll('li:not(:first-child)').forEach(function(value) {

value.style.color = 'red';
});


CSS3:empty擬似クラス


jQuery

$('li:empty').css('color', 'red');



JavaScript

document.querySelectorAll('li:empty').forEach(function(value) {

value.style.color = 'red';
});


CSS3:nth-child擬似クラス


jQuery

$('li:nth-child(3)').css('color', 'red');

$('li:nth-child(even)').css('color', 'red');
$('li:nth-child(odd)').css('color', 'red');
$('li:nth-child(3n)').css('color', 'red');


JavaScript

document.querySelectorAll('li:nth-child(even)').forEach(function(value) {

value.style.color = 'red';
})


CSS3:last-child擬似クラス


jQuery

$('li:last-child').css('color', 'red');



JavaScript

document.querySelectorAll('li:last-child').forEach(function(value) {

value.style.color = 'red';
});


CSS3:only-child擬似クラス


jQuery

$('li span:only-child').css('color', 'red');



JavaScript

document.querySelectorAll('li span:only-child').forEach(function(value) {

value.style.color = 'red';
});


CSS3:nth-last-child擬似クラス


jQuery

$('li:nth-last-child(3)').css('color', 'red');



JavaScript

document.querySelectorAll('li:nth-last-child(3)').forEach(function(value) {

value.style.color = 'red';
})


CSS3:nth-of-type擬似クラス


jQuery

$('dt:nth-of-type(2)').css('color', 'red');



JavaScript

document.querySelectorAll('dt:nth-of-type(2)').forEach(function(value) {

value.style.color = 'red';
});


CSS3:nth-last-of-type擬似クラス


jQuery

$('dt:nth-last-of-type(1)').css('color', 'red');



JavaScript

document.querySelectorAll('dt:nth-last-of-type(1)').forEach(function(value) {

value.style.color = 'red';
});


CSS3:first-of-type擬似クラス


jQuery

$('dd:first-of-type').css('color', 'red');



JavaScript

document.querySelectorAll('dd:first-of-type').forEach(function(value) {

value.style.color = 'red';
});


CSS3:last-of-type擬似クラス


jQuery

$('dd:last-of-type').css('color', 'red');



JavaScript

document.querySelectorAll('dd:last-of-type').forEach(function(value) {

value.style.color = 'red';
});


CSS3:only-of-type擬似クラス


jQuery

$('strong:only-of-type').css('color', 'red');



JavaScript

document.querySelectorAll('strong:only-of-type').forEach(function(value) {

value.style.color = 'red';
});


CSS3:only-of-type擬似クラス


jQuery

...



JavaScript

document.querySelectorAll('strong:only-of-type').forEach(function(value) {

value.style.color = 'red';
});


CSS3:lang擬似クラス


jQuery

$('li:lang(en)').css('color', 'red');



JavaScript

document.querySelectorAll('li:lang(en)').forEach(function(value) {

value.style.color = 'red';
});


属性セレクタ


jQuery

$('[id], [class="first"]').css('color', 'red');

// [attribute!="..."] -> 特定の属性値を持たない要素を選択
// [attribute^="..."] -> 特定の文字列で始まっている属性値を持つ要素を選択
// [attribute$="..."] -> 特定の文字列で終わっている属性値を持つ要素を選択
// [attribute*="..."] -> 特定の文字列を含む属性値を持つ要素を選択
// [attribute="..."][attribute="..."] -> 複数の属性値を指定できる


JavaScript

document.querySelectorAll('[id], [class="first"]').forEach(function(value) {

value.style.color = 'red';
});


jQueryの独自セレクタ


jQuery

$('li:first, li:last').css('color', 'red');

$('li:even, li:odd').css('color', 'red');
$('li:lt(2)').css('color', 'red');
$('li:eq(2)').css('color', 'red');
$('li:gt(2)').css('color', 'red');
$(':header').css('color', 'red');
$('li:contains("テキスト")').css('color', 'red');
$('li:has(strong)').css('color', 'red');
$('li:parent').css('color', 'red');


HTML/CSS操作


テキストの変更


HTML

<p id="first">変更前</p>



jQuery

$('p#first').text('変更後');



JavaScript

document.getElementById('first').textContent = '変更後'



テキストの取得


HTML

<p id="first">取得する文字列</p>

<p id="second">変更前</p>


jQuery

$('p#second').text($('p#first').text());



JavaScript

var text = document.getElementById('first').textContent;

document.getElementById('second').textContent = text ;


HTMLの変更


HTML

<p id="first">変更前</p>



jQuery

$('p#first').html('<strong>変更後</strong>');



JavaScript

document.getElementById('first').innerHTML = '<strong>変更後</strong>';



HTMLの取得


HTML

<p id="first"><strong>取得するHTML</strong></p>

<p id=<