「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');