ブラウザ戦国時代には互換性吸収のために jQuery は必要だったが現代ではブラウザの実装も進んできていて jQuery は必ずしも必須という感じでなくなってきている。 脱jQueryする場合の参考として。

定番の真っ先に書くこれ

$(function(){
   // DOM の構築が終わってから動かしたい処理
});

これは、このように書けばよい

document.addEventListener('DOMContentLoaded', function(){
    // DOM の構築が終わってから動かしたい処理
});

jQuery の真骨頂的なCSSのセレクタライクにガシガシ書けるやつ

var hoge = $("#hoge");

実は本家でも同じようなやつが普通に実装されているのでこれを使えばヨイ このメソッドではセレクタで見つかった最初の Document Object が戻ってくる

var hoge = document.querySelector("#hoge");

複数のオブジェクトを戻したいなら。このように記述すればヨイ。

var hogeList = document.querySelectorAll(".hoge");

jQuery にはセレクタで選んでからさらに追い込む find というメソッドがある

var $liList = $("#hoge").find("> li");

これと同等のこともできるようになっている

var liList = document.querySelector("#hoge").querySelectorAll(":scope > li");

:scope という疑似クラスっぽい記述を使うと自身のオブジェクトを起点に検索できるようになる。この場合なら #hoge > li と記述した場合と同等になる。

この :scope という記述は HTML の要素中に書く style 要素中に記述する CSS のセレクタ記述で、その style 要素が所属する HTML 要素を指す擬似クラスとして機能する。