Как получить элемент DOM в переменную с JQuery?

Question

Я играю с начинающим учебником о холсте

Мне было интересно, смогу ли я изменить это (что работает прямо из учебника):

     <script>  
        $(document).ready(function() {  
            var can = document.getElementById("myCanvas");  
            var ctx = canvas.getContext("2d");
            ctx.fillRect(50, 25, 150, 100);
        });  
    </script> 

в это:

 $(document).ready(function() { 
    can = $("mycanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillRect(50, 25, 150, 100);
 }); 

или, может быть, даже в

var ctx=$("mycanvas").getContext("2d");
ctx.fillRect(50,25,150,100);

что-то не работает, и я не могу понять, что? Я попытался добавить .val (), как я видел в бесчисленных статьях

can=$("#mycanvas").val()

, а также .atrr ()

can=$("mycanvas").attr("id")

но безрезультатно Что я делаю неправильно? или, возможно, это невозможно с jquery? Буду рад любой помощи с этим.

Answer 1

Это .attr('id'), а не .atrr('id').

Чтобы получить узел DOM из объекта jQuery, используйте оператор индекса массива ([]) или метод .get():

var can = $('#mycanvas')[0]; // or:
var can = $('#mycanvas').get(0);