it-swarm.com.de

So fügen Sie jQuery-Code in die HTML-Seite ein

$(".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");
});

Kann jemand helfen? Es ist für eine Upload-Funktion, die ich unter http://codepen.io/iremlopsum/pen/YPWPap gefunden habe. Ich versuche es auf meine Website zu bekommen

27
justin_graham92

1) Best Practice ist es, eine neue Javascript-Datei wie my.js zu erstellen. Machen Sie diese Datei in Ihrem js-Ordner im Stammverzeichnis -> js/my.js. 2) Fügen Sie in der Datei my.js Ihren Code innerhalb des Bereichs $ (document) .ready (function () {}) hinzu.

$(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) Fügen Sie Ihre neue js-Datei in Ihren HTML-Code ein

<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

Fügen Sie dies vor dem schließenden Tag body hinzu (Verweis auf die jQuery-Bibliothek). Andere gehostete Bibliotheken finden Sie hier

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

Und das

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

Es sollte ungefähr so ​​aussehen

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

Ich würde empfehlen, das Skript so aufzurufen

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

Die Dateien js und css müssen unterschiedlich behandelt werden

Setzen Sie jquery als erstes vor das andere JS scripts am Ende von <BODY> tag

  • Das Problem ist, dass sie parallele Downloads blockieren. Das HTTP/1.1 specification schlägt vor, dass Browser nicht mehr als zwei Komponenten gleichzeitig pro Hostname herunterladen.
  • Wählen Sie also 2 (zwei) der wichtigsten Skripte auf Ihrer Seite aus, z. B. Analyse- und Pixelskripte auf dem <head> Tags und lassen Sie den Rest einschließlich des jquery am unteren Rand aufrufen <body> Etikett.

Setze CSS style auf <HEAD> Tag nach den anderen Tags mit höherer Priorität

  • Wenn Sie Stylesheets in das Dokument HEAD verschieben, werden die Seiten anscheinend schneller geladen. Dies liegt daran, dass durch das Einfügen von Stylesheets in HEAD die Seite progressiv gerendert werden kann.
  • Also ist es für css Blätter besser, sie alle auf den <head> tag aber lass den Stil, der sofort gerendert werden soll, in <style> Tags in <HEAD> und der Rest in <body>.

Möglicherweise finden Sie auch andere Vorschläge, wenn Sie Ihre Seite wie auf Google PageSpeed ​​Insight testen

9
Chetabahana
  1. Erstellen Sie eine Datei für die Abfrage, z. B. uploadfuntion.js.
  2. Speichern Sie diese Datei im selben Ordner wie die Website oder im Unterordner.
  3. Im Abschnitt head Ihrer HTML-Seite einfügen: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

und dann den Verweis auf dein Skript zB: <script src="uploadfuntion.js"> </script>

4.Als letztes sollten Sie sicherstellen, dass es Elemente gibt, die mit den Selektoren im Code übereinstimmen.

4
Rinus

für die neueste JQuery. Einfach:

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