jQuery .find() и .animate()

Question

Я делаю термометр, и я работаю над анимацией термометра. У меня есть этот яваскрипта способ сделать это:

function setScoreBar(score) { 
    var scoreBar = document.getElementById("dynamicScoreBar"); 
    // var scoreBar = $(scoreBarElem); 
    var height = 250; 
    height = height - 20; 
    var percentage = height/100; 
    scoreBar.find(".meter").animate({ 
     marginTop: (height - (score * percentage)) + "px" 
    }, 400, function() { 
     scoreBar.find(".meter").html(score + "%"); 
    }); 
} 

и мой HTML выглядит следующим образом

<div id="dynamicScoreBar" class="scoreBar"> 
    <div class="meter">0%</div> 
    <div class="red"></div> 
</div> 

Когда я debugg это я получаю ошибку, которая говорит о том, что .find и .animate методы не существует , Но когда я пытаюсь написать его, я получаю помощь от визуальных студий, и он показывает мне возможность использовать его, чтобы он существовал: P я могу использовать что-то еще? или у меня есть какой-то синтаксис?

Answer 1

.find и .animate - функции jQuery. Они существуют, когда scoreBar является объектом jQuery. Это не когда вы назначаете его document.getElementById. getElementById - это чистая функция javascript и вернет узел DOM.

Если вы используете фреймворк jQuery, вы можете превратить любой узел DOM в объект jQuery, обернув его $(...). Для конкретного сценария, можно переписать назначение переменной полностью:

var scoreBar = $('#dynamicScoreBar'); 

... и переменная scoreBar будет объект JQuery с find и animate доступных функций.