Como adicionar o código jQuery na página HTML

$(".icon-bg").click(function () {
    $(".btn").toggleClass("active");
    $(".icon-bg").toggleClass("active");
    $(".container").toggleClass("active");
    $(".box-upload").toggleClass("active");
    $(".box-caption").toggleClass("active");
    $(".box-tags").toggleClass("active");
    $(".private").toggleClass("active");
    $(".set-time-limit").toggleClass("active");
    $(".button").toggleClass("active");
});

$(".button").click(function () {
    $(".button-overlay").toggleClass("active");
});

$(".iconmelon").click(function () {
    $(".box-upload-ing").toggleClass("active");
    $(".iconmelon-loaded").toggleClass("active");
});

$(".private").click(function () {
    $(".private-overlay").addClass("active");
    $(".private-overlay-wave").addClass("active");
});
Alguém pode ajudar? É para uma função de upload que encontrei em http://codepen.io/iremlopsum/pen/YPWPap Tentando colocá-lo no meu site

Author: Pierrickouw, 2015-04-22
Source

4 answers

1) A melhor prática é fazer um novo ficheiro javascript como o meu.js. Torne este ficheiro na sua pasta js na pasta de topo - > js / my.js . 2) In my.ficheiro js adicione o seu código dentro do $(documento).ready (função () {}) escopo.

$(document).ready(function(){
    $(".icon-bg").click(function () {
        $(".btn").toggleClass("active");
        $(".icon-bg").toggleClass("active");
        $(".container").toggleClass("active");
        $(".box-upload").toggleClass("active");
        $(".box-caption").toggleClass("active");
        $(".box-tags").toggleClass("active");
        $(".private").toggleClass("active");
        $(".set-time-limit").toggleClass("active");
        $(".button").toggleClass("active");
    });

    $(".button").click(function () {
        $(".button-overlay").toggleClass("active");
    });

    $(".iconmelon").click(function () {
        $(".box-upload-ing").toggleClass("active");
        $(".iconmelon-loaded").toggleClass("active");
    });

    $(".private").click(function () {
        $(".private-overlay").addClass("active");
        $(".private-overlay-wave").addClass("active");
    });
});

3) Adicione o seu novo ficheiro js ao seu html 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</head>
 18
Author: nikssa23, 2017-05-20 09:13:37

Antes do fecho body, adicione isto (referência à biblioteca jQuery). Outras bibliotecas hospedadas podem ser encontradas aqui

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

E isto 

<script>
  //paste your code here
</script>
Deve ser parecido com isto. 
<body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>
 8
Author: Aravind Bharathy, 2015-04-22 11:34:10
  1. Crie um ficheiro para o jquery eg uploadfuntion.js.
  2. grava esse ficheiro na mesma pasta que a página web ou a sub-pasta.
  3. na secção head da sua pasta de página html: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
E depois a referência ao teu guião.: <script src="uploadfuntion.js"> </script>

4.Por último, deve assegurar-se de que existem elementos que correspondem aos selectores do Código.

 2
Author: Rinus, 2015-04-22 12:04:24
Eu recomendaria chamar o guião assim. 
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</body>

Os ficheiros js e css devem ser tratados de forma diferente

colocar jquery como o primeiro antes de outros programas JS no fundo da marca <BODY>

    O problema é que bloqueiam downloads paralelos. O HTTP/1.1 specification sugere que os navegadores não transferem mais do que dois componentes em paralelo por nome da máquina.
  • por isso seleccione 2 (dois) programas mais importantes na sua página como o script analítico e pixel nas marcas <head> e deixe o resto, incluindo o jquery, ser chamado na marca inferior <body>.

colocar o estilo CSS em cima da marca <HEAD> depois das outras marcas mais prioritárias

  • mover folhas de estilo para o documento HEAD faz com que as Páginas apareçam estar a carregar mais depressa. Isto porque colocar folhas de estilo no HEAD permite que a página seja renderizada progressivamente.
    • Então, para os lençóis, é melhor coloque - os todos na etiqueta <head>, mas deixe o estilo que deve ser imediatamente renderizado para ser colocado em <style> etiquetas dentro <HEAD> e o resto em <body>.

Você também pode encontrar outra sugestão quando testar a sua página como em visão do PageSpeed do Google

 2
Author: Chetabahana, 2018-05-13 02:02:19