change - Como faço para vincular um arquivo JavaScript a um arquivo HTML?




title attribute html (4)

É assim que você vincula um arquivo JS em HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script> - a tag é usada para definir um script do lado do cliente, como um JavaScript.

type - especifica o tipo do script

src - nome e caminho do arquivo de script

Como você vincula corretamente um arquivo JavaScript a um documento HTML?

Em segundo lugar, como você usa o jQuery dentro de um arquivo JavaScript?


Abaixo você tem alguns documentos de exemplo VALID html5 . O atributo type na tag de script não é obrigatório no HTML5.

Você usa jquery por $ charater. Coloque bibliotecas (como jquery) na tag <head> - mas o seu script colocará tudo na parte inferior do documento (tag <body> ) - devido a isso você terá certeza de que todas as bibliotecas e documentos html serão carregados quando a execução do script for iniciada. Você também pode usar o atributo src na tag de script inferior para incluir o arquivo de script em vez de colocar o código js como acima.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div>Im the content</div>

    <script>
        alert( $('div').text() ); // show message with div content
    </script>
</body>
</html>


Primeiro você precisa baixar a biblioteca JQuery de http://jquery.com/ seguida, carregar a biblioteca jquery da seguinte maneira dentro de suas tags de cabeça html

então você pode testar se a jquery está funcionando codificando seu código jquery após o script de carregamento jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

Se você quiser usar seu arquivo de scripts jquery separadamente, você deve definir o arquivo .js externo dessa maneira após o carregamento da biblioteca jquery.

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

Teste em tempo real

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>


Você pode adicionar tags de script em seu documento HTML, idealmente dentro do que aponta para seus arquivos javascript. Ordem das tags de script são importantes. Carregue o jQuery antes de seus arquivos de script, se você quiser usar o jQuery do seu script.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>

Em seguida, no seu arquivo javascript, você pode consultar o jQuery usando $ sign ou jQuery . Exemplo:

jQuery.each(arr, function(i) { console.log(i); }); 




html