Почему тут надо две обертки (я про знак "\"): $('a[href^=\\/]').on('click', function() { ...});

И в jQuery, и в querySelector, в кавычках должен быть валидный CSS селектор.

А в самом CSS, если в селекторах есть любые специальные символы кроме букв, цифр, тире и нижнего подчеркивания, они должны быть экранированы, чтобы правильно работать (или, в селекторах атрибутов - взяты в кавычки).

https://jsfiddle.net/OPTlMUS/8dkw2xf4/ - демо (так делать не надо!)

В вашем случае валидным селектором будет этот:

$('a[href^="/"]') — одиночные кавычки у $('...') и двойные после знака равенства.

Если кавычки не ставить - ровно также все специальные символы придется экранировать, не только '/'.

А '\\' две штуки потому что в самом JS, внутри строки если написать обратный слеш \ он не будет отображаться. Строка "съедает" его и экранирует следующий символ. Чтобы этого не случилось, нужно поставить два \\ , чтобы первый экранировал второй слеш и последний уже пошел в строку прямо как символ, а не сработал для экранирования.

P.s. надо ставить кавычки и не заморачиваться над экранированием.

Чтобы работало