web-dev-qa-db-fra.com

Comment ajouter du code jQuery dans une page 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");
});

Quelqu'un peut-il aider? C'est pour une fonction de téléchargement que j'ai trouvée sur http://codepen.io/iremlopsum/pen/YPWPap . Essayer de le faire sur mon site

javascriptjqueryhtmlweb
27
justin_graham92

1) La meilleure pratique consiste à créer un nouveau fichier javascript comme my.js. Créez ce fichier dans votre dossier js dans le répertoire racine -> js/my.js. 2) Dans le fichier my.js, ajoutez votre code dans la portée de $ (document) .ready (function () {}).

$(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) ajoutez votre nouveau fichier js dans votre 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>
23
nikssa23

Avant la balise de fermeture body, ajoutez ceci (référence à la bibliothèque jQuery). D'autres bibliothèques hébergées peuvent être trouvées ici

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

Et ça

<script>
  //paste your code here
</script>

Ça devrait ressembler a quelque chose comme ca

<body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>
13
Aravind Bharathy

Je recommanderais d'appeler le script comme ça

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

Les fichiers js et css doivent être traités différemment

Placez jquery en premier avant les autres JS scripts Au bas de la balise <BODY>

  • Le problème est qu'ils bloquent les téléchargements parallèles. Le HTTP/1.1 specification Suggère que les navigateurs ne téléchargent pas plus de deux composants en parallèle par nom d'hôte.
  • Sélectionnez donc 2 (deux) scripts les plus importants de votre page, tels que script analytique et script pixel sur les balises <head> Et laissez le reste, y compris le jquery être appelé en bas <body> étiquette.

Placez CSS style Au-dessus de la balise <HEAD> Après les autres balises plus prioritaires

  • Le déplacement des feuilles de style vers le document HEAD accélère le chargement des pages. En effet, le fait de placer des feuilles de style dans HEAD permet à la page d’être rendue progressivement.
  • Donc, pour css feuilles, il est préférable de toutes les placer sur la balise <head>, Mais de laisser le style à rendre immédiatement dans les balises <style> À l'intérieur de <HEAD> Et le reste dans <body>.

Vous pouvez également trouver d'autres suggestions lorsque vous testez votre page, comme sur Google PageSpeed ​​Insight

9
Chetabahana
  1. Créez un fichier pour le jQuery, par exemple uploadfuntion.js.
  2. Enregistrez ce fichier dans le même dossier que site Web ou dans un sous-dossier.
  3. Dans la section head de votre page HTML, collez: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

et ensuite la référence à votre script, par exemple: <script src="uploadfuntion.js"> </script>

4. Enfin, vous devez vous assurer que certains éléments correspondent aux sélecteurs du code.

4
Rinus

pour le dernier Jquery. Simplement:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
0
mpalencia