JS にあまり触れないうちに色々機能の実装やブラウザごとの挙動の統一が進んで jQuery 無しでも遜色無い動きができるようになってきた。

The jQuery というアノ機能。これも現在のバニラで普通に書けるようになっている。

// jQuery
var hoge = $("#hoge");
 
// Vanilla
var hoge = document.querySelector("#hoge");
var hoge = document.querySelectorAll(".hoge");

querySelector は最初の1個だけを取得する時に使い、$ 同様に合致を全部取りたいときは querySelectorAll を使う。

このように限定してさらにそこから取るという find 的な動きもできる

// jQuery
var piyo = $("#hoge").find(".piyo");
 
// Vanilla
var piyo = document.querySelector("#hoge").querySelectorAll(":scope .piyo");

この :scope という記述がその前述の範囲(この場合は#hoge)を表すセレクタになっている。

button 要素を作って変数につっこむ。

//jQuery
var hoge = $("<button>");
 
// Vanilla
var hoge = document.createElement('button');

対象(hoge)の直後に要素(piyo)を追加したい場合、こうなる。仕様が完全に馬鹿なのでわかりやすいメソッドを作っておくとよいだろう

hoge.parentNode.insertBefore(piyo, hoge.nextSibling); 

function appendAfter(a, b){
    a.parentNode.insertBefore(b, a.nextSibling); 
}

DOM が全部構築されたら動くというやつ

// jQuery
$(function(){
    // hogehoge
});
 
// Vanilla
document.addEventListener('DOMContentLoaded', function(){
    // hogehoge
});