JQuery селекторы, дающие противоречивое поведение

Question

Может кто-нибудь объяснить следующее поведение?

var ctx = $('#myCanvas').getContext("2d");      //doesnt work 
var ctx = $('#myCanvas')[0].getContext("2d");   //works
canvasWidth = $('#myCanvas').width();           //works
canvasHeight = $('#myCanvas').height();         //works
canvasWidth = $('#myCanvas')[0].width();        //doesnt work
canvasHeight = $('#myCanvas')[0].height();      //doesnt work

Answer 1

$('#myCanvas') - это jQuery-объект . $('#myCanvas')[0] является элементом DOM .

width () и height () - это методы, предоставляемые объектами jQuery. Вы не можете вызывать их для элементов DOM, потому что они не реализуют их (пока).

Аналогично, getContext () - это метод, предоставляемый элементом <canvas> DOM, и объекты jQuery его не поддерживают.

Answer 2

$('#myCanvas') возвращает объект jquery, а $('#myCanvas')[0] возвращает элемент HTML / DOM.

---

Аналогичным образом, $(selector).eq(0) возвращает первый элемент в списке как объект jquery, тогда как$(selector).get(0) возвращает элемент HTML / DOM.

Answer 3

getContext - это не функция jquery, это функция элемента. width и height являются функциями jquery, которые вызываются для объекта jQuery.

См. Также: Создание динамического холста jQuery, $ ctx.getContext не является функцией