Отличие вызовов js и jquery

241

25 декабря 2017, 11:47

Всем доброго времени суток, назрел один небольшой вопрос, почему это работает:

$('#bigTable3').append('<canvas id="schedule">schedule</canvas>');
var schedule = document.getElementById("schedule").getContext("2d");

а это:

$('#bigTable3').append('<canvas id="schedule">schedule</canvas>');
var schedule = $('#schedule').getContext("2d");

и даже это:

$('#bigTable3').append('<canvas id="schedule">schedule</canvas>');
var schedule = $('#schedule');
var graph = schedule.getContext("2d");

нет!

Вообще честно говоря стало интересно, что вообще вызывает jQuery, и чем оно так разительно отличается от того что получает чистый js при вызове id,clss,name.

Заранее спасибо!

Answer 1

На чистом Javascript селектор выбирает DOM-элемент (или коллекцию, в зависимости от селектора). Если на текущей странице в консоли написать document.getElementById("custom-header"), то выведется

<div id="custom-header"></div>

C этим элементом можно производить разные действия, которые "прикреплены" к HTMLElement'у

Jquery же при выборке возвращает объект, в котором хранится множество данных о выборке. Вот что вернет Jquery при запросе $('#custom-header') на текущей странице:

Не хилый такой объект с информацией.

Далее... При вызове $('.prettyprint') на текущей странице будет заметно, что выбрано три элемента (0,1,2):

Почему при выборке одного элемента на Jquery приходится писать $('#Selector')[0] или надо, либо $('#Selector').get(0) ? Ну видимо они решили пусть будет список всегда, только при одном элементе - будет один объект в списке, а при нескольких - много. Иначе бы пришлось для выборки одного элемента перекраивать возвращаемый объект. А зачем?