「jQuery」と「JavaScript」の要素を指定方法を比較

@ハクト 2022-09-12 13:04:57に投稿

 

「jQuery」と「JavaScript」で要素を指定する場合の書き方の違いです。

id

$('#id');
document.querySelector('#id');
//または
document.getElementById('id');

class

$('.class');
document.querySelectorAll('.class');
//または
document.getElementByClassName('.class');

要素

$('p');
document.querySelectorAll('p');

属性

$('input[type=checkbox]') 
//全要素
$('input[type=checkbox]').eq(0)
//最初の要素
document.querySelectorAll('input[type=checkbox]')        //全要素
document.querySelectorAll('input[type=checkbox]')[0] //最初の要素

複数要素

$('.cls1,.cls2')
document.querySelectorAll('.cls1,.cls2');

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter