Объясните мне некоторые моменты...

[ErUnDAK]

Данный вариант —> var i = parseInt($("#sli").css('margin-left'));   Индентичен варианту —> var i = parseInt(document.getElementById('sli').style.marginLeft).
Но, по какой-то причине, второй вариант не работает. То есть, я не могу стиль вложить в переменную в JavaScript, а в JQuery такое возможно. И при изменении стиля типо left в javascript, мне нужно указывать что-то вроде 100 + 'px', а такой момент отсутствует в JQuery, сойдут обычные числа. Был бы благодарен, если бы на мои вопросы были ответы, потому что мне не понятна такая работа кода.

[Igor Schnaider]

elem.style может прочитать только те стили, что есть в атрибуте style элемента. Чтобы получить вычисленное значение какого-то свойства, можно воспользоваться getComputedStyle(elem).

По поводу jQuery не очень понял, что не получается. В вашем случае будет примерно так:

$("#sli").css('margin-left', 100 + i);

// or
$('#sli').css('margin-left', (undefined, value) => parseFloat(value) + 100);

 

[Switch74]

Второй вариант скорее всего не работает, потому что вы задаете стили в отдельном файле, чтобы получать такие стили нужно использовать getComputedStyle
Почему вы сравниваете js и jquery, написанный на нем? Это как сравнивать язык программирования с программой которая на нем написана: "почему чтобы что-то сделать на языке программирования нужно написать много строчек кода, а в программе тоже самое выполняется за одно нажатие кнопки?"
Установка свойств для стилей требует обязательного указания единиц измерений, jquery просто дописывает их за вас.