Se você está usando um código que faz uso do jQuery, este precisa ser carregado antes de qualquer outro recurso que use-o como dependência.
No JSFiddle, isto parece irrelevante pois basta importar um recurso e pronto, o código no campo de Javascript funciona. Acontece que, por baixo os panos, antes de executar o bloco Javascript, todos os recursos são previamente carregados.
E é dessa mesma forma que seu código deve ser, importando os recursos primeiramente (no caso, o jQuery) para depois fazer uso das suas funções.
De forma bem simples, como exemplo, esse código funcionará:
<!-- Importando a biblioteca -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Fazendo uso do jQuery depois de importado -->
<script>
$(function(){
$('body').text('Olá!');
});
</script>
Já o código à seguir não funcionará pois jQuery (ou $
) é indefinido. Inclusive, se executar o snippet e abrir o console do navegador, verá um erro de referência como este:
ReferenceError: $ is not defined.
<!-- Fazendo uso do jQuery antes de importado -->
<script>
$(function(){
$('body').text('Olá!');
});
</script>
<!-- Importando a biblioteca -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Uma forma de fazer o código funcionar é assim:
<!doctype html>
<html>
<head></head>
<body>
<div id="DivOne" class="oddNum">One</div>
<div id="DivTwo" class="evenNum">Two</div>
<div id="DivThree" class="oddNum">Three</div>
<button id="btnOne">Reset odd numbers</button>
<button id="btnTwo">Reset even numbers</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() { // $(function(){}); é o mesmo que $(document).ready(...)
$('.oddNum').css('background-color', '#DEA');
$('#DivTwo').css('background-color', '#FCC');
$('#btnOne').click(function() {
// Action goes here
$('.oddNum').css('background-color', '#FFF');
});
$('#btnTwo').click(function() {
// Action goes here
$('#DivTwo').css('background-color', '#FFF');
});
});
</script>
</body>
</html>
Já no caso de tentar importar o jQuery com a JSAPI, creio que o problema seja por você estar importando um arquivo que não existe. Não sei se é possível importar pela função load()
, mas na página de APIs disponíveis não consta o jQuery, embora exista um código de exemplo com google.load("jquery", "1.4.2");
que acredito ser somente para exemplificar.
As bibliotecas hospedadas possuem um link direto para o arquivo. E não fazem uso da JSAPI. Eu até fiz um teste simples com base no seu código e o retorno exibido no console foi:
Module 'jquery' not found!